效果:
实现的代码:
<html> <head> <title>倒计时-木庄博客整理</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body onload="clock();return true" text="red"> 距离2020年元旦还有 <br /> <!--倒计时设置代码--> <script language="JavaScript" type="text/javascript"> <!-- hide script from old browser var DifferenceHour = -1 var DifferenceMinute = -1 var DifferenceSecond = -1 var Tday = new Date("Jan 1, 2020 00:00:00") //**倒计时时间点-注意格式 var daysms = 24 * 60 * 60 * 1000 var hoursms = 60 * 60 * 1000 var Secondms = 60 * 1000 var microsecond = 1000 function clock() { var time = new Date() var hour = time.getHours() var minute = time.getMinutes() var second = time.getSeconds() var timevalue = ""+((hour > 12) ? hour-12:hour) timevalue +=((minute < 10) ? ":0":":")+minute timevalue +=((second < 10) ? ":0":":")+second timevalue +=((hour >12 ) ? " PM":" AM") var convertHour = DifferenceHour var convertMinute = DifferenceMinute var convertSecond = DifferenceSecond var Diffms = Tday.getTime() - time.getTime() DifferenceHour = Math.floor(Diffms / daysms) Diffms -= DifferenceHour * daysms DifferenceMinute = Math.floor(Diffms / hoursms) Diffms -= DifferenceMinute * hoursms DifferenceSecond = Math.floor(Diffms / Secondms) Diffms -= DifferenceSecond * Secondms var dSecs = Math.floor(Diffms / microsecond) if(convertHour != DifferenceHour) document.formnow.dd.value=DifferenceHour if(convertMinute != DifferenceMinute) document.formnow.hh.value=DifferenceMinute if(convertSecond != DifferenceSecond) document.formnow.mm.value=DifferenceSecond document.formnow.ss.value=dSecs setTimeout("clock()",1000) } </script> <!--BODY里面的ONLOAD注意--> <!--实现显示--> <form name="formnow"> <input value="1" name="dd" style="border: 0; width:36px;" size="2" type="text" /> 天 <input value="1" name="hh" style="border: 0;" size="2" type="text" /> 小时 <input value="1" name="mm" style="border: 0;" size="2" type="text" /> 分 <input value="1" name="ss" style="border: 0;" size="2" type="text"> 秒 </form> <!--倒计时完毕--> </body> </html>
相关阅读 >>
dreamweaver怎么使用标签及代码设计表格?_dreamweaver教程_网页制作
dreamweaver怎么快速对齐代码? dw对齐代码的设置方法_dreamweaver教程_网页制作
更多相关阅读请进入《代码》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者