js实现网页倒计时、网站已运行时间功能的代码3例
2014-04-14 00:00
1101 查看
1、jQuery.countdown插件
显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)
一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义。
目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/
例如:
输出结果:50 周 01 天 07 小时 18 分 41 秒
注意:如果需要一共还有多少天数用%D,参数说明:
2、显示格式:距离结束时间还有:00天05小时25分30秒(秒为跑秒)
3、 显示格式:已运行0 年 1 天 0 小时 4 分钟 35 秒(秒为跑秒)
显示格式:50 周 01 天 07 小时 18 分 41 秒(秒为跑秒)
一个页面可以有多个倒计时实例,可以停止和开始,它没有提供太多的功能,但时间格式和输出的尺寸都可以自定义。
目前最新版v2.0.2,官方地址http://hilios.github.io/jQuery.countdown/
例如:
<div id="getting-started"></div> <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="http://hilios.github.io/jQuery.countdown/javascripts/jquery.countdown.min.js"></script> <script type="text/javascript"> $('#getting-started').countdown('2016/01/01 00:00', function(event) { $(this).html(event.strftime('%w 周 %d 天 %H:%M:%S')); }); </script>
输出结果:50 周 01 天 07 小时 18 分 41 秒
注意:如果需要一共还有多少天数用%D,参数说明:
Y: "years" m: "months" w: "weeks" d: "days" D: "totalDays" H: "hours" M: "minutes" S: "seconds"
2、显示格式:距离结束时间还有:00天05小时25分30秒(秒为跑秒)
<div id="time" class="time"></div> <script language=javascript> function show_date_time(){ window.setTimeout("show_date_time()", 1000); target=new Date(2014,0,15,17,0,0); //注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为8月,则参数应该是7。 today=new Date(); timeold=(target.getTime()-today.getTime()); sectimeold=timeold/1000 secondsold=Math.floor(sectimeold); msPerDay=24*60*60*1000 e_daysold=timeold/msPerDay daysold=Math.floor(e_daysold); e_hrsold=(e_daysold-daysold)*24; hrsold=Math.floor(e_hrsold); e_minsold=(e_hrsold-hrsold)*60; minsold=Math.floor((e_hrsold-hrsold)*60); seconds=Math.floor((e_minsold-minsold)*60); if (daysold<0) { document.getElementById("time").innerHTML="逾期,倒计时已经失效"; } else{ if (daysold<10) {daysold="0"+daysold} if (hrsold<10) {hrsold="0"+hrsold} if (minsold<10) {minsold="0"+minsold} if (seconds<10) {seconds="0"+seconds} if (daysold>0) { document.getElementById("time").innerHTML="距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"; } else document.getElementById("time").innerHTML="<font color=red>距离结束时间还有:"+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒</font>"; //结束时间小于1天,字体呈红色提醒 } } show_date_time(); </script>
3、 显示格式:已运行0 年 1 天 0 小时 4 分钟 35 秒(秒为跑秒)
<span id="sitetime"></span> <script language=javascript> function siteTime(){ window.setTimeout("siteTime()", 1000); var seconds = 1000 var minutes = seconds * 60 var hours = minutes * 60 var days = hours * 24 var years = days * 365 var today = new Date() var todayYear = today.getFullYear() var todayMonth = today.getMonth() var todayDate = today.getDate() var todayHour = today.getHours() var todayMinute = today.getMinutes() var todaySecond = today.getSeconds() /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳) year - 作为date对象的年份,为4位年份值 month - 0-11之间的整数,做为date对象的月份 day - 1-31之间的整数,做为date对象的天数 hours - 0(午夜24点)-23之间的整数,做为date对象的小时数 minutes - 0-59之间的整数,做为date对象的分钟数 seconds - 0-59之间的整数,做为date对象的秒数 microseconds - 0-999之间的整数,做为date对象的毫秒数 */ var t1 = Date.UTC(2014,0,14,11,19,00) var t2 = Date.UTC(todayYear,todayMonth,todayDate,todayHour,todayMinute,todaySecond) var diff = t2-t1 var diffYears = Math.floor(diff/years) var diffDays = Math.floor((diff/days)-diffYears*365) var diffHours = Math.floor((diff-(diffYears*365+diffDays)*days)/hours) var diffMinutes = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours)/minutes) var diffSeconds = Math.floor((diff-(diffYears*365+diffDays)*days-diffHours*hours-diffMinutes*minutes)/seconds) document.getElementById("sitetime").innerHTML=" 已运行"+diffYears+" 年 "+diffDays+" 天 "+diffHours+" 小时 "+diffMinutes+" 分钟 "+diffSeconds+" 秒" } siteTime() </script>
相关文章推荐
- TheCodePlayer:一个可以查看在线演示代码编写过程的网站
- 急聘,需要一名系统架构师-IOS方面的(深圳)
- LAMP之用户访问网站基本流程图
- 网站二级域名不得不说的事
- 网站图片处理
- 转 web.config设置之system.webServer 详细介绍,为网站设置默认文档
- Qemu Internals:Overall architecture and threading model--qemu架构和线程模型
- 三层架构与MVC的区别
- 从三层架构到MVC
- InnoDB存储引擎
- 网站标题小图标
- 国内2大Git代码托管网站
- 网站上线
- JSP(6):网站框架的改进mv模式
- 京东架构师“强娃”对CloudFoundry的架构优化
- graphviz画服务器架构图
- 在自己的网站添加关注新浪关注按钮
- 软件架构的理解
- linux学习之LNMP系统架构的搭建
- 网站域名不备案影响百度关键词排名吗?