如何创建分钟倒计时使用javascript

Question

我有一个程序，我用HTML写就像一个网站，但离线运行，所以我想在用户登录后添加35分钟倒计时，然后当35分钟被用户用尽将被注销

但我不能得到代码的权利，因为我是新来的JavaScript，但我能得到它计数60秒，然后它会提醒用户“注销”，但我想要它到注销用户不提醒用户注销

这是HTML代码

<div id="counter">1:00</div> 

这是javascript代码

function countdown() { 
     var seconds = 60; 
     function tick() { 
      var counter = document.getElementById("counter"); 
      seconds--; 
      counter.innerHTML = "0:" + (seconds < 10 ? "0" : "") + String(seconds); 
      if(seconds > 0) { 
       setTimeout(tick, 1000); 
      } else { 
       alert("Game over"); 
      } 
     } 
     tick(); 
    } 
    countdown(); 

Answer 1

<script> 
// Set the date we're counting down to 
var countDownDate = new Date("July 12, 2017 09:00:00").getTime(); 

// 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="counter" 
    document.getElementById("counter").innerHTML = days + "d " + hours + "h " 
    + minutes + "m " + seconds + "s "; 

    // If the count down is over, write some text 
    if (distance < 0) { 
     clearInterval(x); 
     document.getElementById("counter").innerHTML = "EXPIRED"; 
    } 
}, 1000); // time changes in every 1 second 
</script> 
<p2>to go</p2> 

尝试了这一点，更改日期和时间根据您的需要

Answer 2

function countdown() { 
 
    var timeoutMinutes = 35; 
 
    var startTime = new Date(); 
 
    var elapsedSecond = 0; 
 

 
    function tick() { 
 
    var counter = document.getElementById("counter"); 
 
    var currentTime = new Date(); 
 
    elapsedSecond = (currentTime - startTime)/1000; 
 
    counter.innerHTML = formatPlaces("0") + ":" 
 
    \t \t + formatPlaces(elapsedSecond/60) + ":" 
 
     + formatPlaces(elapsedSecond % 60); 
 
    if (elapsedSecond <= timeoutMinutes * 60) { 
 
     setTimeout(tick, 1000); 
 
    } else { 
 
     alert("Game over"); 
 
    } 
 
    } 
 
    tick(); 
 
} 
 

 
function formatPlaces(value) { 
 
    var intValue = parseInt(value); 
 
    return intValue.toString().length == 1 ? "0" + intValue.toString() : intValue.toString(); 
 
} 
 
countdown();

<div id="counter">00:00</div>

Answer 3

处理会议在前台​​不解决这个问题的最好方法，但是因为你问...

你的方法似乎是正确的，我的意思是你只需要用2100（35分钟）秒来改变60秒。要注销，您需要一个功能或一个页面才能注销。 这种方法的问题是，如果他们刷新页面的计数器也刷新，也可以直接改变的JavaScript，如果他们想，重写的功能和许多其他的事情......

幸运的是，现在的Javascript支持称为会话存储和本地存储，因此您可以将计时器存储在其中一个变量中，即使刷新页面也不会丢失其最新值。只要浏览器处于打开状态，局部变量会持续到永远，或者直到您取消设置，会话变量才会持续。

您可以设定存储的值是这样的：

var latestTime = localStorage.getItem('secondsPassed'); 
localStorage.setItem('secondsPassed', lastTime+1); 

这将至少他们周围得到刷新页面和关闭，重新打开浏览器刷新计时器！

如果您想了解如何正确处理会话并将其读入PHP，因为后端是处理这类事情的最佳方式。