html教程
css教程
前端开发
cms教程
seo优化
网页设计
服务器
数据库
平面设计
电脑教程
编程教程
互联网
移动开发
php编程
java编程
建站技巧
Python编程
javascript 学习笔记（四） 倒计时程序代码-基础知识
时间：2016-04-10
首先看全部完整代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> <title>countDown test</title> </head> <body> <p> <label for="deadline">截止日期</label> <input type="text" value="2011-06-11" id="deadline" /> <input type="button" value="开始倒计时" onclick="window.setInterval('countDown(\'deadline\')', 1000)" /></p> <p id="showTime"></p> </body> </html> <p class="codetool">运行代码 保存代码</p><BR>html部分代码： <BR>可在文本框中输入倒计时的时间，如果当前时间小于截止时间，则正常返回，反之，则返回距离截止日期到现在的时间 <BR><div class="codetitle"><span onmousemove="addCopy('code23525')" id="addCopy_code23525"></span> 代码如下:</div><div class="codebody" id="code23525"> <BR><p> <BR><label for="deadline">截止日期</label> <BR><input type="text" value="2011-06-11" id="deadline" /> <BR><input type="button" value="开始倒计时" onclick="window.setInterval('countDown(\'deadline\')', 1000)" /> <BR></p> <BR><p id="showTime"></p> <BR></div> <BR>javascript部分代码： <BR><div class="codetitle"><span onmousemove="addCopy('code1498')" id="addCopy_code1498"></span> 代码如下:</div><div class="codebody" id="code1498"> <BR>function countDown(endDate) { <BR>var now = new Date(); <BR>var deadtime = document.getElementById(endDate); <BR>var deadline = new Date(deadtime.value); <BR>//本地时间与格林威治标准时间 (GMT) 的分钟差 <BR>var timeDiff = now.getTimezoneOffset(); <BR>//此处有些不解，如果把分钟差转化成毫秒应该是timeDiff*60*1000，但是这样返回的数据不正确！ <BR>var leave = Math.abs(deadline.getTime() - now.getTime() + timeDiff*60); <BR>var minute = 1000 * 60; <BR>var hour = minute * 60; <BR>var day = hour * 24; <BR>var countDay = Math.floor(leave/day); <BR>//var countHour = Math.floor((leave - day*countDay)/hour); 两种计算思路 <BR>var countHour = Math.floor(leave/hour - countDay*24); <BR>var countMinute = Math.floor(leave/minute) - countDay*24*60 - countHour*60; <BR>var countSecond = Math.floor(leave/1000) - countDay*24*60*60 - countHour*60*60 - countMinute*60; <BR>var outStr = ""; <BR>if(deadline < now) { <BR>outStr = "距离"+deadtime.value+"已有"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒"; <BR>} else { <BR>outStr = "距离"+deadtime.value+"还差"+countDay+"天"+countHour+"小时"+countMinute+"分"+countSecond+"秒"; <BR>} <BR>var showTime = document.getElementById("showTime"); <BR>showTime.innerHTML = outStr; <BR>} <BR></div></div> </div><div class="spage"></div> <div class="pre_nex"> <em class="pre"><a href='/teach/teach-11083.html' class='pages'>上一条：基于jquery的合并table相同单元格的插件(精简版)-jquery</a> </em> <em class="nex"><a href='/teach/teach-11085.html' class='pages'>下一条:Jquery判断IE6等浏览器的代码-jquery</a> </em> </div> <div class="b-box"> <h4>相关文章</h4> <ul class="l_pic_m clear"><li><a title="移动端，手机端 响应式布局头部代码" target="_blank" href="/teach/teach-25054.html"><img alt="移动端，手机端 响应式布局头部代码" src="https://img.genban.org/nopic.gif"><strong>移动端，手机端 响应式布局头部代码</strong>将如下代码加到你网页的头部之间： meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no </a></li> <li><a title="javascript实现禁止鼠标右键的功能" target="_blank" href="/teach/teach-24685.html"><img alt="javascript实现禁止鼠标右键的功能" src="https://img.genban.org/nopic.gif"><strong>javascript实现禁止鼠标右键的功能</strong>遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择图片另存为或复制来达到我们的目的。但是，目前有许多网页都屏</a></li> <li><a title="js实现点击按钮复制文本功能" target="_blank" href="/teach/teach-21476.html"><img alt="js实现点击按钮复制文本功能" src="https://img.genban.org/allimg/200330/1-200330113343621-lp.gif"><strong>js实现点击按钮复制文本功能</strong>最近遇到一个需求，需要点击按钮，复制 p 标签中的文本到剪切板 之前做过复制输入框的内容，原以为差不多，结果发现根本行不通 尝试了各种办法，最后使了个障眼</a></li> <li><a title="如何去掉html中input的边框" target="_blank" href="/teach/teach-21475.html"><img alt="如何去掉html中input的边框" src="https://img.genban.org/nopic.gif"><strong>如何去掉html中input的边框</strong>这里不能用css样式选择器选择input组件，设置 border:none;或border: 0px;outline:none;cursor: pointer; 亲测没有用处，只有写这种格式时生效，如下： input ty</a></li> <li><a title="js 判断字符串中是否包含某个字符串" target="_blank" href="/teach/teach-20476.html"><img alt="js 判断字符串中是否包含某个字符串" src="https://img.genban.org/nopic.gif"><strong>js 判断字符串中是否包含某个字符串</strong>String对象的方法 方法一: indexOf() (推荐) var str = 123;console.log(str.indexOf(3) != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首</a></li> <li><a title="video标签设置autoplay在手机浏览器无法自动播放视频的解决方案" target="_blank" href="/teach/teach-20474.html"><img alt="video标签设置autoplay在手机浏览器无法自动播放视频的解决方案" src="https://img.genban.org/nopic.gif"><strong>video标签设置autoplay在手机浏览器无法自动播放视频的解决方案</strong>在video标签上加个autoplay属性，在PC端浏览器里面运行流畅，但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的，只有与用</a></li> </ul> </div> <div class="b-box"> <h4>最新文章</h4> <ul class="l_pic_m clear"><li><a title="js实现点击按钮复制文本功能" target="_blank" href="/teach/teach-21476.html"><img alt="js实现点击按钮复制文本功能" src="https://img.genban.org/allimg/200330/1-200330113343621-lp.gif"><strong>js实现点击按钮复制文本功能</strong>最近遇到一个需求，需要点击按钮，复制 p 标签中的文本到剪切板 之前做过复制输入框的内容，原以为差不多，结果发现根本行不通 尝试了各种办法，最后使了个障眼法，实现了</a></li> <li><a title="何为百度移动网站MIP？MIP对网站有什么帮助？" target="_blank" href="/teach/teach-20435.html"><img alt="何为百度移动网站MIP？MIP对网站有什么帮助？" src="https://img.genban.org/allimg/190504/163431KW-0-lp.jpg"><strong>何为百度移动网站MIP？MIP对网站有什么帮助？</strong>随着移动互联网的发展，网友们对于移动产品服务体验要求也越来越高，当然了像移动网站体验也包括在内，随着互联网技术的发展，现在移动网站页面技术也一直在提升和创新，今</a></li> </ul> <ul class="l_text clear"><li><a title="js实现点击按钮复制文本功能" target="_blank" href="/teach/teach-21476.html">js实现点击按钮复制文本功能</a></li> <li><a title="如何去掉html中input的边框" target="_blank" href="/teach/teach-21475.html">如何去掉html中input的边框</a></li> <li><a title="js 判断字符串中是否包含某个字符串" target="_blank" href="/teach/teach-20476.html">js 判断字符串中是否包含某个字符串</a></li> <li><a title="织梦DedeCms做SEO优化必做的步骤" target="_blank" href="/teach/teach-20473.html">织梦DedeCms做SEO优化必做的步骤</a></li> <li><a title="video标签设置autoplay在手机浏览器无法自动播放视频的解决方案" target="_blank" href="/teach/teach-20474.html">video标签设置autoplay在手机浏览器无法自动播放视频的解决方案</a></li> <li><a title="让网页标签页头部有新消息提醒和Title标题文字滚动显示效果" target="_blank" href="/teach/teach-20457.html">让网页标签页头部有新消息提醒和Title标题文字滚动显示效果</a></li> <li><a title="怎么拿到input file上传的文件名字显示到页面中" target="_blank" href="/teach/teach-20452.html">怎么拿到input file上传的文件名字显示到页面中</a></li> <li><a title="何为百度移动网站MIP？MIP对网站有什么帮助？" target="_blank" href="/teach/teach-20435.html">何为百度移动网站MIP？MIP对网站有什么帮助？</a></li> <li><a title="swiper无法自动播放的解决办法" target="_blank" href="/teach/teach-20392.html">swiper无法自动播放的解决办法</a></li> <li><a title="bootstrap在移动浏览器下响应式不起作用的解决方法" target="_blank" href="/teach/teach-20318.html">bootstrap在移动浏览器下响应式不起作用的解决方法</a></li> </ul> </div> </div> <div class="footer"><p>Copyright © 2021-2022 深圳市沃梦达电子商务有限公司 All Rights Reserved. </p><span style="display:none"><div style="display:none"> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?73d99e44a3343dda992d05b36d7c80e9"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> </div></span></div> <a href="#top"><div id="goto_top" class="goto_top"></div></a> <script type="text/javascript" src="/assets/js/highlight.min.js"></script> <script src="/assets/js/prism.min.js?v=1" charset="UTF-8"></script> </body> </html>