* { margin:0; padding:0; } /*倒计时开始*/ #timer-Box { user-select:none; width:300px; padding-left:12px; overflow:hidden; height:auto; background:rgb(232,55,51); margin:10px auto; text-align:center; color:#fff; } #timer-Box>h1 { margin-top:20px; } #timer-Box>p:nth-of-type(1) { margin-top:5px; color:rgba(255,255,255,0.5); } #timer-Box>.time { width:100%; display:flex; justify-content:space-around; } .time>div { position:relative; width:40px; height:40px; background:#333; font-weight:bold; line-height:40px; margin:20px 0; } .time>div::after { display:block; content:''; position:absolute; width:100%; height:1px; background:rgb(232,55,51); top:50%; transform:translateY(-50%); } .time>span { display:inline-block; line-height:40px; width:40px; height:40px; margin:20px 0 50px; } /*倒计时结束*/
更新时间:2019-08-16 01:01:3
如有浏览器不兼容,请将js中的代码换成如下代码
"use strict"; function _instanceof(left, right) { if (right != null && typeof symbol !== "undefined" && right[symbol.hasinstance]) { return !!right[symbol.hasinstance](left); } else { return left instanceof right; } } function _classcallcheck(instance, constructor) { if (!_instanceof(instance, constructor)) { throw new typeerror("cannot call a class as a function"); } } function _defineproperties(target, props) { for (var i = 0; i < props.length; i++) { var descripttor = props[i]; descripttor.enumerable = descripttor.enumerable || false; descripttor.configurable = true; if ("value" in descripttor) descripttor.writable = true; object.defineproperty(target, descripttor.key, descripttor); } } function _createclass(constructor, protoprops, staticprops) { if (protoprops) _defineproperties(constructor.prototype, protoprops); if (staticprops) _defineproperties(constructor, staticprops); return constructor; } //倒计时类 var time = /*#__pure__*/ function() { function time(time) { var _this = this; _classcallcheck(this, time); this.oday = document.queryselector('.days'); this.ohour = document.queryselector('.hours'); this.ominute = document.queryselector('.minutes'); this.osecond = document.queryselector('.seconds'); this.vacationtime = new date(time); this.gettime(); this.timer = setinterval(function() { _this.gettime(); }, 1000); } _createclass(time, [{ key: "gettime", value: function gettime() { var curtime = new date(); //得到相差总时间(秒) var differtime = (this.vacationtime - curtime) / 1000; var day = math.floor(differtime / (60 * 60 * 24)); //剩余天数 day = day >= 10 ? day : '0' + day; var hour = math.floor(differtime / (60 * 60) % 24); //剩余小时 hour = hour >= 10 ? hour : '0' + hour; var minute = math.floor(differtime / 60 % 60); //剩余分钟 minute = minute >= 10 ? minute : '0' + minute; var second = math.floor(differtime % 60); //剩余秒 second = second >= 10 ? second : '0' + second; this.oday.innertext = day; this.ohour.innertext = hour; this.ominute.innertext = minute; this.osecond.innertext = second; if (parseint(day) <= 0 && parseint(hour) <= 0 && parseint(minute) <= 0 && parseint(second) <= 0) { clearinterval(this.timer); this.oday.innertext = '时'; this.ohour.innertext = '间'; this.ominute.innertext = '到'; this.osecond.innertext = '了'; } } }]); return time; }();