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

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

链接到代码：http://jsfiddle.net/vtoLx02j/2/

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

您可以简单地将所有的functions组合成一个startTimer()函数。

我不知道为什么你是repeating你的code一次又一次地实现相同的结果。更少的代码但结果相同是很好的。

以下是我所做的并简化了您的代码。

我已将两个timers合并为一个function
您不需要在显示持续时间内再次使用显示none和block
当您点击timer时，只需将minutes传递给计时器功能，跨度将开始显示剩余时间
您不需要两个跨度来单独显示计时器，您可以在一个span中完成所有这些
你使用script标签的次数太多了，这是不必要的
两个定时器都能以更少的代码和相同的结果完美地工作

您现在可以有多个timers，您只需要将minutes传递给startTimer()函数，计时器就会从给定时间开始启动。

实时演示

//Start timer
function startTimer(duration, display) {
var timer = duration,
minutes, seconds;
setInterval(function() {
minutes = parseInt(timer / 60, 10);
seconds = parseInt(timer % 60, 10);
minutes = minutes < 10 ? "0" + minutes : minutes;
seconds = seconds < 10 ? "0" + seconds : seconds;
display.textContent = minutes + ":" + seconds;
if (--timer < 0) {
timer = duration;
}
}, 1000);
}
//1
function myFunction1() {
document.getElementById("1Div").style.display = "none";
document.getElementById("2Div").style.display = "block";
}
//10 Minutes
function myFunction2() {
document.getElementById("2Div").style.display = "none";
var tenMinutes = 60 * 10,
display10 = document.querySelector('#timerDuration');
startTimer(tenMinutes, display10);
}
//20 minutes
function myFunction3() {
document.getElementById("2Div").style.display = "none";
var twentyMinutes = 60 * 20,
display20 = document.querySelector('#timerDuration');
startTimer(twentyMinutes, display20);
}

<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>
<center>
<div><span id="timerDuration"></span></div>
</center>
</body>

相关内容

最新更新

热门标签：