这看起来很简单,但我觉得我错过了一行可以改变一切的代码。以下是自定义的第二倒数计时器。每次用户点击START按钮时,他们会在额外的--
减少堆叠到他们给定的seconds
变量,从而使倒计时不是一秒递增,而是两次或三次(但是他们多次点击START按钮。)我只希望在提交时发生一次。有人有任何想法吗?
function startItUp(){
var secondsInput = document.getElementById('seconds').value;
seconds = parseInt(secondsInput);
var countdownTimer = setInterval('secondPassed()', 1000);
}
var numIntiate = 1;
function secondPassed() {
var minutes = Math.round((seconds - 30)/60);
var remainingSeconds = seconds % 60;
if (remainingSeconds < 10) {
remainingSeconds = '0' + remainingSeconds;
}
document.getElementById('countdown').innerHTML = minutes + ':' + remainingSeconds;
if (seconds == 0) {
clearInterval(secondPassed);
document.getElementById('alert').innerHTML = 'Buzz Buzz';
seconds = 0;
} else {
seconds--;
}
}
&#13;
body {
text-align: center;
}
#input-container {
padding: 25px 25px;
display: inline-block;
background-color: pink;
}
input {
text-align: center;
display: inline;
}
p {
display: inline-block;
padding-right: 10px;
font-weight: bold;
font-size: 20px;
}
#start-button {
margin-top: 20px;
}
&#13;
<html>
<head>
<title>Timer</title>
<link rel = "stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h1>Timer</h1>
<div class = "fluid-row" id = "input-container">
<div class = "col-sm-12">
<h1 id = "countdown"></h1>
<h1 id = "alert"></h1>
</div>
<!-- <div class = "col-sm-4">
<p>H</p>
<input type = "number" id = "hours" placeholder = "hours">
</div>
<div class = "col-sm-4">
<p>M</p>
<input type = "number" id = "minutes" placeholder = "minutes">
</div>
-->
<div class = "col-sm-12">
<p>S</p>
<input type = "number" id = "seconds" placeholder = "seconds">
</div>
<button class="btn btn-success" id = "start-button" onclick = "startItUp()">START</button>
</div>
<script src = "js/main.js"></script>
</body>
</html>
&#13;
答案 0 :(得分:0)
//Define your variable at start
var seconds,
countdownTimer,
//Add a variable to know that a new click will not be valid
counting = false;
function startItUp() {
var _count = function(){
var secondsInput=document.getElementById('seconds').value;
//If you have no value this will be 0
seconds=parseInt(secondsInput) || 0;
//The function does not pass as a string
countdownTimer=setInterval(secondPassed, 1000);
}
if(!counting){
counting = true;
_count();
}
/*
//If you want to restart the count, remove the previous code and put this
clearInterval(countdownTimer);
_count();
*/
}
var numIntiate=1;
function secondPassed() {
var minutes=Math.abs(Math.round((seconds - 30)/60));
var remainingSeconds=seconds % 60;
//If it is less than ten you will create an error if you have a zero as string
//You should put lineal if/else statement
document.getElementById('countdown').innerHTML=minutes+':'+(remainingSeconds<10?'0'+ remainingSeconds: remainingSeconds);
if (seconds==0) {
//Stop the interval using its var
clearInterval(countdownTimer);
document.getElementById('alert').innerHTML='Buzz Buzz';
seconds=0;
counting = false;
}
else {
seconds--;
}
}
body {
text-align: center;
}
#input-container {
padding: 25px 25px;
display: inline-block;
background-color: pink;
}
input {
text-align: center;
display: inline;
}
p {
display: inline-block;
padding-right: 10px;
font-weight: bold;
font-size: 20px;
}
#start-button {
margin-top: 20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<h1>Timer</h1>
<div class="fluid-row" id="input-container">
<div class="col-sm-12">
<h1 id="countdown"></h1>
<h1 id="alert"></h1>
</div>
<div class="col-sm-12">
<p>S</p>
<input type="number" id="seconds" placeholder="seconds">
</div>
<button class="btn btn-success" id="start-button" onclick="startItUp()">START</button>
</div>
答案 1 :(得分:0)
我为您的需求制作了一个有效的基本结构,并保持简单。这应该对您有帮助,但您必须调整它以将其包含在您的项目中
var interval,
elapsed,
duration;
// This function should be called each time the user presses start:
var startCountDown = function (seconds) {
// set the duration in ms:
duration = seconds * 1000;
// reset the elapsed time to 0 ms:
elapsed = 0;
// start the count down:
interval = window.setInterval(countDown, 1000);
};
// Updates the counter and stops it when finished:
var countDown = function () {
// increase elapsed # of ms:
elapsed += 1000;
// this is the # of seconds left:
console.log((duration - elapsed) / 1000);
// Check if we are done, if so, stop the countdown:
if (elapsed === duration) window.clearInterval(interval);
};
// The onclick callback function should be a function
// that converts the user input to # of seconds and calls 'startCountDown' with that value:
document.getElementById("start-button").addEventListener("click", function () {
startCountDown(parseInt(document.getElementById("seconds").value));
});
如果删除注册事件处理程序的最后一部分,并说:
startCountDown(10);
你有一个有效的例子。