专栏首页编程微刊jQuery+ localStorage 实现一个简易的计时器

jQuery+ localStorage 实现一个简易的计时器

原型

图片发自简书App

需求 1.关闭浏览器时时间继续运行 2.刷新时保持当前状态 3.结束时间保存在客户端

 <div class="wrapper">
            <div class="app">
                <div class="container stopwatch">
                    

                    <div class="clock inactive z-depth-1">
                        <span>0:00:00</span>
                    <!--    <div class="overlay waves-effect"></div>-->
                    </div>
                    
                    <form>
                        <a id="stopwatch-btn-start" class="waves-effect waves-teal btn-flat">开始</a>
                
                    </form>
                    
                </div>
            </div>
        </div>
<script>
    
    // 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/(1000*60)) % 60),
        hours = Math.floor((time/(1000*60*60)) % 24);
    seconds = seconds < 10 ? '0' + seconds : seconds;
    minutes = minutes < 10 ? '0' + minutes : minutes;
   return hours + ":" + minutes + ":" + seconds;
}
</script>

完整的demo下载链接:https://pan.baidu.com/s/1kVOmt4V 密码:rfqq

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • bootstrap-fileinput踩坑-选择文件类型

    在使用插件上传图片的 时候会遇到这样 的一个bug,进入一个文件夹选择图片的时候,会自动选择png格式的图片,同一目录底下的,其他格式jpg,gif等类型会被自...

    祈澈菇凉
  • 微信小程序云开发 初学者入门教程一

    本教程适合刚刚入门的小白,云开发为开发者提供完整的云端支持,弱化后端和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代...

    祈澈菇凉
  • uni-app点击按钮,生成列表元素

    在jQuery里面,动态生成div元素需要进行html的拼接,拼接完成再将拼接的内容放到指定的div里面去,在vue中一般编写代码时都不需要操作DOM元素,那么...

    祈澈菇凉
  • 福利 | 跟我一起学《图解机器学习》

    本文节选自日本理化学研究所先进智能研究中心主任杉山将的《图解机器学习》的第一章。 如果喜欢这本书,请在评论区留言,说出你目前在机器学习方面所遇到的问题,评论点...

    AI科技大本营
  • Python项目实战:爬取每一个歌单中的歌曲列表

    今天为大家介绍一个爬取网易云音乐每一个歌单中的歌曲汇总,你想听的歌它都有,利用简单的爬虫库BeautifulSoup来进行获取网站的信息,下面一起来看看吧

    一墨编程学习
  • PSVR正式开售,跟着罗宾逊一起去征途历险吧!

    VRPinea
  • 用python实现的百度新歌榜、热歌榜下载器

    首先声明,本工具仅仅为学习之用,不涉及版权问题,因为百度音乐里面的歌曲本身是可以下载的,而且现在百度也提供了”百度音乐播放器”,可以通过这个工具进行批量下载。 ...

    古时的风筝
  • 百度Q1营收241亿,李彦宏挥刀改革:“尽力了”没用,要确保在必须赢的战场上胜利

    决心强,赌注大,认定长期价值,可以隐忍当下,而且整肃三军——能者提拔,不行者下,没人可以一直躺在功劳簿上。

    量子位
  • Linux O(1)调度器

    O(n)调度器采用一个runqueue运行队列来管理所有可运行的进程,在主调度schedule函数中会选择一个优先级最高,也就是时间片最大的进程来运行,同时也会...

    DragonKingZhu
  • Confluence 6 配置服务器基础地址示例

    如果 Confluence 的安装是没有安装在非根目录路径(这个是上下文路径),然后服务器基础 URL 地址应该包括上下文地址。例如,你的 Confluence...

    HoneyMoose

扫码关注云+社区

领取腾讯云代金券