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 获取class的元素的方法 以及创建方法getElementsByClassName
Mar 11 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
jquery 取子节点及当前节点属性值
Jul 25 Javascript
jQuery实现自定义事件的方法
Apr 17 Javascript
ES6生成器用法实例分析
Apr 10 Javascript
利用JS hash制作单页Web应用的方法详解
Oct 10 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
Aug 22 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
微信小程序image图片加载完成监听
Aug 31 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
Jun 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
Classes and Objects in PHP5-面向对象编程 [1]
2006/10/09 PHP
基于Linux调试工具strace与gdb的常用命令总结
2013/06/03 PHP
thinkphp文件引用与分支结构用法实例
2014/11/26 PHP
php防止用户重复提交表单
2015/11/02 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
详解PHP中curl_multi并发的实现
2020/06/08 PHP
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
JavaScript转换农历类实现及调用方法
2013/01/27 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
Javascript 遮罩层和加载效果代码
2013/08/01 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
2014/05/21 Javascript
提升PHP安全:8个必须修改的PHP默认配置
2014/11/17 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
JS实现选择TextArea内文本的方法
2015/08/03 Javascript
浅谈JavaScript中的分支结构
2016/07/01 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
如何使用bootstrap框架 bootstrap入门必看!
2017/04/13 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
vue项目使用$router.go(-1)返回时刷新原来的界面操作
2020/07/26 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[01:39]2014DOTA2国际邀请赛 Newbee经理CU专访队伍火力全开
2014/07/15 DOTA
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
Java面试题:说出如下代码的执行结果
2015/10/30 面试题
工作自我评价分享
2013/12/01 职场文书
《童趣》教学反思
2014/02/19 职场文书
中药专业自荐信范文
2014/03/18 职场文书
户籍证明格式
2014/09/15 职场文书
大学辅导员述职报告
2015/01/10 职场文书
2015年世界环境日演讲稿
2015/03/18 职场文书
Python Matplotlib绘制条形图的全过程
2021/10/24 Python