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

这是没有var count = 0; $("#example1").DataTable.columns().eq(4).each( function ( index ) { var column = $("#example1").DataTable.column( index ); var value = column.data(); if(value === 'OK'){ count++; } }); console.log('length'+count);和setTimeout的简化版本。

每个数字都将与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') || '')

我敢肯定，您可以进行选择，自定义并将其应用于您自己的示例。

更新：用CSS类替换了颜色
更新：添加<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <input id="input" /> <div id="root"></div>用法，请注意，此处不允许使用localStorage，可以找到一个有效的示例here

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

1 个答案: