<template> <!-- 倒计时组件 --> <div class="days"> <template v-if="days-0>0"> <span class="item">{{days}}</span> <span class="label">天</span> </template> <template v-if="hours-0>0"> <span class="item">{{hours}}</span> <span class="label">时</span> </template> <span class="item">{{minute}}</span> <span class="label">分</span> </div> </template> <script type="text/ecmascript-6"> let d = null; // 倒计时方法 if (typeof xcsoft == "undefined") var xcsoft = new function() {}(); xcsoft.countdown = function(a, b, c) { d = new Object(); var e = 0; if (typeof a == "object") { var f = parseInt(new Date().getTime() / 1000); var g = a.startTime ? parseInt(a.startTime) : 0; g = g == 0 ? f : g; var h = a.endTime; var x = g - f; d.decimal = parseInt(a.msec ? a.msec : 0); } else { var f = 0; var x = 0; d.decimal = 0; var h = a; var i = h.toString(); if (i.indexOf(".") > 0) { d.decimal = i.split(".")[1]; if (d.decimal > 3) { d.decimal = 3; } } } d.time = h; d.finish = false; if (isNaN(h)) { var j = h.substring(0, 19); j = j.replace(/-/g, "/"); d.time = new Date(j).getTime() / 1000; } var k = d.decimal == 0 ? 100 : 100; d.day = 0; d.hour = 0; d.minute = 0; d.second = 0; d.t = setInterval(function() { e = new Date().getTime(); f = parseInt(e / 1000 + x); var l = d.time - f; if (l <= 0) { e = 0; l = 0; } if (l >= 0) { d = xcsoft.getTimeObject(d, l); } if (d.decimal == 1) { d.msecZero = d.msec = parseInt(10 - (e % 1000) / 100); if (d.msec == 10 || l == 0) { d.msecZero = d.msec = 0; } } else if (d.decimal == 2) { d.msecZero = d.msec = parseInt(100 - (e % 1000) / 10); if (d.msec < 10) { d.msecZero = "0" + d.msec; } else if (d.msec == 100 || l == 0) { d.msec = 0; d.msecZero = "0" + d.msec; } } else { d.msecZero = d.msec = parseInt(1000 - e % 1000); if (d.msec < 10) { d.msecZero = "00" + d.msec; } else if (d.msec < 100) { d.msecZero = "0" + d.msec; } else if (d.msec == 1000 || l == 0) { d.msec = 0; d.msecZero = "00" + d.msec; } } if (b) { b(d); } if (l <= 0 || d.stop == true) { clearInterval(d.t); d.finish = true; if (c) c(d); } }, k); }; xcsoft.getTimeObject = function(a, l) { var b = 60; var c = b * b; var d = 24 * c; a.days = Math.floor(l / d); a.year = Math.floor(a.days / 365); a.day = Math.floor(a.days % 365); a.hour = Math.floor((l % d) / c); a.minute = Math.floor((l - (a.days * d + a.hour * c)) / b); a.second = Math.floor(l % b); a.dayZero = a.day < 10 ? "0" + a.day : a.day; a.daysZero = a.days < 10 ? "0" + a.days : a.days; a.hourZero = a.hour < 10 ? "0" + a.hour : a.hour; a.minuteZero = a.minute < 10 ? "0" + a.minute : a.minute; a.secondZero = a.second < 10 ? "0" + a.second : a.second; return a; }; export default { props: ["startTime"], name: "", data() { return { days: 0, hours: 0, minute: 0, second: 0 }; }, onLoad() { let _this = this; console.log(this.startTime, "--------129"); xcsoft.countdown( this.startTime, function(time) { // console.log(time.day,time.hourZero, time.minuteZero, time.secondZero,'--------39') _this.days = time.dayZero; _this.hours = time.hourZero; _this.minute = time.minuteZero; _this.second = time.secondZero; }, function(time) { //倒计时结束后的操作 } ); }, onUnload() { // 清除未开播倒计时 d.stop = true; }, components: {}, computed: {}, mounted() {}, methods: {} }; </script> <style lang="scss" scoped> .days{ font-size: 28px; font-weight: bold; color: #fff; span{ padding: 0 2px; } } </style>