* {
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;
}();