如何使用javascript创建计时器，以便创建一个div元素来显示javascript执行时的时间_Javascript_Html_Css

如何使用javascript创建计时器，以便创建一个div元素来显示javascript执行时的时间

javascript html css

如何使用javascript创建计时器，以便创建一个div元素来显示javascript执行时的时间,javascript,html,css,Javascript,Html,Css,我一直试图使这个计时器网页显示秒减少时，最初的秒输入。我首先运行一个函数，创建一个h2元素，然后打印出输入的初始值。然后，我使用setInterval执行一个函数，该函数将h2元素的值减少1，直到它达到零。一旦它达到0，我就使用clearInterval结束它。由于某些原因，执行时间太长，网页崩溃，屏幕上没有输出任何内容。我不明白执行的时间太长了，请帮我一下。还有其他办法吗？这是密码- <!DOCTYPE html> <html> <head> <

我一直试图使这个计时器网页显示秒减少时，最初的秒输入。我首先运行一个函数，创建一个h2元素，然后打印出输入的初始值。然后，我使用setInterval执行一个函数，该函数将h2元素的值减少1，直到它达到零。一旦它达到0，我就使用clearInterval结束它。由于某些原因，执行时间太长，网页崩溃，屏幕上没有输出任何内容。我不明白执行的时间太长了，请帮我一下。还有其他办法吗？这是密码-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>TIMER</title>
</head>
<body>
    <label>Enter the number of seconds for the timer <input id='initial' type="text">
    </label> <br>

    Press the button to start the timer <br>
    <button id="start_timer">Timer</button> <br><br>

    <script type="text/javascript">
        var timerValue=document.getElementById('initial');
        var buttonEl=document.getElementById("start_timer");

        function reduceTime(){
            countDown.textContent=parseFloat(countDown.textContent)-1;
        }

        function initial(){
            countDown=document.createElement('h2')
            countDown.textContent=timerValue.value;
            while(parseFloat(countDown.textContent)>0){
                timer=window.setInterval(reduceTime,1000);
            }
            if(parseFloat(countDown.textContent)===0){
                window.clearInterval(timer);
            }
        }
        buttonEl.addEventListener('click',initial);
    </script>
</body>
</html>


计时器
输入计时器的秒数


按下按钮启动计时器

计时器


var timerValue=document.getElementById（'initial'）；
var buttonEl=document.getElementById（“启动计时器”）；
函数约简时间（）{
countDown.textContent=parseFloat（countDown.textContent）-1；
}
函数初始值（）{
倒计时=document.createElement（'h2'）
countDown.textContent=timerValue.value；
while（parseFloat（countDown.textContent）>0）{
定时器=窗口设置间隔（还原时间，1000）；
}
if（parseFloat（countDown.textContent）==0）{
窗口清除间隔（计时器）；
}
}
Buttonnel.addEventListener（'click'，首字母）；

问题在于，当您在

循环中添加新的间隔时，条件在1秒内保持不变。此外，您对变量倒计时
也未执行任何操作。这里有一个修正：

var-timerValue=document.getElementById（'initial'）；
var buttonEl=document.getElementById（“启动计时器”）；
var countDown=document.getElementById（“倒计时”）；
无功定时器；
函数约简时间（）{
var time=parseFloat（countDown.textContent）-1；
如果（时间<0）{
清除间隔（计时器）；
返回；
}
倒计时。text内容=时间；
}
函数初始值（）{
countDown.textContent=timerValue.value；
定时器=窗口设置间隔（还原时间，1000）；
}
Buttonnel.addEventListener（'click'，首字母）

输入计时器的秒数


按下按钮启动计时器

计时器



将新的h2
元素附加到DOM中，在reduceTime（）
中移动clearInterval
的测试，并移除的while
循环：

var-timerValue=document.getElementById（'initial'）；
var buttonEl=document.getElementById（“启动计时器”）；
函数约简时间（）{
if（parseFloat（countDown.textContent）==0）{
窗口清除间隔（计时器）；
}否则{
countDown.textContent=parseFloat（countDown.textContent）-1；
}
}
函数初始值（）{
倒计时=document.createElement（'h2'）；
document.body.appendChild（倒计时）
countDown.textContent=timerValue.value；
定时器=窗口设置间隔（还原时间，1000）；
}
Buttonnel.addEventListener（'click'，首字母）
输入计时器的秒数

按下按钮启动计时器

Timer
我理解这个方法，但我特别想使用document.createElement（“h2”）单击按钮创建h2元素。非常感谢，这很有效。是否需要使用appendChild（）附加子项？为什么不能使用它呢？新元素不仅必须使用createElement
创建，还必须使用appendChild
或insertBefore
方法插入（或追加）到dom中。非常感谢@SLePort