频道导航

利用jQuery+localStorage实现一个简易的计时器示例代码

2019-01-08 jQuery 前端之家

前端之家收集整理的这篇文章主要介绍了利用jQuery+localStorage实现一个简易的计时器示例代码，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

前言

在HTML5中，新加入了一个localStorage特性，这个特性主要是用来作为本地存储来使用的，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同。

本文主要介绍了关于jQuery+localStorage实现简易计时器的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

原型

需求

1.关闭浏览器时时间继续运行

2.刷新时保持当前状态

3.结束时间保存在客户端

示例代码

0:00:00

// Stopwatch var stopwatchInterval = 0; // The interval for our loop.循环的间隔。 var stopwatchClock = $(".container.stopwatch").find(".clock"),stopwatchDigits = stopwatchClock.find('span'); // 检查前一个会话是否在秒表运行时结束。 // 如果是的话，按时间重新开始。 //即关闭浏览器，点击开始，在后台保持计时的状态 if(Number(localStorage.stopwatchBeginingTimestamp) && Number(localStorage.stopwatchRunningTime)){ var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp); localStorage.stopwatchRunningTime = runningTime; startStopwatch(); } //如果前一个会话有运行时间，就把它写在时钟上。 // 如果没有初始化为0。 //即结束时不可刷新 if(localStorage.stopwatchRunningTime){

stopwatchDigits.text(returnFormattedToMilliseconds(Number(localStorage.stopwatchRunningTime)));

}
else{
localStorage.stopwatchRunningTime = 0;
}
/ 实现开始结束 /
$("#stopwatch-btn-start").toggle(function() {
$(this).text ('开始').css("background","#3bb4f2");
if(stopwatchClock.hasClass('inactive')){
startStopwatch()
}
},function() {
$(this).text ('结束').css("background","red");
pauseStopwatch();
})
// Pressing the clock will pause/unpause the stopwatch.
//按下暂停/恢复的时钟秒表
/stopwatchClock.on('click',function(){
if(stopwatchClock.hasClass('inactive')){
startStopwatch()
}
else{
pauseStopwatch();
}
});/
/开始计时/
function startStopwatch(){
// 防止多个间隔同时进行。
clearInterval(stopwatchInterval);
var startTimestamp = new Date().getTime(),runningTime = 0;
localStorage.stopwatchBeginingTimestamp = startTimestamp;
// 应用程序还记得上一次会话运行了多长时间。
if(Number(localStorage.stopwatchRunningTime)){
runningTime = Number(localStorage.stopwatchRunningTime);
}
else{
localStorage.stopwatchRunningTime = 1;
}
// 每隔100ms重新计算运行时间，计算公式是
// 当你上次启动时钟+上次运行时间
stopwatchInterval = setInterval(function () {
var stopwatchTime = (new Date().getTime() - startTimestamp + runningTime);
stopwatchDigits.text(returnFormattedToMilliseconds(stopwatchTime));
},100);
stopwatchClock.removeClass('inactive');
}
/停止计时/
function pauseStopwatch(){
// 停止计时
clearInterval(stopwatchInterval);
if(Number(localStorage.stopwatchBeginingTimestamp)){
// 计算运行时间。
// 新的运行时间=上次运行时间+现在-最后一次启动
var runningTime = Number(localStorage.stopwatchRunningTime) + new Date().getTime() - Number(localStorage.stopwatchBeginingTimestamp);
localStorage.stopwatchBeginingTimestamp = 0;
localStorage.stopwatchRunningTime = runningTime;
stopwatchClock.addClass('inactive');
}
}
// 重置.
/*function resetStopwatch(){
clearInterval(stopwatchInterval);
stopwatchDigits.text(returnFormattedToMilliseconds(0));
localStorage.stopwatchBeginingTimestamp = 0;
localStorage.stopwatchRunningTime = 0;

stopwatchClock.addClass('inactive');
}
/
function returnFormattedToMilliseconds(time){
var
seconds = Math.floor((time/1000) % 60),minutes = Math.floor((time/(100060)) % 60),hours = Math.floor((time/(10006060)) % 24);
seconds = seconds < 10 ? '0' + seconds : seconds;
minutes = minutes < 10 ? '0' + minutes : minutes;
return hours + ":" + minutes + ":" + seconds;
}