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 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
jQuery实现倒计时(倒计时年月日可自己输入)
Dec 02 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
js 实现在2d平面上画8的方法
Oct 10 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
jQuery实现点击滚动到指定元素上的方法分析
Mar 19 jQuery
在Chrome DevTools中调试JavaScript的实现
Apr 07 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
第三节 定义一个类 [3]
2006/10/09 PHP
php 错误处理经验分享
2011/10/11 PHP
Codeigniter上传图片出现“You did not select a file to upload”错误解决办法
2014/06/12 PHP
PHP中魔术变量__METHOD__与__FUNCTION__的区别
2014/09/29 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php文件读取方法实例分析
2015/06/20 PHP
在php中设置session用memcache来存储的方法总结
2016/01/14 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
11款新鲜的jQuery插件[附所有demo下载]
2011/01/24 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(二)人物行走的实现
2013/01/23 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
2014/06/24 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
深入理解javascript中concat方法
2016/12/12 Javascript
Javascript(es2016) import和require用法和区别详解
2017/08/11 Javascript
Thinkjs3新手入门之如何使用静态资源目录
2017/12/06 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
python实现通过shelve修改对象实例
2014/09/26 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python进阶学习之特殊方法实例详析
2017/12/01 Python
html5使用window.postMessage进行跨域实现数据交互的一次实战
2021/02/24 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
双立人美国官方商店:ZWILLING集团餐具和炊具
2020/05/07 全球购物
入党自我鉴定范文
2013/10/04 职场文书
淘宝客服专员岗位职责
2014/04/11 职场文书
法律专业自荐信
2014/06/03 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2016自主招生校长推荐信范文
2015/03/23 职场文书
文明礼貌主题班会
2015/08/14 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
python标准库ElementTree处理xml
2022/05/20 Python