0

我遇到了一个在网络上找到的执行倒计时的代码的小问题：

取消注释 var 分钟和秒它可以工作，但是如果我尝试通过 getElementById 获取分钟和秒变量，则代码不再工作.. 为什么？有什么建议可以纠正这种行为吗？

<html>
<head>

<script>
  var interval;
//var minutes = 0;
//var seconds = 2;



window.onload = function() {
   var minutes = document.getElementById("idtextmin").value;
   var seconds = document.getElementById("idtextsec").value;
   countdown('countdown');
   }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
</script>

</head>
<body>
<form>
Min<input type="text" id="idtextmin" name="textmin" value="2" />
Sec<input type="text" id="idtextsec" name="textsec" value="9" />
</form>

<div id='countdown'></div>
</body>
</html>
4

4 回答 4

0

将所有内容都放在 window.onload 函数中

于 2013-11-04T11:49:44.093 回答
0

this works for me:

<html>
    <head>

        <script>
            var interval;
            //var minutes = 0;
            //var seconds = 2;

            window.onload = function() {
                var minutes = document.getElementById("idtextmin").value;
                var seconds = document.getElementById("idtextsec").value;
                countdown('countdown');

                function countdown(element) {
                    interval = setInterval(function() {
                        var el = document.getElementById(element);
                        if(seconds == 0) {
                            if(minutes == 0) {
                                el.innerHTML = "countdown's over!";                    
                                clearInterval(interval);
                                return;
                            } else {
                                minutes--;
                                seconds = 60;
                            }
                        }
                    if(minutes > 0) {
                        var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
                    } else {
                        var minute_text = '';
                    }
                        var second_text = seconds > 1 ? 'seconds' : 'second';
                        el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
                        seconds--;
                    }, 1000);
                }
            }
        </script>

    </head>
    <body>
        <form>
            Min<input type="text" id="idtextmin" name="textmin" value="2" />
            Sec<input type="text" id="idtextsec" name="textsec" value="9" />
        </form>

        <div id='countdown'></div>
    </body>
</html>
于 2013-11-04T14:55:43.307 回答
0

这是因为您正在设置分钟和秒，然后通过获取元素 ID 进行设置，这会混淆您使用的代码。还可以尝试正文末尾的 javascript。总是让渲染完成然后运行脚本。

于 2013-11-04T11:44:50.810 回答
0

在您的 HTML之后移动您的代码，getElementById因为它们尚未声明，所以找不到它们。作为替代将它们移动到您的onload函数中：

<script>
    // Declare them here, assign their initial value
    // in the onload event when HTML elements will be available
    var minutes;
    var seconds;

    window.onload = function() {
        minutes = document.getElementById("idtextmin").value;
        seconds = document.getElementById("idtextsec").value;
        countdown('countdown');
    }

    function countdown(element) {
        interval = setInterval(function() {
            var el = document.getElementById(element);
            if(seconds == 0) {
                if(minutes == 0) {
                    el.innerHTML = "countdown's over!";                    
                    clearInterval(interval);
                    return;
                } else {
                    minutes--;
                    seconds = 60;
                }
            }
            if(minutes > 0) {
                var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
            } else {
                var minute_text = '';
            }
            var second_text = seconds > 1 ? 'seconds' : 'second';
            el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + ' remaining';
            seconds--;
        }, 1000);
    }
</script>

</head>
<body>
<form>
Min<input type="text" id="idtextmin" name="textmin" value="2" />
Sec<input type="text" id="idtextsec" name="textsec" value="9" />
</form>

<div id='countdown'></div>
</body>
</html>
于 2013-11-04T11:45:27.453 回答