Html
    Css
    Js

    
                        
* {
	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;
}
/*倒计时结束*/

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.10.2
 立即下载

原生js倒计时(原创)

更新时间: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;
}();
0