<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>倒计时</title>

    <style>

        body,html{

            margin: 0;

            padding: 0;

            width:100%;

            height: 100%;

        }

        .wrapper{

          width:100%;

          height:100%;

          background: url(images/body.gif) no-repeat;

          background-repeat: repeat-x;

          padding-top:20px;

        }

        .logo{

           width:150px;

           height:150px;

           position:absolute;

           top:175px;

           left:612px;

           opacity: 0;

           background: url(images/btn_hover.jpg) no-repeat;

           transition:1s;

        }

        .logo:hover{

          opacity:1;

          transition:1s;

        }

        .countDown{

           width:600px;

           height: 660px;

           background: url(images/miaov_bg.jpg) no-repeat;

           margin:0 auto;

           position:relative;

        }

        .countDown .timeUp{

           position: absolute;

           top:93px;

           width:100%;

        }

        .countDown .timeUp span{

           color:white;

           font-size:14px;

           position:absolute;

           display: inline-block;

        }

         .countDown .timeUp span:nth-child(1){

             left:144px;

         }

          .countDown .timeUp span:nth-child(2){

             left:286px;

         }

          .countDown .timeUp span:nth-child(3){

             left:365px;

         }

          .countDown .timeUp span:nth-child(4){

             left:450px;

         }

         .countDown .timeUp input{

                height:16px;

                line-height:16px;

                background: none;

                position:absolute;

                width:70px;

                font-weight:bold;

                outline-style: none;

                border:0;

                text-align:center;

                color:#666;

         }

           .countDown .timeUp .inputYear{

               left:200px;

               top:2px;

           }

             .countDown .timeUp .inputMath{

               left:300px;

               top:3px;

           }

             .countDown .timeUp .inputDay{

               left:380px;

               top:3px;

           }

           .countDown .timeCenter{

                  position:absolute;

                  width:100%;

                  top:312px;

                  text-align:center;

                  color:white;

                  font-size:20px;

           }

           .countDown .timeCenter span{

                color:orange;

           }

          .countDown .timeDown{

                position:absolute;

                top:388px;

                width:100%;

          }

          .countDown .timeDown span {

              position:absolute;

              color:orange;

              font-size:30px;

          }

           .countDown .timeDown span:nth-child(1){

                left:100px;

           }

            .countDown .timeDown span:nth-child(2){

               left:222px;

           }

            .countDown .timeDown span:nth-child(3){

               left:352px;

           }

            .countDown .timeDown span:nth-child(4){

              left:458px;

           }

    </style>

</head>

<body>

       <div class="wrapper">

           <div class="countDown" >

                <p class="timeUp" id="timeUp">

                     <span id="days">请输入:</span>

                     <span id="hours">年</span>

                     <span id="minutes">月</span>

                     <span id="seconds">日</span>

                     <input type="text" class="inputYear" value="2018">

                     <input type="text" class="inputMath" value="12">

                     <input type="text" class="inputDay"  value="22">

                </p>

                <p class="timeCenter" id="timeCenter">

                   现在距离 - <span>2018年12月22日</span> - 还剩:

                 </p>

                <p class="timeDown" id="timeDown">

                     <span>000</span>

                     <span>00</span>

                     <span>00</span>

                     <span>00</span>

                </p>

           </div>

           <div id="logo" class="logo"></div>

       </div>

     <script>

         var start=document.getElementById("logo");

         var timeUp=document.getElementById("timeUp");

         var timeCenter=document.getElementById("timeCenter");

         var timeDown=document.getElementById("timeDown");

         var timer=null;

         var end=false;

         delay=1000;

         start.onclick=function(){

              var curFn=arguments.callee;

              var timeUp_input=timeUp.getElementsByTagName("input");

              var timeDown_span=timeDown.getElementsByTagName("span");

              var timeCenter_span= timeCenter.getElementsByTagName("span")[0];

              var year=timeUp_input[0].value  || 2018;

              var month=timeUp_input[1].value || 12;

              var day=timeUp_input[2].value   || 22;

              timeCenter_span.innerHTML=year+"年"+month+"月"+day+"日";

                  var willTime=new Date(year,month-1,day,0,0,0);

                  //var months=[12,1,2,3,4,5,6,7,8,9,10,11];

               timer=setTimeout(function(){

                  var curTime=new Date();

                  if(curTime>=willTime || willTime<=curTime ){

                     alert("活动时间已经结束!!!");

                       for(var i=0,len=timeDown_span.length;i<len;i++){

                           timeDown_span[i].innerHTML="000";

                         }

                     end=true;

                     clearTimeout(timer);

                     return;

                  }

                  var milliseconds=willTime.getTime()-curTime.getTime();

                  var days=milliseconds/1000/3600/24;   //天数

                  var hours=milliseconds/1000/3600%24;  //剩余的小时

                  var minute=milliseconds/1000/60%60;   //剩余分钟数

                  var seconds=milliseconds/1000%60;  //剩余秒数

                   //总结  XXX%什么 剩下的还是XXX

                   //所以 就需要 分钟%60 剩下的才是分钟

                     timeDown_span[0].innerHTML=addZero(days);

                     timeDown_span[1].innerHTML=addZero(hours);

                     timeDown_span[2].innerHTML=addZero(minute);

                     timeDown_span[3].innerHTML=addZero(seconds);

                   if(!end){

                      timer=setTimeout(arguments.callee,delay);

                   }

                   else{

                        for(var i=0,len=timeDown_span.length;i<len;i++){

                           timeDown_span[i].innerHTML="000";

                         }

                         end=false;

                   }

                 });

           };

        function addZero(num){

           num=parseInt(num);

             if(num<100 && num>=10){

                 return "0"+num;

             }

            else if(num<10){

              return "00"+num;

            }

            else{

              return num;

            }

         }

     </script>

</body>

</html>

不断的调用setTimeout 让时间显示为最先时间

当输入的时间比当前时间小的时候  或者 当前时间比输入时间大的时候 都会不再运行setTimeout了

怎么让链式调用setTimeout停止的更多相关文章

  1. 一个链式调用 setTimeout的例子

    <div> 现在时间是:<input type="text" id="name1" size="16" value=&qu ...

  2. 关于JavaScript中的setTimeout()链式调用和setInterval()探索

    http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...

  3. jQuery的XX如何实现？——2.show与链式调用

    往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...

  4. 学了ES6，还不会Promise的链式调用？🧐

    前言 本文主要讲解promise的链式调用的方法及其最终方案 应用场景 假如开发有个需求是先要请求到第一个数据,然后根据第一个数据再去请求第二个数据,再根据第二个数据去请求第三个数据...一直到最后得 ...

  5. 史上最简单的手写Promise，仅17行代码即可实现Promise链式调用

    Promise的使用相比大家已经孰能生巧了,我这里就不赘述了 先说说我写的Promise的问题吧,无法实现宏任务和微任务里的正确执行(也就是在Promise里面写setTimeout,setInter ...

  6. ES6 Promise 的链式调用

    1.什么是Promise Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息. 2.对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种状态: pending: 初始 ...

  7. 如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用

    1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...

  8. 【Java】子类的链式调用

    记录最近在项目设计中遇到的一个小问题. 前提:有这样两个POJO类,它们都可以通过链式调用的方式来设置其属性值,其中一个类继承了另一个类. 问题:通过链式调用,子类对象访问父类方法后,如何使返回对象仍 ...

  9. hasOwnProperty 递归 简单回调 链式调用

    1.hasOwnProperty 函数的返回值为Boolean类型.如果对象object具有名称为propertyName的属性,则返回true,否则返回false. function Box(){ ...

随机推荐

  1. [转载]五理由 .NET开发者应该关注HTML 5

    http://developer.51cto.com/art/201107/275039.htm

  2. 程序员与HR博弈之：有城府的表达你的兴趣爱好

    “面试”这个过程说简单其实也能很简单.譬如急需招某种技能的单位会因为你拥有某方面的经验或特长立马录取你,哪怕你其他方面表现的很“烂”. 从广义上来讲,很多公司尤其是大中型公司的招聘,并不是因为急缺某岗 ...

  3. 【51Nod】1055 最长等差数列 动态规划

    [题目]1055 最长等差数列 [题意]给定大小为n的互不不同正整数集合,求最长等差数列的长度.\(n \leq 10000\). [算法]动态规划 两个数之间的差是非常重要的信息,设\(f_{i,j ...

  4. 20155303 2016-2017-2 《Java程序设计》第六周学习总结

    20155303 2016-2017-2 <Java程序设计>第六周学习总结 课堂笔记 高效学习法推荐 看视频学习(2h)→ 以代码为中心看课本,思考运行结果并验证(3h)→ 课后作业验证 ...

  5. 在OS X 10.9配置WebDAV服务器联合NSURLSessionUploa…

    CHENYILONG Blog   在OS X 10.9配置WebDAV服务器联合NSURLSessionUploadTask实现文件上传iOS7推出的NSURLSession简化了NSURLConn ...

  6. web.xml 配置中classpath: 与classpath*:的区别——（十一）

    首先 classpath是指 WEB-INF文件夹下的classes目录 解释classes含义: 1.存放各种资源配置文件 eg.init.properties log4j.properties s ...

  7. Linux内核源码分析--内核启动之(2)Image内核启动(汇编部分)（Linux-3.0 ARMv7） 【转】

    转自:http://blog.chinaunix.net/uid-25909619-id-4938389.html 在完成了zImage自解压之后,就跳转到了解压后的内核(也就是vmlinux的bin ...

  8. 让linux中 history显示每条命令的操作时间及操作用户【转】

    一.history 中显示日期时间用户名的办法 history 命令,用来显示命令行上的操作记录 不过默认是仅显示操作命令行本身,而没有记录操作时间等细节 例如 这样,我们查找记录时很麻烦,想回顾下某 ...

  9. node.js 安装 测试

    2014年5月1日 18:48:01 安装: 系统是centos,里边的python版本是2.4,但是node.js 源码tar包安装要求是 2.6 或者 2.7 下载python 2.7编译安装,注 ...

  10. 如何动态修改windows下的host文件

    事件背景:为了测试数据提交后,需要在另一个环境的多个测试节点下去验证测试数据是否添加成功,找了一大堆放法,用了比较笨的方法实现了.不多废话思路如下: 为了万无一失,先备份hosts文件内容: 1.读取 ...