怎么让链式调用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(){ ...

随机推荐

livereload使用方法
搞这个自动刷新的插件搞了好几个小时了还没搞明白,快被气死了,想改用browser-sync结果npm又一直转啊转一直卡死. 刚才终于神奇地搞定了,结果发现还是我自己智商太低...大概的经过是这样的.. ...
[iOS]图片高清度太高, 导致内存过大Crash
先说一下状况, 后台提供的图片太高清了, 每个图片都在2-4MB, iOS上每个页面需要同时下载并展示10-15张. 这个时候, 如果我多滑动collectionView几次, 直接App就崩溃了(r ...
新建 Spring Mvc Web + Maven 的 maven 错误 (二)
新建项目后,可能由于哪边配置不正确,或也可能是编码问题,就有可能在创建初始就可能发生错误: 这是 pom.xml 中提示的错误,有的人说要删除 maven 的本地仓库位置:c:\用户[Users]\A ...
20155302 2016-2017-2《Java程序设计》第五周学习总结
20155302 2016-2017-2 <Java程序设计>第5周学习总结教材学习内容总结异常类从哪里来?有两个来源,一是Java语言本身定义的一些基本异常类型,二是用户通过继承Ex ...
Vue.js几个简单用法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Android手机间无线互传功能探索及实现
年前研究了一下Android如何实现无线互传的功能,写了个小demo,最近无事,遂整理一下,与各位共享.前期调研发现,Android想要实现无线互传有以下几种技术:1,Bluetooth通行已久,简单 ...
cmd命令，bat脚本
1.cd /d D:\>cd mysql D:\mysql>cd /d C:/TEMP C:\Temp>cd /? 显示当前目录名或改变当前目录. CHDIR [/D] [drive ...
networkManger介绍
http://www.linuxidc.com/Linux/2013-08/88809.htm
在Windows环境中利用Responder工具窃取NTLMv2哈希
在Windows环境中利用Responder工具窃取NTLMv2哈希翻译自:https://github.com/incredibleindishell/Windows-AD-environment ...
opencv学习笔记（八）IplImage* 访问图像像素的值
opencv2.1版本之前使用IplImage*数据结构来表示图像,2.1之后的版本使用图像容器Mat来存储.IplImage结构体如下所示. typedef struct _IplImage { i ...

怎么让链式调用setTimeout停止

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

随机推荐

热门专题