为什么我的网页不使用 JavaScript 更新计时器？

我是JavaScript的新手，正在尝试为每分钟总单词计算器制作一个计时器。我们还没有实现实际的计算器部分。计时器用于显示剩余时间（以秒和分钟为单位）。为什么时间根本不更新？我们一直在努力更新元素，但运气不佳。如有任何帮助，我们将不胜感激。

我已经对进行了建议的修改

seconds_left = document.getElementId("time").value;
if(seconds_left==0){clearInterval();}
seconds_left--;

但是输出没有改变。为什么计时器不更改值或更新？

<script type="text/javascript">
function startTimer(event)
{
    event.preventDefault();
    //inputs
    var seconds_left = document.getElementById("time").value;
    var text = document.getElementById("textfield");
    //variables
    var minutes;
    //get output
    var clock = document.getElementById("timer");
    setInterval(function()
    {
        //seconds mods
        minutes = parseInt(seconds_left / 60);
        seconds = seconds_left % 60;
        if(seconds_left == 0)
            clearInterval();
        //output
        document.getElementById("timer").innerHTML = minutes + ":" + seconds;
        seconds_left--;
    }, 1000);
}
</script>
</head>
<body>
Select Time:
<select name="time">
    <option value="30">30 Seconds</option>
    <option value="60">1 Minute</option>
    <option value="180">3 Minutes</option>
    <option value="300">5 Minutes</option>
    <option value="600">10 Minutes"</option>
</select>
<output name="timer">0:00</output>
</br>
<textarea name="textfield" width=600 height=400>Your Text Goes Here </textarea>
<button type="button" onclick="startTimer(event);">Start</button>
</body>
</html>

您在脚本中已经多次执行此操作。

var seconds_left = document.getElementById("time");

这返回一个DOM对象，而不是它的值。然后你试着用它做数学运算，但你做不到，因为它不是一个数字。

您想要的是获得对象的值，而不是对象本身。

var seconds_left = document.getElementById("time").value;

正如我在评论中解释的那样，通过添加".value"部分并从按钮标记中删除"event"来修复所有地方的问题，它应该可以正常工作。

另外，只是注意到，您从未真正更改过值。您需要在间隔函数中添加seconds_left--;来倒计时。

代码中有两个问题导致它无法工作：

您需要为要使用document.getElementById获取的元素添加一个id属性。

例如：select标签应该如下所示：<select id="time" name="time">
clearInterval函数将要取消的间隔计时器的id作为参数。您需要获取从setInterval调用返回的id。

例如：使用var t = setInterval(...)启动间隔计时器，然后使用clearInterval(t)停止。

所以你的代码应该是这样才能工作的：

<script type="text/javascript">
function startTimer(event)
{
    event.preventDefault();
    //inputs
    var seconds_left = document.getElementById("time").value;
    var text = document.getElementById("textfield");
    //variables
    var minutes, seconds;
    //get output
    var clock = document.getElementById("timer");
    var t = setInterval(function()
    {
        //seconds mods
        minutes = parseInt(seconds_left / 60);
        seconds = seconds_left % 60;
        if(seconds_left == 0)
            clearInterval(t);
        //output
        document.getElementById("timer").innerHTML = minutes + ":" + seconds;
        seconds_left--;
    }, 1000);
}
</script>
</head>
<body>
Select Time:
<select id="time" name="time">
    <option value="30">30 Seconds</option>
    <option value="60">1 Minute</option>
    <option value="180">3 Minutes</option>
    <option value="300">5 Minutes</option>
    <option value="600">10 Minutes"</option>
</select>
<output id="timer" name="timer">0:00</output>
</br>
<textarea id="textfield" name="textfield" width=600 height=400>Your Text Goes Here </textarea>
<button type="button" onclick="startTimer(event);">Start</button>
</body>
</html>

相关内容

最新更新

热门标签：