Question

我面临一个微不足道的问题，在网络上找到执行倒计时的代码：

取消注释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>

Answer 1

因为你正在设置分钟和秒，然后再通过获取元素id设置它是你使用的混乱代码。还可以尝试身体末端的javascript。总是让渲染完成，然后运行脚本。

Answer 2

在 HTML后移动代码，getElementById将无法找到它们，因为它们尚未声明。作为替代方案，将它们移到onload函数中：

Answer 3

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

中

Answer 4

这对我有用：

<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>

使用getElementById进行javascript倒计时

4 个答案: