时间戳

首页 > 解决方案 > 计数器应无限期运行，直到单击停止按钮，该按钮应返回已设置的值

javascript - 计数器应无限期运行，直到单击停止按钮，该按钮应返回已设置的值

问题描述

我正在尝试创建像 10 个盒子一样单独计数的数字计数器。单击“开始计数”按钮时，我希望每个圆圈中的计数器从 0 到 9 无限期地计数，直到单击“停止计数”按钮。单击“停止计数器”按钮时，我想返回 HTML 中的指定值。例如，我希望框中显示的数字是设置值（即 785368，如下面的 HTML 代码所示）。

在很少的帮助下，我已经能够在所附的笔中进行创作。https://codepen.io/anon/pen/JeByaQ

  $("#startCount").on("click", function (evt) {

   $('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
      speed: 100,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});
});
#winh
{
  width: 100px;
	height: 100px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
  float:left;
  margin:5px;
}
.count
{
  line-height: 100px;
  color:white;
  margin-left:30px;
  font-size:25px;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="winh"><span class="count">7</span></div>
<div id="winh"><span class="count">8</span></div>
<div id="winh"><span class="count">5</span></div>
<div id="winh"><span class="count">3</span></div>
<div id="winh"><span class="count">6</span></div>
<div id="winh"><span class="count">8</span></div>
<div style="clear:both"></div>

<button id="startCount">Start Count</button>
<button id="stopCount">Stop Count</button>

标签： javascriptjquery

解决方案

  var num = document.getElementsByClassName("count"),
        speed = 1000,
        timing;
    counting = function () {
        timing = setInterval(controllers, speed)
    }
    function controllers() {
        for (n = 0; n < num.length; n++) {

            num[n].innerHTML = parseInt(num[n].innerHTML) + 1
            if (num[n].innerHTML == 10) {
                num[n].innerHTML = 0;
            }

        }
    }
    function stop() {
        clearInterval(timing)
    }
      #winh {
            width: 100px;
            height: 100px;
            background: red;
            -moz-border-radius: 50px;
            -webkit-border-radius: 50px;
            border-radius: 50px;
            float: left;
            margin: 5px;
        }

        .count {
            line-height: 100px;
            color: white;
            margin-left: 30px;
            font-size: 25px;
        }
 <div id="winh"><span class="count">7</span></div>
    <div id="winh"><span class="count">8</span></div>
    <div id="winh"><span class="count">5</span></div>
    <div id="winh"><span class="count">3</span></div>
    <div id="winh"><span class="count">6</span></div>
    <div id="winh"><span class="count">8</span></div>
    <div style="clear:both"></div>

    <button id="startCount" onclick="counting()">Start Count</button>
    <button id="stopCount" onclick="stop()">Stop Count</button>

推荐阅读