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>$1</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>';

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

将数值拆分为一位数跨度

2 个答案: