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

随机推荐

.NET面试题系列（九）C# 结构体与类的区别
谈一下什么时候使用结构,什么使用类. 我们知道,结构存储在栈中,而栈有1个特点,就是空间较小,但是访问速度较快,堆空间较大,但是访问速度相对较慢.所以当我们描述1个轻量级对象的时候,可以将其定义为结构 ...
[整理].net中的延迟初始化器
LazyInitializer类 private void EnsureInitialized() { LazyInitializer.EnsureInitialized(ref _initializ ...
CString 与其它数据类型转换问题
CString 头文件#include <afx.h> string 头文件#include <string.h> CString 转char * CString cstr; ...
rstful登陆认证并检查session是否过期
一:restful用户视图 #!/usr/bin/env python # -*- coding:UTF-8 -*- # Author:Leslie-x from users import model ...
mysql high availability 概述
一.什么是高可用性 1.可用性是指服务不间断运转的时间,通常用百分比来表示,例如 99.999%表示每年最多允许5分钟的宕机时间 2.可用性的效果和开销比例呈线性增长 3.可用性的意义往往也不尽相同, ...
数据库SQL语句性能优化
选择最有效率的表名顺序 ORACLE的解析器按照从右到左的顺序处理FROM子句中的表名,FROM子句中写在最后的表(基础表 driving table)将被最先处理,在FROM子句中包含多个表的情况下 ...
springcloud中的API网关服务Zuul
到目前为止,我们Spring Cloud中的内容已经介绍了很多了,Ribbon.Hystrix.Feign这些知识点大家都耳熟能详了,我们在前文也提到过微服务就是把一个大的项目拆分成很多小的独立模块, ...
springcloud服务安全连接
Spring Cloud可以增加HTTP Basic认证来增加服务连接的安全性. 1.加入security启动器在maven配置文件中加入Spring Boot的security启动器. <d ...
springcloud注解@EnableDiscoveryClient与@EnableEurekaC
spring cloud中discovery service有许多种实现(eureka.consul.zookeeper等等),@EnableDiscoveryClient基于spring-cloud ...
Hibernate 二级缓存疑难点
一级缓存:缓存实体二级缓存:缓存实体 Hibernate查询缓存缓存的是查询出来的实体的部分属性结果集和实体的ID(注意这里不是实体). Hibernate查询缓存:对List起作用.但是Hiber ...

怎么让链式调用setTimeout停止

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

随机推荐

热门专题