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

所属分类: 网络编程 / JavaScript 阅读数: 1236
收藏 0 赞 0 分享

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>

更多精彩内容其他人还在看

BootStrap数据表格实例代码

本文通过实例代码给大家分享了BootStrap数据表格的相关知识,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

基于vue的短信验证码倒计时demo

这篇文章主要介绍了基于vue的短信验证码倒计时demo,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

详解React Native开源时间日期选择器组件(react-native-datetime)

本篇文章主要介绍了详解React Native开源时间日期选择器组件(react-native-datetime),具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

JS库particles.js创建超炫背景粒子插件(附源码下载)

particles.js用于创建粒子的轻量级 JavaScript 库。使用方法非常简单,代码也很容易实现,下面通过本文给大家分享JS库particles.js创建超炫背景粒子插件附源码下载,需要的朋友参考下吧
收藏 0 赞 0 分享

JS库之Waypoints的用法详解

waypoints的功能非常强大,一款用于捕获各种滚动事件的插件,下面跟随脚本之家小编一起学习JS库之Waypoints的用法吧
收藏 0 赞 0 分享

强大的JavaScript响应式图表Chartist.js的使用

本篇文章主要介绍了强大的JavaScript响应式图表Chartist.js的使用,具有一定的参考价值,有兴趣的可以了解一下
收藏 0 赞 0 分享

详解wow.js中各种特效对应的类名

本篇文章主要介绍了wow.js中各种特效对应的类名 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库之Highlight.js的用法详解

highlight.js是一款轻量级的Web代码语法高亮库。下面通过实例代码给大家分享JS库之Highlight.js的用法详解,感兴趣的朋友跟随脚本之家小编一起学习吧
收藏 0 赞 0 分享

详解动画插件wow.js的使用方法

本篇文章主要介绍了动画插件wow.js的使用方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

JS库 Highlightjs 添加代码行号的实现代码

Highlightjs是一款优秀的代码高亮Js组件,可以很方便地对各种语言编写的代码添加语法高亮样式。本文重点给大家介绍Highlightjs 添加代码行号的实现代码,需要的朋友参考下吧
收藏 0 赞 0 分享
查看更多