js实现网页倒计时、网站已运行时间功能的代码3例


Posted in Javascript onApril 14, 2014

1、jQuery.countdown插件

显示格式: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>
Javascript 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
js实现的复制兼容chrome和IE
Apr 03 Javascript
jQuery页面加载初始化常用的三种方法
Jun 04 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
Aug 06 Javascript
JS动态日期时间的获取方法
Sep 28 Javascript
js判断手机号运营商的方法
Oct 23 Javascript
深入理解bootstrap框架之入门准备
Oct 09 Javascript
jstree的简单实例
Dec 01 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
Vue项目中Api的组织和返回数据处理的操作
Nov 04 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 #Javascript
javascript中的括号()用法小结
Apr 14 #Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
Apr 12 #Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 #Javascript
JS获取URL中参数值(QueryString)的4种方法分享
Apr 12 #Javascript
javascript对JSON数据排序的3个例子
Apr 12 #Javascript
Js保留小数点的4种效果实现代码分享
Apr 12 #Javascript
You might like
php中rename函数用法分析
2014/11/15 PHP
PHP版微信小店接口开发实例
2016/11/12 PHP
PHP实现的XML操作类【XML Library】
2016/12/29 PHP
PHP7基于curl实现的上传图片功能
2018/05/11 PHP
浅谈php常用的7大框架的优缺点
2020/07/20 PHP
js+css在交互上的应用
2010/07/18 Javascript
引入autocomplete组件时JS报未结束字符串常量错误
2014/03/19 Javascript
javascript arguments使用示例
2014/12/16 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
2015/03/11 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
2015/11/24 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
基于JS实现checkbox全选功能实例代码
2016/10/31 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
Vue中如何实现轮播图的示例代码
2017/07/27 Javascript
初学者AngularJS的环境搭建过程
2017/10/27 Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
2017/12/14 Javascript
实战node静态文件服务器的示例代码
2018/03/08 Javascript
layer弹出层父子页面事件相互调用方法
2018/08/17 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python logging模块学习笔记
2014/05/24 Python
详解Python的Django框架中的Cookie相关处理
2015/07/22 Python
详解Python中 __get__和__getattr__和__getattribute__的区别
2016/06/16 Python
Python遍历numpy数组的实例
2018/04/04 Python
详解Python3中ceil()函数用法
2019/02/19 Python
windows下numpy下载与安装图文教程
2019/04/02 Python
matplotlib基础绘图命令之imshow的使用
2020/08/13 Python
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
美国最大和最受信任的二手轮胎商店:Bestusedtires.com
2020/06/02 全球购物
七一表彰活动方案
2014/01/18 职场文书
2014学年自我鉴定
2014/02/23 职场文书
外语系大学生自荐信范文
2014/03/01 职场文书
太太口服液广告词
2014/03/20 职场文书
安全伴我行演讲稿
2014/09/04 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
MySQL中datetime时间字段的四舍五入操作
2021/10/05 MySQL