\u6587\u4ef6\u540d\uff1adownTime.vue<\/p>\n
<template>\r\n <div class=\"countDownClass\">\r\n<!-- <span>{{countDownText}}<\/span>-->\r\n <img style=\"height: 5vw\" src=\"@\/assets\/imgs\/icon\/time_icon.png\" \/>\r\n <span>\r\n <span>{{hhssmm.hou?hhssmm.hou:0}}<\/span>\r\n <span>\u65f6<\/span>\r\n <span>{{hhssmm.min?hhssmm.min:0}}<\/span>\r\n <span>\u5206<\/span>\r\n <span>{{hhssmm.sec?hhssmm.sec:0}}\u79d2<\/span>\r\n <\/span>\r\n\r\n <\/div>\r\n<\/template>\r\n\r\n<script>\r\n\r\nimport moment from 'moment'\r\n\r\nexport default {\r\n name: \"CountDown\",\r\n props: {\r\n startTime: {\r\n type: [Number, String],\r\n required: true,\r\n },\r\n endTime: {\r\n type: [Number, String],\r\n required: true,\r\n }\r\n },\r\n data() {\r\n return {\r\n countDownText: '',\r\n hhssmm:{},\r\n }\r\n },\r\n computed: {\r\n },\r\n async created() {\r\n this.updateState();\r\n this.timeInterval=setInterval(()=>{\r\n this.updateState()\r\n },1000)\r\n },\r\n updated(){\r\n if(this.end||this.done){\r\n clearInterval(this.timeInterval)\r\n }\r\n },\r\n methods: {\r\n\r\n \/**\r\n * \u65f6\u95f4\u5c0f\u4e8e10\u8865\u96f6\r\n * *\/\r\n timeFormat(param) {\r\n return param < 10 ? \"0\" + param : param;\r\n },\r\n\r\n \/**\r\n * \u65f6\u95f4\u683c\u5f0f\u5316HHmmss\r\n * *\/\r\n formateHHmmss(time){\r\n let day = parseInt(time \/1000 \/ (60 * 60 * 24));\r\n let hou = parseInt((time \/1000 % (60 * 60 * 24)) \/ 3600) + day * 24;\r\n let min = parseInt(((time \/1000 % (60 * 60 * 24)) % 3600) \/ 60);\r\n let sec = parseInt(((time \/1000 % (60 * 60 * 24)) % 3600) % 60);\r\n let HHmmss = {\r\n hou: this.timeFormat(hou),\r\n min: this.timeFormat(min),\r\n sec: this.timeFormat(sec)\r\n };\r\n return HHmmss;\r\n },\r\n\r\n \/**\r\n * \u66f4\u65b0\u5012\u8ba1\u65f6\u72b6\u6001\r\n *\/\r\n updateState() {\r\n console.log(this.startTime);\r\n\r\n let starTime = new Date(moment(this.startTime).format(\"YYYY\/MM\/DD HH:mm:ss\")).getTime();\r\n console.log(moment(this.startTime).format(\"YYYY\/MM\/DD HH:mm:ss\"))\r\n let endTime = new Date(moment(this.endTime).format(\"YYYY\/MM\/DD HH:mm:ss\")).getTime();\r\n var test = new Date(endTime);\r\n \/\/console.log(test.getFullYear() + \"-\" + this.timeFormat(test.getMonth()) + \"-\" + this.timeFormat(test.getDate()) + \" \" + this.timeFormat(test.getHours()) + \":\" + this.timeFormat(test.getMinutes()) + \":\" + this.timeFormat(test.getSeconds()))\r\n let nowTime = new Date().getTime();\r\n let beginTime = starTime - nowTime;\r\n let finishTime = endTime - nowTime;\r\n let hhmmss = null;\r\n if (beginTime >= 0) {\r\n let hou = this.formateHHmmss(beginTime).hou;\r\n let min = this.formateHHmmss(beginTime).min;\r\n let sec = this.formateHHmmss(beginTime).sec;\r\n hhmmss = {\r\n hou: hou,\r\n min: min,\r\n sec: sec\r\n };\r\n this.hhssmm = hhmmss;\r\n this.start=true;\r\n this.countDownText=\"\u79d2\u6740\u5df2\u5f00\u59cb\";\r\n } else if (finishTime >= 0) {\r\n let hou = this.formateHHmmss(finishTime).hou;\r\n let min = this.formateHHmmss(finishTime).min;\r\n let sec = this.formateHHmmss(finishTime).sec;\r\n hhmmss = {\r\n hou: hou,\r\n min: min,\r\n sec: sec\r\n };\r\n this.hhssmm = hhmmss;\r\n this.countDownText=`\u8ddd\u79bb\u6d3b\u52a8\u7ed3\u675f`;\r\n } else {\r\n hhmmss = {\r\n hou: \"00\",\r\n min: \"00\",\r\n sec: \"00\"\r\n };\r\n this.end=true;\r\n this.countDownText=\"\u6d3b\u52a8\u5df2\u7ed3\u675f\";\r\n }\r\n }\r\n },\r\n beforeDestroy() {\r\n clearInterval(this.timeInterval)\r\n }\r\n}\r\n<\/script>\r\n\r\n<style scoped>\r\n\/* \u79d2\u6740 *\/\r\n.countDownClass {\r\n display: flex;\r\n align-items: center;\r\n flex-direction: row;\r\n margin: 0 0 0.1rem 0;\r\n color: #999999;\r\n font-size: 4vw;\r\n}\r\n.countDownClass > span:last-child {\r\n margin-left: 0.1rem;\r\n}\r\n.countDownClass > span:last-child span:nth-child(odd) {\r\n color: #999999;\r\n display: inline-block;\r\n border-radius: 0.1rem;\r\n padding: 0.05rem 0.05rem 0.05rem 0.05rem;\r\n}\r\n<\/style><\/pre>\n <\/p>\n
<\/p>\n
\u8c03\u7528\uff1a<\/p>\n
import downTime from '@\/components\/downTime'\r\n\r\nexport default {\r\n components: {downTime },\r\n}\r\n\r\n\r\n<downTime :startTime=\"'2012-11-11 11:11:11'\" :endTime=\"'2022-11-11 11:11:11'\"><\/downTime>\r\n\r\n<\/pre>\n <\/p>\n