Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/77.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么我的最新代码会覆盖我的其余代码_Javascript_Html_Timer - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 为什么我的最新代码会覆盖我的其余代码

Javascript 为什么我的最新代码会覆盖我的其余代码

javascript html timer

Javascript 为什么我的最新代码会覆盖我的其余代码,javascript,html,timer,Javascript,Html,Timer,我有一页有计时器。我的最新定时器的代码只能正常工作。但是其余的计时器没有，比如10分钟计时器。它只显示计时器的设定时间。我的最新代码是否覆盖了其他代码？两个计时器之间是否混合了变量？我正计划在页面上添加几个计时器，但发生这种情况时我被卡住了 链接到代码： 问题就在这里？ 进入 你认为你需要几分钟的时间？ 10分钟 20分钟 函数myFunction1（）{ document.getElementById（“1Div”）.style.display=“无”； document.getElemen

我有一页有计时器。我的最新定时器的代码只能正常工作。但是其余的计时器没有，比如10分钟计时器。它只显示计时器的设定时间。我的最新代码是否覆盖了其他代码？两个计时器之间是否混合了变量？我正计划在页面上添加几个计时器，但发生这种情况时我被卡住了

链接到代码：


问题就在这里？
进入
你认为你需要几分钟的时间？
10分钟
20分钟
函数myFunction1（）{
document.getElementById（“1Div”）.style.display=“无”；
document.getElementById（“2Div”）.style.display=“block”；
}
函数myFunction2（）{
document.getElementById（“2Div”）.style.display=“无”；
document.getElementById（“timer10”）.style.display=“block”；
}
函数myFunction3（）{
document.getElementById（“2Div”）.style.display=“无”；
document.getElementById（“timer20”）.style.display=“block”；
}
功能启动计时器10（持续时间10，显示10）{
var timer10=持续时间10，分钟10，秒10；
setInterval（函数（）{
分钟10=parseInt（时间10/60，10）；
seconds10=parseInt（时间10%60,10）；
分钟10=分钟10<10？“0”+分钟10：分钟10；
seconds10=seconds10<10？“0”+seconds10:seconds10；
display10.textContent=minutes10+“：”+秒10；
如果（--timer10<0）{
时间10=持续时间10；
}
}, 1000);
}
window.onload=函数（）{
var十分钟=60*10，
display10=document.querySelector（“#time10”）；
startTimer10（十分钟，显示10）；
};
10:00
功能启动计时器20（持续时间20，显示20）{
var timer20=持续时间20，分钟20，秒20；
setInterval（函数（）{
分钟20=parseInt（时间20/60,10）；
seconds20=parseInt（timer20%60,10）；
分钟数20=分钟数20<10？“0”+分钟数20：分钟数20；
seconds20=seconds20<10？“0”+seconds20:seconds20；
display20.textContent=minutes20+“：”+秒20；
如果（--timer20<0）{
时间20=持续时间20；
}
}, 1000);
}
window.onload=函数（）{
变量二十分钟=60*20，
display20=document.querySelector（“#time20”）；
startTimer20（二十分钟，显示20）；
};
20:00
您只需将所有
函数
组合成一个
startTimer（）
函数即可

我不知道你为什么一次又一次地重复你的
代码，以达到同样的结果。代码越少越好，但结果却一样

这就是我所做的，简化了你的代码


  • 我已将两个
    计时器
    组合成一个功能
  • 在显示持续时间时，无需再次使用显示
    none
    和
    block
  • 单击
    计时器
    时，只需将
    分钟数
    传递给计时器功能，量程将开始显示剩余时间
  • 您不需要两个span来分别显示计时器，您可以在一个
    span
  • 您多次使用
    script
    标记，这是不必要的
  • 这两个定时器都能以更少的代码和相同的结果完美地工作
    • 您可以有多个
    计时器
    现在只需将
    分钟数
    传递给
    startTimer（）
    函数，计时器将从给定时间开始

    现场演示

    //启动计时器
功能启动计时器（持续时间、显示）{
var定时器=持续时间，
分，秒；
setInterval（函数（）{
分钟=parseInt（计时器/60,10）；
秒=parseInt（计时器%60,10）；
分钟=分钟<10？“0”+分钟：分钟；
秒=秒<10？“0”+秒：秒；
display.textContent=分钟+“：”+秒；
如果（--定时器<0）{
定时器=持续时间；
}
}, 1000);
}
//1
函数myFunction1（）{
document.getElementById（“1Div”）.style.display=“无”；
document.getElementById（“2Div”）.style.display=“block”；
}
//10分钟
函数myFunction2（）{
document.getElementById（“2Div”）.style.display=“无”；
var十分钟=60*10，
display10=document.querySelector（“#timerDuration”）；
startTimer（十分钟，显示10）；
}
//20分钟
函数myFunction3（）{
document.getElementById（“2Div”）.style.display=“无”；
变量二十分钟=60*20，
display20=document.querySelector（“#timerDuration”）；
startTimer（二十分钟，显示器20）；
}
    
问题就在这里？
进入
你认为你需要几分钟的时间？
10分钟
20分钟
    FYI您不能在一个文档中有多个
    body
    标记，请参见此处的用法：如果我已经解决了您的问题，您介意吗？谢谢你们两位的建议，这非常有帮助@hp3393很乐意帮忙。快乐编码：）有没有办法让div在计时器结束时阻止它？@hp3393有！您需要使用函数检查时间是否已结束，然后使用停止间隔。类似于
    if timer==0{clearInterval（）}
    <body>
    
    <div id="1Div">
    
    <h4>Question goes here?</h4>
    
      <input type="text"id="name1"/>
    
      <button onclick="myFunction1()" id="button0" class="button3">Enter</button>
    
    
    </div>
    
    
    <div id="2Div" style="display:none;">
            <h4 id=typeE>How much time do you think you need in minutes?</h4>
            <button onclick="myFunction2()" id="button1" class="button3">10 minutes</button>
            <button onclick="myFunction3()" id="button2" class="button3">20 minutes</button>
            
    </div>
    
    <script>
      function myFunction1(){
        document.getElementById("1Div").style.display="none";
        document.getElementById("2Div").style.display="block";
    }
    </script>
    
    <script>
      function myFunction2(){
        document.getElementById("2Div").style.display="none";
        document.getElementById("timer10").style.display="block";
      }
    </script>
    
    <script>
      function myFunction3(){
        document.getElementById("2Div").style.display="none";
        document.getElementById("timer20").style.display="block";
      }
    </script>
    
    
    <div id="timer10" style="display:none">
    
    <script>
        function startTimer10(duration10, display10) {
        var timer10 = duration10, minutes10, seconds10;
        setInterval(function () {
            minutes10 = parseInt(timer10 / 60, 10);
            seconds10 = parseInt(timer10 % 60, 10);
    
            minutes10 = minutes10 < 10 ? "0" + minutes10 : minutes10;
            seconds10 = seconds10 < 10 ? "0" + seconds10 : seconds10;
    
            display10.textContent = minutes10 + ":" + seconds10;
    
            if (--timer10 < 0) {
                timer10 = duration10;
            }
        }, 1000);
    }
    
    window.onload = function () {
        var tenMinutes = 60 * 10,
            display10 = document.querySelector('#time10');
        startTimer10(tenMinutes, display10);
    };
    </script>
     
     <body>
        
        <center><div><span id="time10">10:00</span></div></center>
        
    </body>
    
    </div>
    
    
    <div id="timer20" style="display:none">
        <script>
        function startTimer20(duration20, display20) {
        var timer20 = duration20, minutes20, seconds20;
        setInterval(function () {
            minutes20 = parseInt(timer20 / 60, 10);
            seconds20 = parseInt(timer20 % 60, 10);
    
            minutes20 = minutes20 < 10 ? "0" + minutes20 : minutes20;
            seconds20 = seconds20 < 10 ? "0" + seconds20 : seconds20;
    
            display20.textContent = minutes20 + ":" + seconds20;
    
            if (--timer20 < 0) {
                timer20 = duration20;
            }
        }, 1000);
    }
    
    window.onload = function () {
        var twentyMinutes = 60 * 20,
            display20 = document.querySelector('#time20');
        startTimer20(twentyMinutes, display20);
    };
    </script>
     
     <body>
        
        <center><div><span id="time20">20:00</span></div></center>
        
    </body>
    </div>
    
    </body>