JS / VUE中如何用原生写一个全局计时器

最近碰到一个教育项目,要用到全局计时器,并且失焦停止,聚焦开始

下面直接上代码,全局变量存在seesion storage中,纯原生js,可在任意场景/框架中使用

setTime() {
			//初始化计时器
           sessionStorage.setItem("seconds", "00");
           sessionStorage.setItem("minutes", "00");
           sessionStorage.setItem("seconds2", "00");
           sessionStorage.setItem("minutes2", "00");
               
			//计时器模板
			window.setTime = (str, str2) => {
					//取值
                    let seconds = sessionStorage.getItem(str);
                    let minutes = sessionStorage.getItem(str2);
                    //转换成数字再换成字符串
                    let s = (parseInt(seconds) + 1).toString();
                    let m = (parseInt(minutes) + 1).toString();
                    //秒钟补0
                    s.length === 1 ? sessionStorage.setItem(str, `0${s}`) : sessionStorage.setItem(str, `${s}`);
                    //秒钟进位
                    if (seconds > 58) {
                    	//进位清零
                        sessionStorage.setItem(str, "00");
                        //分钟补0
                        m.length === 1 ? sessionStorage.setItem(str2, `0${m}`) : sessionStorage.setItem(str2, `${m}`);
                    }
                };
                //全局计时器,持续记时
                window.time = setInterval(() => {
                    window.setTime("seconds", "minutes");
                }, 1000);
				
				//全局计时器,失焦关闭,聚焦开启
                window.xxx = true;
                window.time2 = () => {
                    setTimeout(() => {
                        window.setTime("seconds2", "minutes2");
                        (window.isFocus === true) && (window.time2) ? window.time2() : "";
                    }, 1000);
                };
                window.time2();
                //窗口聚焦
                window.onfocus = () => {
                    window.isFocus = true;
                    window.time2();
                };
                //窗口失焦
                window.onblur = () => {
                    clearTimeout(window.time2);
                    window.isFocus = false;
                };
}
如何使用数据

因为是存在sessionStorage中的,所以直接用sessionStorage.getItem(str)就能拿到对应数据,且数据刷新后不清除,注意拿到的是字符串,且方法已经补0

一些问题

如果要刷新后计时器方法还能用,在app.vue(全局)中写一个window.onload,把以上方法写里面就行了,其他框架没用过,但是原理也差不多

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你可以使用Vue.js的计算属性和生命周期函数来实现分秒计时器。 首先,在Vue组件定义一个计算属性来计算当前时间和结束时间之间的时间差,并将其显示在页面上。 ```html <template> <div> <p>倒计时:{{countdown}}</p> </div> </template> <script> export default { data() { return { endTime: new Date('2021-12-31 23:59:59').getTime() } }, computed: { countdown() { let nowTime = new Date().getTime() let timeDiff = this.endTime - nowTime let seconds = Math.floor((timeDiff / 1000) % 60) let minutes = Math.floor((timeDiff / 1000 / 60) % 60) return `${minutes}分${seconds}秒` } } } </script> ``` 然后,在组件的生命周期函数,使用`setInterval()`函数来每秒更新一次计算属性的时间差,以达到倒计时的效果。 ```html <template> <div> <p>倒计时:{{countdown}}</p> </div> </template> <script> export default { data() { return { endTime: new Date('2021-12-31 23:59:59').getTime(), timer: null } }, computed: { countdown() { let nowTime = new Date().getTime() let timeDiff = this.endTime - nowTime let seconds = Math.floor((timeDiff / 1000) % 60) let minutes = Math.floor((timeDiff / 1000 / 60) % 60) return `${minutes}分${seconds}秒` } }, mounted() { this.timer = setInterval(() => { if (this.countdown === '0分0秒') { clearInterval(this.timer) alert('时间到了!') } }, 1000) }, beforeDestroy() { clearInterval(this.timer) } } </script> ``` 最后,在组件的`mounted()`生命周期函数启动定时器,在组件的`beforeDestroy()`生命周期函数清除定时器。 这样,你就可以在Vue.js创建一个简单的分秒计时器了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值