<!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了

最新文章

  1. CREATE TABLE 表名 AS SELECT 语句
  2. Unity Lightmap动态加载研究
  3. spring bean的重新加载
  4. log4j日志-liu
  5. 邻接表无向图(三)之 Java详解
  6. Graph database_neo4j 底层存储结构分析(3)
  7. PHP之缩略图
  8. Configure xterm Fonts and Colors for Your Eyeball
  9. Enterprise Library 4 数据访问应用程序块
  10. PHP文章管理
  11. 用C#实现生成PDF文档
  12. jquery.cookie用法详细解析,封装的操作cookie的库有jquery.cookie.js
  13. GitBook 配置说明
  14. 1682: [Usaco2005 Mar]Out of Hay 干草危机
  15. Combine Two Tables
  16. Linux时间子系统之七:定时器的应用--msleep(),hrtimer_nanosleep()
  17. VSCode中快捷输入HTML代码
  18. 5 个免费的受欢迎的 SQLite 管理工具【申明:来源于网络】
  19. 自定义JDBC链接池
  20. C# ZipHelper C#公共类 -- ICSharpCode.SharpZipLib.dll实现压缩和解压

热门文章

  1. ASP.NET记录错误日志的方式
  2. 流行的软件工程过程--Rational统一过程!
  3. HTML5 移动开发(移动设备检测及对HTML5的支持)
  4. 使用 scm-manager 搭建 git/svn 代码管理仓库(二)
  5. mysql区间范围查询问题
  6. 通过图片获取gps地理位置
  7. 重温CSS之基础
  8. https-配置使用HTTPS的ASP.NET Web应用
  9. java 其它可选方法
  10. 《JavaScript 高级程序设计》第一章:简介