1.设置参数:
restTime: "", // 剩余时间 startDataTime: '', // 开始时间,自己设置或数据库获取 endDataTime: '', // 结束时间,自己设置或数据库获取 timeStamp: null, // 接收剩余时间戳 timer: null,
2.获取当前时间
mounted() { this.startDataTime=this.getCurrentTime(); },
getCurrentTime() { //获取当前时间 var _this = this; let yy = new Date().getFullYear(); let mm = new Date().getMonth()+1; let dd = new Date().getDate(); let hh = new Date().getHours(); if (mm >= 1 && mm <= 9) { mm = "0" + mm; } let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes(); let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds(); return yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss; },
3.使用moment插件获取时间差
npm install moment
main.js中
import moment from "moment"; moment.locale('zh-cn'); Vue.prototype.$moment = moment
//获取后台返回的时间(分钟) this.endDataTime=this.getEndTime(this.paperData.answerPaperTime); // 处理字符串为时间类型 let startTime = Date.parse(this.startDataTime.replace(/-/g,"-")); let endTime = Date.parse(this.endDataTime.replace(/-/g,"-")); // 调用moment插件计算时间差(做完这一步timeStamp为时间戳了) this.timeStamp = this.$moment(endTime).diff(this.$moment(startTime));
getEndTime(t){ let date=new Date(); //1. js获取当前时间 let min=date.getMinutes(); //2. 获取当前分钟 date.setMinutes(min+t); //3. 设置当前时间+10分钟:把当前分钟数+10后的值重新设置为date对象的分钟数 let y = date.getFullYear(); let m = (date.getMonth() + 1) < 10 ? ("0" + (date.getMonth() + 1)) : (date.getMonth() + 1); let d = date.getDate() < 10 ? ("0" + date.getDate()) : date.getDate(); let h = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours() let f = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes() let s = date.getSeconds() < 10 ? ('0' + date.getseconds()) : date.getSeconds() let formatdate = y+'-'+m+'-'+d + " " + h + ":" + f + ":" + s; return formatdate console.log(formatdate) // 获取10分钟后的时间,格式为yyyy-mm-dd h:f:s },
4.倒计时,每一秒执行一次。
mounted() { if(this.timer)clearInterval(this.timer) this.timer = setInterval(this.getRestTime,1000) },
// 初始化获取时间 getRestTime () { // 赋值转时分秒 this.restTime = this.toHHmmss(this.timeStamp); // 所以不是大于0秒 if (this.timeStamp>= 1000) { // 1000为一秒 // 如果大于1秒 this.timeStamp = this.timeStamp -1000; } else { // 倒计时最后一秒将剩余时间修改 this.restTime= "00:00:00"; // 清除定时器 clearInterval(this.timer) // 在这里编写考试交卷或自动取消订单的功能 console.log("结束定时器!"); } },
// 时间戳转时分秒 toHHmmss (data) { var s; var hours = parseInt((data % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = parseInt((data % (1000 * 60 * 60)) / (1000 * 60)); var seconds = (data % (1000 * 60)) / 1000; s = (hours < 10 ? ('0' + hours) : hours) + ':' + (minutes < 10 ? ('0' + minutes) : minutes) + ':' + (seconds < 10 ? ('0' + seconds) : seconds); if (s.length>8){ s= s.slice(0,8) } return s; },
5.页面显示
剩余时间:{{restTime}}
6.离开销毁定时器
beforeRouteLeave(to, from , next){ //离开路由之前执行的函数 if(this.isFlag==true){ next(false) this.$confirm('您是否确认离开此页面-您输入的数据可能不会被保存?', '提示', { distinguishCancelAndClose: true, confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { clearInterval(this.timer); next() }).catch(() => { }); }else { next() } }, // 退出页面清除定时器 beforeDestroy() { //销毁之前 clearInterval(this.timer); }, destroyed() { //销毁完成 window.removeEventListener("beforeunload", (e) => { console.log('页面destroyed,生效') this.beforeunloadHandler(e); clearInterval(this.timer); }); },
// 获取时间差长度只需要做一次 created() { this.stopF5Refresh(); this.getList() },
stopF5Refresh() { document.onkeydown = function (e) { var evt = window.event || e; var code = evt.keyCode || evt.which; //屏蔽F1---F12 if (code > 111 && code < 124) { if (evt.preventDefault) { evt.preventDefault(); } else { evt.keyCode = 0; evt.returnValue = false; } } }; //禁止鼠标右键菜单 document.oncontextmenu = function () { return false; }; //阻止后退的所有动作,包括 键盘、鼠标手势等产生的后退动作。 history.pushState(null, null, window.location.href); window.addEventListener("popstate", function () { history.pushState(null, null, window.location.href); }); }, beforeunloadHandler(e) { e = e || window.event; if (e) { e.returnValue = "您是否确认离开此页面-您输入的数据可能不会被保存"; } return "您是否确认离开此页面-您输入的数据可能不会被保存"; },