Question

尝试显示内部HTML的值，从10到1，但只能显示值1.

值应逐一显示.. 例如，如果显示10，则应隐藏，然后显示9，它就像一个计时器。

如何解决这个问题，这就是我的尝试。

HTML：

<div id='test'></div>

JS：

var a = 10;
var b=1;
var tar = document.getElementById('test');

for(var a=10;a>=b;a--){
    tar.innerHTML = a;    
    if(a==b){
        tar.innerHTML = a;
        //tar.style.display='none';
        window.location.href = "http://www.google.co.in";
    }
}

fiddle demo

Answer 1

你遇到的问题是JavaScript可以非常快速地执行，所以它比你看到的速度快10到1。你需要用计时器慢下来......

在此示例中，每个数字之间有一秒钟的延迟。

var a = 10;
var b = 1;
var tar = document.getElementById('test');
var timer;

function countDown() {
    tar.innerHTML = a;    
    if(a === b) {
        tar.innerHTML = a;
        //tar.style.display = 'none';
        window.location.href = "http://www.google.co.in";
    } else {
        a--;
        timer = window.setTimeout(countDown, 1000);
    }
}

countDown();

Answer 2

<html>
<head>
    <script>
    var myVar = setInterval(function(){myTimer()}, 1000);
    var i=10;
function myTimer() {
    i--;
    if(i==1)
        clearInterval(myVar);
    document.getElementById("test").innerHTML = i;

}
</script>
</head>
<body>
 <div id="test"></div>
</body>
</html>

Answer 3

您可以这样做：

var counter = 10; // number of iterations
var tar = document.getElementById('test');    
var interval = setInterval(function(){
    if (counter === 0) clearInterval(interval); // skip if reached end
    tar.innerHTML = counter; // update html
    counter--; // update counter value
}, 1000) // 1000 = 1 second

See Fiddle

Answer 4

http://jsfiddle.net/0sbu5f8c/13/

var a = 10;
var b = 1;
var tar = document.getElementById('test');
var timer = setInterval(function () {
    tar.innerHTML = a;
    if(a === b) {
        window.clearInterval(timer);
        //window.location.href = "http://www.google.co.in";
    }
    a -= 1;
}, 500);

如何逐个javascript显示innerHTML值

4 个答案:

See Fiddle