怎么让链式调用setTimeout停止

<!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停止的更多相关文章

一个链式调用 setTimeout的例子
<div> 现在时间是:<input type="text" id="name1" size="16" value=&qu ...
关于JavaScript中的setTimeout()链式调用和setInterval()探索
http://www.cnblogs.com/Wenwang/archive/2012/01/06/2314283.html http://www.cnblogs.com/yangjunhua/arc ...
jQuery的XX如何实现？——2.show与链式调用
往期回顾: jQuery的XX如何实现?——1.框架 -------------------------- 源码链接:内附实例代码 jQuery使用许久了,但是有一些API的实现实在想不通.于是抽空看 ...
学了ES6，还不会Promise的链式调用？🧐
前言本文主要讲解promise的链式调用的方法及其最终方案应用场景假如开发有个需求是先要请求到第一个数据,然后根据第一个数据再去请求第二个数据,再根据第二个数据去请求第三个数据...一直到最后得 ...
史上最简单的手写Promise，仅17行代码即可实现Promise链式调用
Promise的使用相比大家已经孰能生巧了,我这里就不赘述了先说说我写的Promise的问题吧,无法实现宏任务和微任务里的正确执行(也就是在Promise里面写setTimeout,setInter ...
ES6 Promise 的链式调用
1.什么是Promise Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息. 2.对象的状态不受外界影响.Promise 对象代表一个异步操作,有三种状态: pending: 初始 ...
如何写 JS 的链式调用 ---》JS 设计模式《----方法的链式调用
1.以$ 函数为例.通常返回一个HTML元素或一个元素集合. 代码如下: function $(){ var elements = []; ;i<arguments.length;i++){ v ...
【Java】子类的链式调用
记录最近在项目设计中遇到的一个小问题. 前提:有这样两个POJO类,它们都可以通过链式调用的方式来设置其属性值,其中一个类继承了另一个类. 问题:通过链式调用,子类对象访问父类方法后,如何使返回对象仍 ...
hasOwnProperty 递归简单回调链式调用
1.hasOwnProperty 函数的返回值为Boolean类型.如果对象object具有名称为propertyName的属性,则返回true,否则返回false. function Box(){ ...

随机推荐

Firefox滚动残影(转)
Firefox滚动残影 Firefox滚动残影这文章放在草稿箱有一阵子了,之前的3系列都有这BUG,当正想发表这文章的时候,和我沟通刚刚升级的FF4已修复此BUG,所以搁置一阵在考虑到这文章还有没 ...
JavaScript继承详解（三）
在第一章中,我们使用构造函数和原型的方式在JavaScript的世界中实现了类和继承, 但是存在很多问题.这一章我们将会逐一分析这些问题,并给出解决方案. 注:本章中的jClass的实现参考了Simp ...
02 workerman之GatewayWorker简单的demo 实现两端发送消息
前端代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <t ...
【干货】使用EnCase来分析windows 7文件系统------认识元数据记录$MFT，数据恢复
来源:Unit 6: Windows File Systems and Registry 6.1 Windows File Systems and Registry Windows NTFS File ...
df -h执行卡住不动问题解决【转】
昨天生产环境报日志写不进去了,因此登陆线上环境后,习惯用df -h命令查看空间使用情况,结果发现该命令执行半天也没有返回. 因此使用mount命令查看该机器上的目录: [conversant@swi ...
mac rsync文件传输
rsync -avz filename servername:/filename --exclude '*.log' --exclude '*.pyc' --exclude '*.db' --excl ...
小白学习安全测试（一）——Http协议基础
Http协议基础 Web技术发展[http://www.cnblogs.com/ProgrammerGE/articles/1824657.html] 静态WEB[网页] 动态WEB 属于一种应用程序 ...
iOS 中 h5 页面 iframe 调用高度自扩展问题及解决
开发需求需要在 h5 中用 iframe 中调用一个其他公司开发的 html 页面. 简单的插入 <iframe /> 并设置宽高后,发现在 Android 手机浏览器上打开可以正常运行, ...
APK方法数超过65535及MultiDex解决方案
以下参考自官方文档配置方法数超过 64K 的应用随着 Android 平台的持续成长,Android 应用的大小也在增加.当您的应用及其引用的库达到特定大小时,您会遇到构建错误,指明您的应用已达到 ...
(转)Python函数式编程——map()、reduce()
转自:http://www.jianshu.com/p/7fe3408e6048 1.map(func,seq1[,seq2...]) Python 函数式编程中的map()函数是将func作用于se ...

怎么让链式调用setTimeout停止

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

随机推荐

热门专题