Разделить числовое значение на однозначные интервалы

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

Вам нужно разделить значение часа и соединить его вместе:

JSFIDDLE

Подробности:

Настройкаэти строки:

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

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

Это не самое чистое решение, но работает стабильно.

Answer 2

Вроде так:

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