Question

我正在尝试让计时器开始倒计时。我认为我的下一步是让倒计时功能真正起作用。对此最好的方法是什么？

以下JavaScript和HTML代码：

＆＃13;

// Set the default timer as 25:00
var timer = document.getElementById("mytime");
var counter = setInterval(function(){
  countdown()}, 1000);
//user clicks the 'start' button and timer starts counting down

function countdown(minutes, seconds){ 
  timer.value = "17:30:00"; //default value
  document.getElementById("btn").innterHTML = counter;
  counter--;
};


var click = document.getElementById("btn");
btn.addEventListener("click", countdown); //"click" as DOM Object?
btn.addEventListener("click", stopcounting);

＆＃13;

<head> 
  <title>Pomodoro Timer</title>
</head>

<body>
  <h1>POMODORO TIMER</h1>
    <div id="main">
      <input type="time" id="mytime">
        <button id="btn"> start </button>
      </div>
</body>

＆＃13;

Answer 1

这是我自己的时钟版本，您可以在其中添加事件发生的特定时间来启动计时器。请参见下面的代码。

// Set the date we're counting down to
var start_at = new Date('2020-06-29 12:00:00');

// Update the count down every 1 second
var x = setInterval(function() {

// Get todays date and time
var now = new Date();

// Find the distance between now an the count down date
var distance = now - start_at;


// Time calculations for days, hours, minutes and seconds
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);

// Output the result in an element with id="demo"
document.getElementById("demo").value = hours + "h "
+ minutes + "m " + seconds + "s ";

}, 1000);

Answer 2

这可能是你想要的，我没有用日期时间格式完成它，但你可以自己转换它。

<head>
  <title>Pomodoro Timer</title>
</head>
<body>
  <h1>POMODORO TIMER</h1>
    <div id="main">
      <input id="mytime" value=1000>
        <button id="btn"> start </button>        
      </div>
</body>
<script>
  var input = document.getElementById("mytime");
  var button = document.getElementById("btn");
  var started = false;
  var timer;
  var startTimer = function (count) {
    return setInterval(function () {
      input.setAttribute("value", --count);
    }, 1000);
  }
  button.addEventListener("click", function () {
    if (!started) {
      var count = parseInt(input.getAttribute("value"));
      timer = startTimer(count);
      started = true;
      button.innerHTML = "stop";
    } else {
      clearInterval(timer);
      started = false;
      button.innerHTML = "start";
    }
  });
</script>

JSFiddler：https://jsfiddle.net/m7pev0vm/

Answer 3

您的代码有点混乱。所以，让我帮你解决一下。

首先，点击功能需要触发倒计时开始。

计时器功能中的计数器需要在几秒钟内完成。因此，你可以在表面上继续减少价值，它将以小时，分钟和数字为单位。秒。

此外，您需要有一个目标时间。因此，如果我说计数器直到00:00:00，那么以下内容可以起作用，例如：

// Set the default timer as 5:30 PM
var timer = document.getElementById("mytime");
var counter = (17*60*60) + (30*60);
timer.value = "17:30:00"; //default value

function countdown(minutes, seconds){ 
  --counter;
  var hrs = Math.floor(counter / 3600),
      min = Math.floor((counter % 3600) / 60),
      sec = Math.floor((counter % 3600) % 60);
  
  timer.value = hrs + ":" + min + ":" + sec;
};

function onClick() {
    var counter = setInterval(function(){
        countdown();
    }, 1000);
    //user clicks the 'start' button and timer starts counting down
}

var click = document.getElementById("btn");
btn.addEventListener("click", onClick); //"click" as DOM Object?
btn.addEventListener("click", stopcounting);

<head> 
  <title>Pomodoro Timer</title>
</head>

<body>
  <h1>POMODORO TIMER</h1>
    <div id="main">
      <input type="time" id="mytime">
        <button id="btn"> start </button>
      </div>
</body>

Answer 4

我知道这件事来得很晚，但我知道有一天它会帮助别人。

<!DOCTYPE HTML>
<html>
<head>


</head>
<body>

<form>
   
  <input type="text" name="demo" id="demo" size="20"  readonly="true" style="text-align:center;"/>
  <br>
 
</form> 


<script>
// Set the date we're counting down to
var countDownDate = new Date().getTime() + ((1)*60*60*1000);

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
	
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").value = hours + "h "
    + minutes + "m " + seconds + "s ";
    
	
	// If the count down remains 15 minutes, write some text
	 
if (minutes == 59 && seconds == 1) {
        alert("Hello! 1 minute gone");
    }
     
    
    // If the count down is over, write some text
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo");
        demo.value= "EXPIRED";
    }
}, 1000);
</script>

</body>
</html>

如何使用javascript让计时器开始倒计时？

4 个答案: