Question

所以我有这个简单的HTML：

<span id="badge">0</span>

我希望数字0每x毫秒增加1。我如何使用Javascript（有或没有jQuery）？

非常感谢 - 我是新手：）

Answer 1

你应该这样做：

<script>
   var $badge = $('#badge'); // cache 
   setInterval(function () {
        var value = parseInt($badge.html());
        value++;
        $badge.html(value);
   }, 1000);

</script>

假设1000毫秒。

Answer 2

这样的东西？

var millisecs = 10;
setInterval(function() {
  var $badge = $('#badge');
  $badge.text(parseInt($badge.text())++);
}, millisecs);

http://jsfiddle.net/iambriansreed/MPP8n/3/

Answer 3

function increment() {
    document.getElementById("badge").value = Number(document.getElementById("badge").value) + 1;
    setTimeout("increment()",3000);
}
increment()

Answer 4

我在这里看到的每个答案都有同样的缺点：

性能问题，因为每ms周期选择一个DOM元素。特别是在使用重型库作为jQuery时。
setInterval()可能是为该功能设计的工具，但不可靠。它可以与实时分开很多，特别是在使用小间隔时。如果你想要每秒执行x次，你可以谷歌搜索一些时序库。

我会编码：

var textNode = document.getElementById(badge).firstChild;
var start = Date.now();
window.setInterval(function update() {
    textNode.data = Math.round((new Date()-start)/ms);
}, ms);

如果您不想从0开始，添加偏移量（在循环开始之前确定）将是微不足道的，例如。

var start = Date.now() - (textNode.data * ms || 0); // NaN catching, implicit number cast

Answer 5

选中此http://www.w3schools.com/js/js_timing.asp

Answer 6

您可以使用setInterval。

var $badge = $('#badge');
setInterval(function () {
     $badge.html(parseInt($badge.html()) + 1);
}, 1);//Specify the milliseconds here, right it will update the value every 1 millisecond

工作演示 - http://jsfiddle.net/8FMZh/

Answer 7

A little more about timers：

// setting a variable for your timer will allow you the ability to "turn it on and off"
var tmrChangeI;
// setTimeout is a function to initiate a function once after given amount of milisecs
// whereas setInterval will continue a function until cancled every so many milisecs

// the following wil "turn on" your timer
tmrChangeI = setInterval(function() {
    var $badge = $('#badge');
    $badge.html($badge.html() + 1);
}, 500); // 500 will = every half of a second

// to "turn off" timer
clearInterval(tmrChangeI);

// or set a bool to test and use timeout to repeat till bool is false
var tmrBool = true;

// establish function to execute
function tmrFunc() {
    var $badge = $('#badge');
    $badge.html($badge.html() + 1);
    if (tmrBool) tmrChangeI = setTimeout(function() { tmrFunc(); }, 500); // 500 will = every half of a second
};

// execute function, begin timer
tmrChangeI = setTimeout(function() { tmrFunc(); }, 500);

// clear via bool allowing one more execution
tmrBool = false;

// clear by force possibly stoping next execution,
// tho in this manner it may be too late if timer is very short 
// and maybe overriden by bool still being true, this is not safest 
// but is example of how to use setTimeout
clearTimeout(tmrChangeI);

Answer 8

您可以创建一个Jquery插件，以便您可以随时重复使用。

recover

在您的主要javascript文件中：

$.fn.increment= function(options) {

 var $this = $(this);

 var coef = options.coef;

 var speed = options.speed;

 var value = 0;

 setInterval(function(){ 

    value = value + coef ;

    $this.html(value);

 }, speed);

};

工作演示：http://jsfiddle.net/8FMZh/102/

每隔x毫秒增加一个元素中数字的值

8 个答案: