将数值拆分为单个数字范围

Posted 2023-04-14

【中文标题】将数值拆分为单个数字范围

【英文标题】：Split a numeric value into single digit spans

【发布时间】：2018-11-28 09:12:40

【问题描述】：

我有以下代码可以将小时数倒计时到某个时间。出于 CSS 的目的，我需要将数字拆分为单个跨度，例如：

<p>Hours Left</p>
<span>4</span>
<span>6</span>

而不是<span>46</span>

你能帮我实现它吗？

我正在使用以下代码：

var end = new Date('12/18/2018');

var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var timer;

function showRemaining() 
  var now = new Date();
  var distance = end - now;
  if (distance < 0) 
    clearInterval(timer);
    document.getElementById('countdown').innerhtml = 'EXPIRED!';
    return;
  
  var hours = Math.floor((distance) / _hour);
  document.getElementById('countdown').innerHTML = hours;


timer = setInterval(showRemaining, 1000);

<p id="countdown"></p>

【参考方案1】：

像这样：

var hours = 12;
var hours_html = hours.toString().replace(/(.)/g, "<span>$1</span>");
// "<span>1</span><span>2</span>"

【参考方案2】：

您需要拆分小时值并将其重新组合在一起：

JSFIDDLE

详情：

设置这些行：

var split_hours = (hours+"").split('');

document.getElementById('countdown').innerHTML =  '<span>'+split_hours.join('</span><span>')+'</span>';

这不是最干净的解决方案，但工作稳定。

【讨论】：

@Palf this is how you say thank you on SO

我确实支持了你，但因为我没有足够的代表。它被隐藏了