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

Question

我有以下代码可以倒计时到特定时间。为了 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>

Answer 1

像这样：

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

Answer 2

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

JSFIDDLE

详情：

设置这些行：

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

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

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

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

Split a numeric value into single digit spans

javascript

split

numbers

number-formatting