时间戳

首页 > 解决方案 > Split counter to array and prepend html

javascript - Split counter to array and prepend html

问题描述

I'm trying to split the numbers in a counter so I can style each digit individually, I've got this so far but can't get seems to get the numbers.

You can check the code on jsFiddle http://jsfiddle.net/xpvt214o/553785/,

did not work on here and I made it so that the number needs to be added to the field before it start. A requirement of the counter.

Thanks & Regards

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>

标签： javascriptjqueryhtmlcounter

解决方案

这是一个没有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用法，注意在 SO 中不允许使用localStorage，可以在这里找到一个工作示例

推荐阅读