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 相关文章推荐
快速解决js开发下拉框中blur与click冲突
Oct 10 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
Vue中render方法的使用详解
Jan 26 Javascript
vue二级路由设置方法
Feb 09 Javascript
修改node.js默认的npm安装目录实例
May 15 Javascript
vue-video-player 通过自定义按钮组件实现全屏切换效果【推荐】
Aug 29 Javascript
vue实现分页组件
Jun 16 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
javascript合并两个数组最简单的实现方法
Sep 14 Javascript
js实现录音上传功能
Nov 22 Javascript
vue 导出文件,携带请求头token操作
Sep 10 Javascript
JS实现简易日历效果
Jan 25 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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
破解Session cookie的方法
2006/07/28 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
2015/05/14 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
浅谈JS中json数据的处理
2016/06/30 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
jQuery EasyUI中的日期控件DateBox修改方法
2016/11/09 Javascript
微信小程序 UI与容器组件总结
2017/02/21 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
python中二维阵列的变换实例
2014/10/09 Python
Python基于正则表达式实现检查文件内容的方法【文件检索】
2017/08/30 Python
Python基于time模块求程序运行时间的方法
2017/09/18 Python
python和c语言的主要区别总结
2019/07/07 Python
使用python绘制二维图形示例
2019/11/22 Python
python 爬取疫情数据的源码
2020/02/09 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Django-imagekit的使用详解
2020/07/06 Python
Python爬取微信小程序通用方法代码实例详解
2020/09/29 Python
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
de Bijenkorf比利时官网:荷兰最知名的百货商店
2017/06/29 全球购物
美国五金商店:Ace Hardware
2018/03/27 全球购物
程序员机试试题汇总
2012/03/07 面试题
表演方阵解说词
2014/02/08 职场文书
投资合作协议书范本
2014/04/17 职场文书
产品发布会策划方案
2014/05/12 职场文书
教师党员个人整改措施材料
2014/09/16 职场文书
民政局离婚协议书范本
2014/10/20 职场文书
检讨书大全
2015/01/27 职场文书
实习指导老师意见
2015/06/04 职场文书
主婚人致辞精选
2015/07/28 职场文书
PHP新手指南
2021/04/01 PHP
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android