设置自定义倒数计时器而不重新启动 - 在onClick上进行第二次倒计时

时间:2017-05-19 23:49:44

标签: javascript countdown countdowntimer

这看起来很简单,但我觉得我错过了一行可以改变一切的代码。以下是自定义的第二倒数计时器。每次用户点击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;
&#13;
&#13;

2 个答案:

答案 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);

你有一个有效的例子。