切换导航
网站首页
精品模板
VIP专享
模板推荐
网站模版
站长素材
织梦教程
编程笔记
登录 / 注册
精品模板
VIP专享
网站模版
[仅dedecms]
[仅pbootcms]
站长素材
织梦教程
Pboot教程
编程笔记
编程问答
跟版网
>
编程笔记
>
网页设计
>
javascript 学习笔记（四） 倒计时程序代码-基础知识
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 class="alert alert-info" style="margin-top:20px;">本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！</div> </div> <div class="topcard-tags" style="clear:both;"></div> <ul class="list-group"> <li class="list-group-item"> <a href='/teach/teach-11083.html'>上一篇：基于jquery的合并table相同单元格的插件(精简版)-jquery</a> <a href='/teach/teach-11085.html' class='text-muted pull-right'>下一篇：Jquery判断IE6等浏览器的代码-jquery</a> </li> </ul> </div> </div> </div> <!-- row end --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <div class="title"> <h1>相关文档推荐</h1> </div><!-- l --> <div class="list_con"> <div class="title"> <a href="/teach/teach-25054.html" title="移动端，手机端 响应式布局头部代码">移动端，手机端 响应式布局头部代码</a> </div> <div class="summary">将如下代码加到你网页的头部之间： meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no meta name=apple-mobile-web-app-capable content=yes / meta name=apple-mobile-web-app-statu</div> </div> <!-- l end --> <!-- l --> <div class="list_con"> <div class="title"> <a href="/teach/teach-24685.html" title="javascript实现禁止鼠标右键的功能">javascript实现禁止鼠标右键的功能</a> </div> <div class="summary">遇到网页上有精美图片或者精彩文字想保存时，通常大家都是选中目标后按鼠标右键，在弹出菜单中选择图片另存为或复制来达到我们的目的。但是，目前有许多网页都屏蔽了鼠标右键，那么用js如何实现禁止鼠标右键的功能呢？ 1、与禁止鼠标右键相关的JS说明 script</div> </div> <!-- l end --> <!-- l --> <div class="list_con"> <div class="title"> <a href="/teach/teach-21476.html" title="js实现点击按钮复制文本功能">js实现点击按钮复制文本功能</a> </div> <div class="summary">最近遇到一个需求，需要点击按钮，复制 p 标签中的文本到剪切板 之前做过复制输入框的内容，原以为差不多，结果发现根本行不通 尝试了各种办法，最后使了个障眼法，实现了下面的效果 一、原理分析 浏览器提供了 copy 命令 ，可以复制选中的内容 document.exe</div> </div> <!-- l end --> <!-- l --> <div class="list_con"> <div class="title"> <a href="/teach/teach-21475.html" title="如何去掉html中input的边框">如何去掉html中input的边框</a> </div> <div class="summary">这里不能用css样式选择器选择input组件，设置 border:none;或border: 0px;outline:none;cursor: pointer; 亲测没有用处，只有写这种格式时生效，如下： input type=text style=border:none;</div> </div> <!-- l end --> <!-- l --> <div class="list_con"> <div class="title"> <a href="/teach/teach-20476.html" title="js 判断字符串中是否包含某个字符串">js 判断字符串中是否包含某个字符串</a> </div> <div class="summary">String对象的方法 方法一: indexOf() (推荐) var str = 123;console.log(str.indexOf(3) != -1 ); // trueindexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。 方法二: search() var str = 1</div> </div> <!-- l end --> <!-- l --> <div class="list_con"> <div class="title"> <a href="/teach/teach-20474.html" title="video标签设置autoplay在手机浏览器无法自动播放视频的解决方案">video标签设置autoplay在手机浏览器无法自动播放视频的解决方案</a> </div> <div class="summary">在video标签上加个autoplay属性，在PC端浏览器里面运行流畅，但是在手机浏览器里面打开无法播放。原来现在的手机浏览器是不允许网页中视频自动播放的，只有与用户进行了一次交互动作，才可以播放视频。（音频同理） 方案一： 在页面上加一个弹框，用户点击了</div> </div> <!-- l end --> </div> </div> </div> </div> <!-- left end--> <!-- right --> <div class="col-sm-12 col-md-12 col-lg-3"> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">栏目导航</label> <div class="cate mt-20"><a href="/teach/html5/" title="html教程">html教程</a><a href="/teach/css3/" title="css教程">css教程</a><a href="/teach/ui/" title="前端开发">前端开发</a><a href="/teach/cms/" title="cms教程">cms教程</a><a href="/teach/seo/" title="seo优化">seo优化</a><a href='/teach/webdesign/' class='cur'>网页设计</a><a href="/teach/fwq/" title="服务器">服务器</a><a href="/teach/database/" title="数据库">数据库</a><a href="/teach/pingmian/" title="平面设计">平面设计</a><a href="/teach/diannao/" title="电脑教程">电脑教程</a><a href="/teach/bc/" title="编程教程">编程教程</a><a href="/teach/web/" title="互联网">互联网</a><a href="/teach/app/" title="移动开发">移动开发</a><a href="/teach/php/" title="php编程">php编程</a><a href="/teach/java/" title="java编程">java编程</a><a href="/teach/myweb/" title="建站技巧">建站技巧</a><a href="/teach/python/" title="Python编程">Python编程</a><div class="clearfix"></div> </div> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">最新文章</label> <ul class="n-list"><li> <a href="/teach/teach-8581.html" title="导航菜单跳转后保持选中状态,jquery高亮当前选中菜单">• 导航菜单跳转后保持选中状态,jquery...</a> </li> <li> <a href="/teach/teach-12405.html" title="JQuery TextArea的val()、html()、text()取值与赋值问题">• JQuery TextArea的val()、html()、te...</a> </li> <li> <a href="/teach/teach-8575.html" title="JS+CSS展开收起，并自定义展开内容高度JS代码">• JS+CSS展开收起，并自定义展开内容高...</a> </li> <li> <a href="/teach/teach-17568.html" title="出现Warning: Illegal string offset的解决方法">• 出现Warning: Illegal string offset...</a> </li> <li> <a href="/teach/teach-8576.html" title="js根据时间段显示不同的内容(两种方法)">• js根据时间段显示不同的内容(两种方...</a> </li> <li> <a href="/teach/teach-12382.html" title="正确认识html表格（table）的结构">• 正确认识html表格（table）的结构...</a> </li> <li> <a href="/teach/teach-9905.html" title="如何用CSS让文字居于div的底部">• 如何用CSS让文字居于div的底部...</a> </li> <li> <a href="/teach/teach-8571.html" title="js删除某个DIV里的超链接（a标签）">• js删除某个DIV里的超链接（a标签）...</a> </li> <li> <a href="/teach/teach-17534.html" title="关于网站调用视频站视频，手机端不能播放问题的解决办法">• 关于网站调用视频站视频，手机端不能...</a> </li> <li> <a href="/teach/teach-12606.html" title="HTML textarea 多行文本输入标签">• HTML textarea 多行文本输入标签...</a> </li> <li> <a href="/teach/teach-12392.html" title="百度编辑器(Ueditor)上传本地图片加alt属性">• 百度编辑器(Ueditor)上传本地图片加a...</a> </li> <li> <a href="/teach/teach-11561.html" title="JS判断用户访问终端类型（uaredirect.js）">• JS判断用户访问终端类型（uaredirect...</a> </li> </ul> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门文章</label> <ul class="n-list"><li> <a href="/teach/teach-8581.html" title="导航菜单跳转后保持选中状态,jquery高亮当前选中菜单">• 导航菜单跳转后保持选中状态,jquery...</a> </li> <li> <a href="/teach/teach-12405.html" title="JQuery TextArea的val()、html()、text()取值与赋值问题">• JQuery TextArea的val()、html()、te...</a> </li> <li> <a href="/teach/teach-8575.html" title="JS+CSS展开收起，并自定义展开内容高度JS代码">• JS+CSS展开收起，并自定义展开内容高...</a> </li> <li> <a href="/teach/teach-17568.html" title="出现Warning: Illegal string offset的解决方法">• 出现Warning: Illegal string offset...</a> </li> <li> <a href="/teach/teach-8576.html" title="js根据时间段显示不同的内容(两种方法)">• js根据时间段显示不同的内容(两种方...</a> </li> <li> <a href="/teach/teach-12382.html" title="正确认识html表格（table）的结构">• 正确认识html表格（table）的结构...</a> </li> <li> <a href="/teach/teach-9905.html" title="如何用CSS让文字居于div的底部">• 如何用CSS让文字居于div的底部...</a> </li> <li> <a href="/teach/teach-8571.html" title="js删除某个DIV里的超链接（a标签）">• js删除某个DIV里的超链接（a标签）...</a> </li> <li> <a href="/teach/teach-17534.html" title="关于网站调用视频站视频，手机端不能播放问题的解决办法">• 关于网站调用视频站视频，手机端不能...</a> </li> <li> <a href="/teach/teach-12606.html" title="HTML textarea 多行文本输入标签">• HTML textarea 多行文本输入标签...</a> </li> <li> <a href="/teach/teach-12392.html" title="百度编辑器(Ueditor)上传本地图片加alt属性">• 百度编辑器(Ueditor)上传本地图片加a...</a> </li> <li> <a href="/teach/teach-11561.html" title="JS判断用户访问终端类型（uaredirect.js）">• JS判断用户访问终端类型（uaredirect...</a> </li> </ul> </div> </div> </div> <!-- row end --> <!-- row --> <div class="row row-sm"> <div class="col-sm-12 col-md-12 col-lg-12"> <div class="card"> <label class="main-content-label ">热门标签</label> <div class="topcard-tags"> <a href="/tag/zhimengzixunwang_39_1.html" class="tags tag-1">织梦资讯网</a> <a href="/tag/zhimengmoban_4_1.html" class="tags tag-1">织梦模板</a> <a href="/tag/dede_6144_1.html" class="tags tag-1">dede</a> <a href="/tag/waiyuxuexiao_43_1.html" class="tags tag-2">外语学校</a> <a href="/tag/zhimengguigushi_40_1.html" class="tags tag-1">织梦鬼故事</a> <a href="/tag/jingjiawangzhanyuanma_42_1.html" class="tags tag-1">竞价网站源码</a> <a href="/tag/jingjiapeixunwang_41_1.html" class="tags tag-2">竞价培训网</a> <a href="/tag/menhuwangzhan_45_1.html" class="tags tag-2">门户网站</a> <a href="/tag/zhimengercikaifa_6177_1.html" class="tags tag-2">织梦二次开发</a> <a href="/tag/zhimengxiaohuawang_38_1.html" class="tags tag-2">织梦笑话网</a> <a href="/tag/dedecmsxiaohuawang_37_1.html" class="tags tag-1">dedecms笑话网</a> <a href="/tag/zhimengyuanma_46_1.html" class="tags tag-1">织梦源码</a> <a href="/tag/wangzhanjianshe_36_1.html" class="tags tag-2">网站建设</a> <a href="/tag/gaoxiaotupian_96_1.html" class="tags tag-2">搞笑图片</a> <a href="/tag/zhimengjiaocheng_5_1.html" class="tags tag-2">织梦教程</a> <a href="/tag/lvyouwangzhanyuanma_35_1.html" class="tags tag-2">旅游网站源码</a> <a href="/tag/zhimenglvyouwang_34_1.html" class="tags tag-2">织梦旅游网</a> <a href="/tag/xuexiaopeixun_44_1.html" class="tags tag-1">学校培训</a> <a href="/tag/html5_6001_1.html" class="tags tag-2">html5</a> <a href="/tag/qiyezhimengyuanma_5535_1.html" class="tags tag-2">企业织梦源码</a> <a href="/tag/yiyuanyuanma_47_1.html" class="tags tag-2">医院源码</a> <a href="/tag/houtaiyangshi_95_1.html" class="tags tag-2">后台样式</a> <a href="/tag/yidongyingxiaoye_7086_1.html" class="tags tag-2">移动营销页</a> <a href="/tag/zhengxingyiyuan_97_1.html" class="tags tag-1">整形医院</a> <a href="/tag/daxueyiyuan_98_1.html" class="tags tag-2">大学医院</a> <a href="/tag/xinshoujianzhan_140_1.html" class="tags tag-2">新手建站</a> <a href="/tag/kefudaima_167_1.html" class="tags tag-1">客服代码</a> <a href="/tag/xiyijiweixiu_198_1.html" class="tags tag-2">洗衣机维修</a> <a href="/tag/qiyewangzhan_199_1.html" class="tags tag-2">企业网站</a> <a href="/tag/taobaoke_200_1.html" class="tags tag-2">淘宝客</a> <a href="/tag/daohangcaidan_201_1.html" class="tags tag-1">导航菜单</a> <a href="/tag/jiaoyuwangzhan_202_1.html" class="tags tag-1">教育网站</a> <a href="/tag/xuexiaoyuanma_203_1.html" class="tags tag-1">学校源码</a> <a href="/tag/zhuangxiuwangzhan_204_1.html" class="tags tag-1">装修网站</a> <a href="/tag/zhuangxiumoban_205_1.html" class="tags tag-2">装修模板</a> <a href="/tag/meirongzhengxing_206_1.html" class="tags tag-1">美容整形</a> <a href="/tag/nvxingjiankang_207_1.html" class="tags tag-1">女性健康</a> <a href="/tag/mamawang_208_1.html" class="tags tag-2">妈妈网</a> <a href="/tag/jixieyuanma_209_1.html" class="tags tag-2">机械源码</a> <a href="/tag/jianzhangongsi_210_1.html" class="tags tag-1">建站公司</a> <a href="/tag/zhubaoshoushi_211_1.html" class="tags tag-2">珠宝首饰</a> <a href="/tag/pingguowangzhan_212_1.html" class="tags tag-1">苹果网站</a> <a href="/tag/shoujizixun_213_1.html" class="tags tag-1">手机资讯</a> <a href="/tag/meinvtupian_214_1.html" class="tags tag-2">美女图片</a> <a href="/tag/zhimengmobandabao_215_1.html" class="tags tag-1">织梦模版打包</a> <a href="/tag/fukeyuanma_216_1.html" class="tags tag-1">妇科源码</a> <a href="/tag/anzhuoshichangyuanma_217_1.html" class="tags tag-2">安卓市场源码</a> <a href="/tag/nanxingshishangwang_218_1.html" class="tags tag-2">男性时尚网</a> <a href="/tag/jiankangzhijia_219_1.html" class="tags tag-2">健康之家</a> <a href="/tag/appyingyongwangzhan_220_1.html" class="tags tag-1">app应用网站</a> <a href="/tag/xiaohuawangzhan_221_1.html" class="tags tag-2">笑话网站</a> <a href="/tag/xiazaizhan_222_1.html" class="tags tag-1">下载站</a> <a href="/tag/meinvtupianwang_223_1.html" class="tags tag-1">美女图片网</a> <a href="/tag/zhongyiyuanwangzhan_224_1.html" class="tags tag-2">中医院网站</a> <a href="/tag/jiazhuangwangzhanyuanma_225_1.html" class="tags tag-1">家装网站源码</a> <a href="/tag/QQwangzhan_226_1.html" class="tags tag-2">QQ网站</a> <a href="/tag/biaopaiwangzhan_227_1.html" class="tags tag-2">标牌网站</a> <a href="/tag/moshoushijiewang_228_1.html" class="tags tag-2">魔兽世界网</a> <a href="/tag/taobaokeyuanma_229_1.html" class="tags tag-1">淘宝客源码</a> <a href="/tag/YYwangzhanyuanma_230_1.html" class="tags tag-1">YY网站源码</a> <a href="/tag/bieshushejiwangzhan_231_1.html" class="tags tag-1">别墅设计网站</a> <a href="/tag/fuzhuangdapeiwang_232_1.html" class="tags tag-1">服装搭配网</a> <a href="/tag/baobaoqimingwang_233_1.html" class="tags tag-1">宝宝起名网</a> <a href="/tag/zhanchangwangzhan_234_1.html" class="tags tag-2">站长网站</a> <a href="/tag/hunqingwangzhan_235_1.html" class="tags tag-1">婚庆网站</a> <a href="/tag/naokeyiyuanyuanma_236_1.html" class="tags tag-1">脑科医院源码</a> <a href="/tag/xiaohuayuanma_237_1.html" class="tags tag-1">笑话源码</a> <a href="/tag/gandanyiyuan_238_1.html" class="tags tag-2">肝胆医院</a> <a href="/tag/yiwaihuaiyunyuanma_239_1.html" class="tags tag-1">意外怀孕源码</a> <a href="/tag/gongzuoshi_240_1.html" class="tags tag-1">工作室</a> </div> </div> </div> </div> <!-- row end --> </div> <!-- right end --> </div> </div> <footer id="footer"> <div class="container" style="width:1440px;"> <div class="row hidden-xs"> <div class="col-sm-12 col-md-9 col-lg-9 site-link"> <ul class="list-inline"> <li><a href="https://www.genban.org" title="网站首页">网站首页</a></li> - <li><a target="_blank" href="/aboutus/mianze/" rel="nofollow">免责声明</a></li>- <li><a target="_blank" href="/aboutus/activity/" rel="nofollow">最新公告</a></li>- <li><a target="_blank" href="/aboutus/chonzhi/" rel="nofollow">充值相关</a></li> - <li><a href="https://www.genban.org/sitemap.xml" title="网站地图">网站地图</a></li> </ul> <div class='copyrig'>Copyright © 2021-2022 深圳市沃梦达电子商务有限公司 All Rights Reserved. <a href="https://beian.miit.gov.cn/" target="_blank" rel="nofollow">粤ICP备14083021号</a></div> </div> </div> </div> </div> </footer> <script type="text/javascript" src="https://www.genban.org/skin/js/highlight.min.js"></script> <script src="https://www.genban.org/skin/js/prism.min.js?v=1" charset="UTF-8"></script> <script src="https://www.genban.org/skin/js/prism.js?v=1"></script> </body> </html>
