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

如何使用javascript创建分钟倒计时,javascript,html,Javascript,Html,我有一个程序,我写的html就像一个网站,但离线运行,所以我想添加35分钟倒计时后,用户登录,然后当35分钟是兴奋的用户将注销 但是我不能正确地获取代码,因为我是javascript新手,但我能够让它计数60秒,然后它会用“注销”提醒用户,但我希望它注销用户,而不是提醒用户注销 这是html代码 <div id="counter">1:00</div> 1:00 这是javascript代码 function countdown() { va

我有一个程序,我写的html就像一个网站,但离线运行,所以我想添加35分钟倒计时后,用户登录,然后当35分钟是兴奋的用户将注销

但是我不能正确地获取代码,因为我是javascript新手,但我能够让它计数60秒,然后它会用“注销”提醒用户,但我希望它注销用户,而不是提醒用户注销

这是html代码

 <div id="counter">1:00</div>
1:00
这是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();
函数倒计时(){
var秒=60;
函数tick(){
var counter=document.getElementById(“计数器”);
秒--;
counter.innerHTML=“0:”+(秒<10?:“)+字符串(秒);
如果(秒>0){
设置超时(勾号,1000);
}否则{
警报(“游戏结束”);
}
}
勾选();
}
倒计时();

//确定我们倒计时的日期
var countDownDate=新日期(“2017年7月12日09:00:00”).getTime();
//每1秒更新一次倒计时
var x=setInterval(函数(){
//获取今天的日期和时间
var now=new Date().getTime();
//找出现在和倒计时日期之间的距离
var距离=倒计时日期-现在;
//天、小时、分钟和秒的时间计算
变量天数=数学楼层(距离/(1000*60*60*24));
可变小时数=数学楼层((距离%(1000*60*60*24))/(1000*60*60));
var分钟=数学楼层((距离%(1000*60*60))/(1000*60));
var秒=数学楼层((距离%(1000*60))/1000);
//在id=“counter”的元素中输出结果
document.getElementById(“计数器”).innerHTML=days+d+hours+h
+分钟+米+秒+秒;
//如果倒计时结束,写一些文字
如果(距离<0){
净间隔(x);
document.getElementById(“计数器”).innerHTML=“过期”;
}
}, 1000);   // 时间每1秒变化一次
外带
尝试一下,根据需要更改日期和时间

函数倒计时(){
var timeoutMinutes=35;
var startTime=新日期();
var elapsedSecond=0;
函数tick(){
var counter=document.getElementById(“计数器”);
var currentTime=新日期();
elapsedSecond=(currentTime-startTime)/1000;
counter.innerHTML=formatPlaces(“0”)+:“
+formatPlaces(elapsedSecond/60)+“:”
+formatPlaces(elapsedSecond%60);

如果(elapsedSecond在前端处理会话不是最好的方法,但是既然您要求

您的方法似乎是正确的,我的意思是您只需将60秒更改为2100秒(35分钟)。要注销,您需要一个函数或一个页面来注销它们。 这种方法的问题是,如果他们刷新页面,计数器也会刷新,如果他们愿意,他们还可以直接更改javascript,重写函数和其他许多事情

幸运的是,Javascript现在支持称为会话存储和本地存储的功能,因此您可以将计时器存储在其中一个变量中,即使它们刷新页面,您也不会丢失其最新值。会话变量将持续到浏览器打开时为止,本地变量将持续到永远,或者直到您取消设置它们为止

您可以按如下方式设置存储值:

var latestTime = localStorage.getItem('secondsPassed');
localStorage.setItem('secondsPassed', lastTime+1);
这至少可以帮助他们刷新页面,然后关闭并重新打开浏览器刷新计时器


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

Antoniu Livadariu这正是我对项目的想法,这样每个用户都将有35分钟的时间,然后在超时后,用户将注销并重定向到我的主页index.html和它们的时间将被节省,以避免它们刷新时间。请帮助我确定这是一个指向小提琴的链接,希望它能工作!如果要重定向,请使用
window.location.href='yoururl.com/index.html';更改If中的警报
var latestTime = localStorage.getItem('secondsPassed');
localStorage.setItem('secondsPassed', lastTime+1);