将计数器拆分为数组并添加 html

Question

我正在尝试拆分计数器中的数字，以便我可以单独设置每个数字的样式，到目前为止我已经得到了这个，但似乎无法得到数字。

你可以在jsFiddle上查看代码http://jsfiddle.net/xpvt214o/553785/，

在这里不起作用，我做了它，以便在开始之前需要将数字添加到字段中。计数器的要求。

感谢和问候

jQuery(function() {

  $("#countValue").on("keyup change", function() {
    counter = this.value;
    $("#count").text(value);
  });

  if (typeof(localStorage.getItem('counts')) != 'object') {
    counter = parseInt(localStorage.getItem('counts'));
  }
  setInterval(function() {
    $("#count").html(counter);
    ++counter;
    localStorage.setItem('counts', counter);
  }, 2000);

  console.log(counter);


  $("#countValue").focusout(function() {
    $(".hideinput").hide();
  });


  // $('div .number').each(function() {
  //     var number = $(this).text();
  //     var i = 0;

  // $(this).parent().prepend($("<span class='nNumber'></span>"));
  // while (i < number.length) {
  //     $(this).hide();
  //     var nChar = number.charAt(i);
  //     $(this).parent().find('.nNumber').append('<span class="digit-' + nChar + '">' + nChar + '</span>');
  //     i++;
  // }
  // });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="counterParent">
  <h1 id="count" class="number"></h1>
</div>


<!-- Result as below

        <h1 id="count" class="number">
          <span class="num">0</span>
          <span class="num">0</span>
          <span class="num">0</span>
          <span class="num">0</span>          
        </h1>

-->

<div class="hideinput">
  <input type="text" id="countValue">
</div>

Answer 1

这是一个没有setTimeouts和localStorage的简化版本。

每个数字将变为span 和class="digit-1/2/3/etc"。

const toHtml = value => value
    .split('')
    .map((x, i) => `<span class="digit-${i}">${x}</span>`)
    .join('')

$('#input').on('input', function() {
  $('#root').html(toHtml(this.value))
  localStorage.setItem('count', this.value)
})

$('#input').val(localStorage.getItem('count') || '')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<input id="input" />
<div id="root"></div>

我敢肯定，您可以选择、自定义并应用到您自己的示例中。

更新：用 CSS 类替换颜色
更新：添加 localStorage 用法，注意这里不允许使用 localStorage ，可以找到一个工作示例here