js 抢购倒计时,豪秒级变动

这里写图片描述
上面是效果图,

  • 开始时间:获取当前new Date()时间
  • 结束时间:一般通过后端获取:格式 2017-08-25 24:00:00
  • 时 间 差 : 需要计算出时间差
  • 使用setInterval重复计算,每100毫秒变动一次

倒计时对象

!(function () {
        'use strict';
        var Countdown ;
        Countdown = function (settings) {
            var _       = this,str,time;
            if(typeof settings !== 'object'){ return ;}
            _.endTime = new Date(settings.endTime);
            _.el      = settings.el instanceof HTMLElement ? settings.el : document.querySelector(settings.el);
            _.init = function () {
                time    = (function () {
                    var curTime = new Date(),
                        diff = parseInt((_.endTime.getTime() - curTime.getTime())/1000),
                        day  = parseInt(diff/(60*60*24)),
                        hour = parseInt(diff/(60*60)%24),
                        mini = parseInt(diff/60%60),
                        sec  = parseInt(diff%60),
                        ms   = parseInt(((_.endTime.getTime() - curTime.getTime())/100)%10);        //豪秒

                    diff<=0 && clearInterval(_.timer);
                    return {
                        d  : (day < 10) ? ("0"+day) : day,
                        h  : (hour < 10) ? ("0"+hour) : hour,
                        m  : (mini < 10) ? ("0"+mini) : mini,
                        s  : (sec < 10) ? ("0"+sec) : sec,
                        ms : ms
                    }
                })();
                str     = ''+time.d+' '+time.h+' '+time.m+' '+time.s+'.'+time.ms+'';
                _.el.innerHTML = str;
                _.timer = setInterval(function () {
                    _.init();
                },100);
            };
            _.init();
        };
        window.Countdown = Countdown || {};
    })();

使用

  • el 可以是原生的dom对象,也可以是一个html class的字符串
  • endTime 结束时间 格式: 2017-08-25 22:21:00
new Countdown({
        el      : "#Countdown",
        endTime : "2017-08-25 22:21:00"
    })

完整示例


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抢购倒计时title>
    <style>
        /*限时抢购*/
        .time {
            background: #ea3b38;
            height: 40px;
            line-height: 40px;
        }
        .time .active-label {
            color: #fff;
            margin-left: 6px;
        }
        .time .proinfo-cd {
            margin-left: 10px;
        }
        .time .proinfo-cd em {
            width: 39px;
            height: 40px;
            font: 700 14px/40px Tahoma;
            color: #fff;
            overflow: hidden;
            word-break: break-all;
        }
        .time .proinfo-cd span {
            width: 30px;
            text-align: center;
            color: #fff;
            font-weight: 600;
            font-size: 14px;
        }
        .time .time-title {
            padding: 0 10px;
            border-right: 1px solid #fff;
            font: 700 16px/24px Microsoft Yahei;
            color: #fff;
            display: inline-block;
            height: 24px;
            vertical-align: -1px;
        }
    style>
head>
<body>

<div class="time">
    <span class="time-title">限时抢购span>
    <span class="time-cd">
        <span class="active-label">距抢购结束span>
        <span class="proinfo-cd" id="Countdown">
            <em class="d">00em>
            <span>span>
            <em class="h">00em>
            <span>span>
            <em class="m">00em>
            <span>span>
            <em class="s">00.0em>
            <span>span>
        span>
    span>
div>

<script>
    !(function () {
        'use strict';
        var Countdown ;
        Countdown = function (settings) {
            var _       = this,str,time;
            if(typeof settings !== 'object'){ return ;}
            _.endTime = new Date(settings.endTime);
            _.el      = settings.el instanceof HTMLElement ? settings.el : document.querySelector(settings.el);
            _.init = function () {
                time    = (function () {
                    var curTime = new Date(),
                        diff = parseInt((_.endTime.getTime() - curTime.getTime())/1000),
                        day  = parseInt(diff/(60*60*24)),
                        hour = parseInt(diff/(60*60)%24),
                        mini = parseInt(diff/60%60),
                        sec  = parseInt(diff%60),
                        ms   = parseInt(((_.endTime.getTime() - curTime.getTime())/100)%10);        //豪秒

                    diff<=0 && clearInterval(_.timer);
                    return {
                        d  : (day < 10) ? ("0"+day) : day,
                        h  : (hour < 10) ? ("0"+hour) : hour,
                        m  : (mini < 10) ? ("0"+mini) : mini,
                        s  : (sec < 10) ? ("0"+sec) : sec,
                        ms : ms
                    }
                })();
                str     = ''+time.d+' '+time.h+' '+time.m+' '+time.s+'.'+time.ms+'';
                _.el.innerHTML = str;
                _.timer = setInterval(function () {
                    _.init();
                },100);
            };
            _.init();
        };
        window.Countdown = Countdown || {};
    })();

    new Countdown({
        el      : "#Countdown",
        endTime : "2017-08-25 22:21:00"
    })

script>
body>
html>

你可能感兴趣的:(javascript,抢购倒计时,js倒计时)