穆年小菜鸟的日常随记——JS计时器功能

功能介绍——计时器功能

文件位置：/public/static/js/timeset.js
引入位置：/application/admin/view/public/main.html

• 内置方法
• timeclear()：暂停计时器方法——提交成功以后调用此方法 timeclear() 即可暂停计时器并清除计时器的的缓存
• timeset()：计时器逻辑代码块

实现方式

• 使用前端localStorage缓存实现，计时器有且只有在清除缓存或者手动触发以后才能暂停或者重置，进入其他页面、刷新、重新打开都不会失效

方法使用

• 1.使用class为timeset的元素点击触发，初始值从0开始进行计时,提交成功以后调用此方法 timeclear() 即可暂停计时器并清除计时器的的缓存
• 2.元素需要定义属性【data-id】值为order_id,用于确认当前被操作的用户和计数器是否是初始状态的标识
• 3.页面显示会自动赋值当前页面中元素【id】为【timesetde】的元素，
• 4.可通过localStorage.getItem(‘second’)获取秒数【例：120】自行运算或者获取localStorage.getItem(‘proceed_time’)获取时间格式为【小时：分钟：秒】

使用示例

赋值的元素	 <a class="" id="timeset" role="button" data-open="#">00:00:00</a>
触发开始的按钮 <a class="cardBtn timeset" data-id="1" data-modal=""  data-title="开始" >开始</a> 
触发暂停的按钮 <a class="cardBtn timeclear" data-modal=""  data-title="暂停" >暂停</a> 

获取参数

**********************************************************************************************
**********************************************************************************************
//获取缓存参数根据自身需求获取
var proceed_time = localStorage.getItem('proceed_time')
var second = localStorage.getItem('second')
var order_id = localStorage.getItem('order_id')
**********************************************************************************************
**********************************************************************************************
//计时器开始代码
console.log("1.计时器开始执行");
var second = 0,
    s=0;
if(localStorage.getItem('order_id')){
    clearInterval(ref);//清除计数器,防止计时器重叠调用导致时间变快
    console.log('注意01：页面刷新或者再次切换页面回显计时器');
    console.log("注意02：计时器开始按照上次时间继续执行");
    s=localStorage.getItem('second');
    var ref = setInterval(timeset,1000);
}
//获取计时器逻辑方法（传参s为秒数的初始值，当缓存存在时取缓存的值，缓存没有时传0即可）
function timeset(){
    console.log("2.执行计时器逻辑");
    localStorage.removeItem('second');
    ++s;//秒数自增
    var second = Math.floor(s % 60);//计算秒     
    var minite = Math.floor((s / 60) % 60);//计算分种 
    var hour = Math.floor((s / 3600) % 24);//计算小时
    if(hour<10){hour='0'+hour};//不满两位数时前面补0
    if(minite<10){minite='0'+minite};//不满两位数时前面补0
    if(second<10){second='0'+second};//不满两位数时前面补0
    $('#timeset').html(hour+":"+minite+":"+second);//获得的时间赋值到计时器容器
    localStorage.setItem('second',s);//缓存功能进行的时间秒数
    localStorage.setItem('proceed_time',hour+":"+minite+":"+second);//缓存功能进行的时间秒数
}
function timeclear(){
    console.log("计时器已暂停");
    console.log("正在清除缓存参数......");
    clearInterval(ref);//清除计数器
    localStorage.clear();
    localStorage.removeItem('second');
    localStorage.removeItem('proceed_time');
    localStorage.removeItem('order_id');
    console.log("清除缓存参数完成");
}
//固定class【timeset】触发计时器
$('.timeset').click(function(){
    console.log('点击触发：用户已点击触发计时器');
    //点击触发计时器如果不存在初始计时器
    if(!localStorage.getItem('order_id')){
        console.log('当前不存在计时器，开启新的计时器')
        localStorage.setItem('order_id',$(this).attr('data-id'))//缓存当前被操作人信息
        console.log("计时器从0秒开始");
        s=0;
        console.log("计时器开始执行"+s);
        ref = setInterval(timeset,1000);
        console.log(ref);
    }
})
//监听页面刷新动作
$(window).on('beforeunload',function(){clearInterval(ref);});

应用过程中出现的问题：
1.发现动态绑定了click事件并有时候会失效，将原来的动态绑定

$('.timeset').click(function(){
    console.log('点击触发：用户已点击触发计时器');
    //点击触发计时器如果不存在初始计时器
    if(!localStorage.getItem('order_id')){
        console.log('当前不存在计时器，开启新的计时器')
        localStorage.setItem('order_id',$(this).attr('data-id'))//缓存当前被操作人信息
        console.log("计时器从0秒开始");
        s=0;
        console.log("计时器开始执行"+s);
        ref = setInterval(timeset,1000);
        console.log(ref);
    }
})

改为：

$(document).on('click','.timeset',function(){
    console.log('点击触发：用户已点击触发计时器');
    //点击触发计时器如果不存在初始计时器
    if(!localStorage.getItem('order_id')){
        console.log('当前不存在计时器，开启新的计时器')
        localStorage.setItem('order_id',$(this).attr('data-id'))//缓存当前被操作人信息
        console.log("计时器从0秒开始");
        s=0;
        console.log("计时器开始执行"+s);
        ref = setInterval(timeset,1000);
        console.log(ref);
    }
})

注：如果是多个子页面引入到一个父页面当中，此类名可能查找不到，所以直接给一个父级，采用未来式的查找事件即可