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

随机推荐

开启SSI配置使shtml支持include公用的页头页脚
编写编写项目众多静态文件时,能像php等开发语言一样使用include将页面公有的header/footer/sidebar作为公用.独立.单一的文件引入到各页面上,这样修改这些页面公用部分时就能单独 ...
javascript模块模式
目前模块模式得到了广泛应用,因为它提供了结构化的思想并且有助于组织日益增长的代码.模块模式提供了一种创建自包含非耦合代码片段有利工具,可以将它视为黑盒功能. 板栗: var array = (func ...
javascript多种继承方式(函数式，浅复制，深复制，函数绑定和借用)
函数式继承: var object = function (obj) { if (typeof Object.create !== 'undefined') { return Object.creat ...
nginx1配置文件
1,查看日志:cat /usr/local/nginx/logs/error.log 2,编辑配置文件:vi /usr/local/nginx/conf/nginx.conf 3,内容:server ...
Windows下设置oracle数据库定时备份
1编写备份脚本 echo backup oracle database...... echo %~dp0 set file_dir=%~dp0 echo backup time...... set & ...
Owin中间件动手做
摘要:本文目的是了解Owin基本原理.讲述如何从控制台创建一个自宿主的OwinHost,然后再编写一两个中间件准备工作首先通过VisualStudio创建一个控制台应用然后添加Owin的Nuge ...
搜索引擎ElasticSearchV5.4.2系列三之ES使用
相关博文: 搜索引擎ElasticSearchV5.4.2系列一之ES介绍搜索引擎ElasticSearchV5.4.2系列二之ElasticSearchV5.4.2+kibanaV5.4.2+x- ...
ASP.NET MVC 路由学习
参考 http://www.cnblogs.com/yaozhenfa/p/asp_net_mvc_route_2.html 说明 1."解决与物理路径的冲突"这段教程这里如果不起 ...
MVC Autofac依赖注入
通过Dll实现全部类的属性注入,该演示实例主要通过多层架构中单一的对象方式来演示,没有采取接口的方式, 新建AutoFacHelper类,如下代码: public class AutoFacHelpe ...
数组中累加和小于等于k的最长子数组
问题描述: 给定一个无序数组arr,其中元素可正.可负.可0,给定一个整数 k.求arr所有的子数组中累加和小于或等于k的最长子数组长度.例如:arr=[3,-2,-4,0,6],k=-2,相加和小于 ...

怎么让链式调用setTimeout停止

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

随机推荐

热门专题