功能介绍——计时器功能
文件位置:/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);
}
})
注:如果是多个子页面引入到一个父页面当中,此类名可能查找不到,所以直接给一个父级,采用未来式的查找事件即可