页面倒计时功能

今天做到一个抢购活动的项目，活动设置了一个开始时间，要求在活动开始之前在页面上写一个倒计时功能，结合了网上的一些方法，自己写了一个。

1. 在需要显示时间的位置加一个div:

        <div id="dao">
            <strong id="RemainD"></strong>天<strong id="RemainH"></strong>时<strong id="RemainM"></strong>分<strong id="RemainS"></strong>秒
        </div>

2. 设置dao的字体，颜色，位置等

     <style type="text/css">
        #dao{font-size:18px;margin:30px 0 30px 0;font-weight:800;text-align:center;width:100%;font-family:"微软雅黑","宋体";}
        #dao strong{font-size:35px;margin:0 13px;color:#D6000F;font-family:Arial;}
    </style>

3. 在js里面设置时间

var start =“2017-06-25 00:00:00” ；这里的时间是活动开始时间，可以写死，也可以通过el表达式从数据库传过来。

    var startTime = start.replace(/-/g,"/");  这是把时间里的“-”转换成“/”；
    var EndTime=(new Date(startTime)).getTime();
    //定义参数可返回距 1970 年 1 月 1 日之间的毫秒数
    function GetRTime(){
        //定义方法
        var NowTime = new Date();
        //定义参数可返回当天的日期和时间
        var nMS = EndTime - NowTime.getTime();
        //定义参数 EndTime减去NowTime参数获得返回距 1970 年 1 月 1 日之间的毫秒数
        var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
        //定义参数 获得天数
        var nH = Math.floor(nMS/(1000*60*60)) % 24;
        //定义参数 获得小时
        var nM = Math.floor(nMS/(1000*60)) % 60;
        //定义参数 获得分钟
        var nS = Math.floor(nMS/1000) % 60;
        //定义参数 获得秒钟

        //天数展开
        $("#RemainD").text(nD);
        //显示天数
        $("#RemainH").text(nH);
        //显示小时
        $("#RemainM").text(nM);
        //显示分钟
        $("#RemainS").text(nS);
        //显示秒钟
    }

4. 写一个setInterval方法，调用上面的GetRTime方法

    页面刷新时就调用

 

$(document).ready(function () {
        //定义方法
        var timer_rt = window.setInterval("GetRTime()", 500);
        //定义参数 显示出GetRTime()方法 1000毫秒以后启动
    });

这样，倒计时功能就完成了