倒计时js

Posted =DLSS=webZT

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了倒计时js相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时制作</title>
    <style>
        .otime span{display:inline-block;padding: 10px 20px;background-color: #f4f4f4;opacity: 0.5;margin-left: 10px;color:#000;font-weight: bolder;}
    </style>
</head>
<body>
    <div class="text">
        <p>
            距离中秋还剩余:
            <span id="time" class="otime"></span>
        </p>
        <p>
            当前时间:
            <span id="time1" class="otime"></span>
        </p>
    </div>
</body>
    <script type="text/javascript">
    //这个函数是为了适应格式 比如:01分01秒;
    function p (n){
        return n < 10 ? 0+ n : n;
    }
    //这个函数是为了适应格式 比如:毫秒;
    function m (m){
        if(m<=10){
            return 00+m;
        }else if(10<m&&m<100){
            return 0+m
        }else if(100<m&&m<1000){
            return m
        }
    }
    oldTime ();
    newTime ();
    //倒计时函数
    function newTime (){
        //定义当前时间
        // var startTime = new Date("2016/9/13 05:30:30");
        var startTime = new Date ();
        //定义结束时间
        var endTime = new Date("2016/12/22 00:00:00");
        
        //算出中间差并且已毫秒数返回; 除以1000将毫秒数转化成秒数方便运算;
        var countDown = (endTime.getTime() - startTime.getTime())/1000;
        
        //获取天数 1天 = 24小时  1小时= 60分 1分 = 60秒
        var oDay = parseInt(countDown/(24*60*60));
        
        //获取小时数 
        //特别留意 %24 这是因为需要剔除掉整的天数;
        var oHours = parseInt(countDown/(60*60)%24);
        
        //获取分钟数
        //同理剔除掉分钟数
        var oMinutes = parseInt(countDown/60%60);
        
        //获取秒数
        //因为就是秒数  所以取得余数即可
        var oSeconds = parseInt(countDown%60);
        
        //下面就是插入到页面事先准备容器即可;
        var html =  "<span>" + p(oDay) + "天</span>"+ "<span>" + p(oHours) + "时</span>" + "<span>" + p(oMinutes) + "分</span>" +"<span>" + p(oSeconds) + "秒</span>";
        document.getElementById(time).innerHTML = html;
        
        //别忘记当时间为0的,要让其知道结束了;
        if(countDown < 0){
            document.getElementById(time).innerHTML = 中秋节活动已结束;
        }
        setTimeout (newTime(), 200);
    }
    function oldTime (){
        var oDate = new Date();
        //获取年
        var oFullyear = oDate.getFullYear();
        //获取月份
        var oMonth = oDate.getMonth()+1;
        //获取日期
        var oDta= oDate.getDate();
        //获取星期
        var oDay = oDate.getDay();
        var week = [星期日,星期一,星期二,星期三,星期四,星期五,星期六];
        //获取小时
        var oHours = oDate.getHours();
        //获取分钟
        var oMinutes = oDate.getMinutes();
        //获取秒数
        var oSeconds = oDate.getSeconds();
        // 获取毫秒数
        var omiao = oDate.getMilliseconds();
        //插入到容器中
        var b = "<span>"+ oFullyear +"年</span>" + "<span>"+ oMonth +"月</span>" + "<span>"+ oDta+"日</span>" + "<span>"+ week[oDay] +"</span>" + "<span>"+ p(oHours) +"时</span>" + "<span>"+ p(oMinutes) +"分</span>" + "<span>"+ p(oSeconds) +"秒</span>"+ "<span>"+m(omiao)+"毫秒</span>";
        document.getElementById(time1).innerHTML = b;
        // 定时器调用
        setTimeout (oldTime (), 200);

    }
    // 此方法定义data可以是new Data方法兼容ie8及以下浏览器
     function parseISO8601(dateStringInRange) {
   var isoExp = /^s*(d{4})-(dd)-(dd)s*$/,
       date = new Date(NaN), month,
       parts = isoExp.exec(dateStringInRange);
   if(parts) {
     month = +parts[2];
     date.setFullYear(parts[1], month - 1, parts[3]);
     if(month != date.getMonth() + 1) {
       date.setTime(NaN);
     }
   }
   return date;
 }
</script>
</html>

 

以上是关于倒计时js的主要内容,如果未能解决你的问题,请参考以下文章

如何在使用片段和计时器的选项卡式活动上更新 UI

JS 倒计时实现代码(时、分,秒)

帮忙小小的修改一下JS代码,关于倒计时的。

js倒计时代码还剩多少天

求每天距下班时间倒计时JS代码

js循环倒计时代码 每5秒循环倒计时到0 再从5秒开始 到0之后刷新页面 类似网易的滚动新闻