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 相关文章推荐
javascript IFrame 强制刷新代码
Jul 23 Javascript
eval与window.eval的差别分析
Mar 17 Javascript
一些常用的JavaScript函数(json)附详细说明
May 25 Javascript
js父窗口关闭时子窗口随之关闭完美解决方案
Apr 29 Javascript
angularjs学习笔记之双向数据绑定
Sep 26 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
May 17 Javascript
浅析jquery数组删除指定元素的方法:grep()
May 19 Javascript
JS实现列表的响应式排版(推荐)
Sep 01 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 Javascript
深入理解react-router@4.0 使用和源码解析
May 23 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中理解print EOT分界符和echo EOT的用法区别小结
2010/02/21 PHP
WordPress判断用户是否登录的代码
2011/03/17 PHP
PHP输入流php://input介绍
2012/09/18 PHP
Laravel 5框架学习之日期,Mutator 和 Scope
2015/04/08 PHP
thinkphp jquery实现图片上传和预览效果
2020/07/22 PHP
php实现支持中文的文件下载功能示例
2017/08/30 PHP
Laravel第三方包报class not found的解决方法
2019/10/13 PHP
关于js日期转化为毫秒数“节省20%的效率和和节省9个字符“问题
2012/03/01 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
JavaScript通过正则表达式实现表单验证电话号码
2014/03/07 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
2014/08/11 Javascript
JavaScript数组各种常见用法实例分析
2015/08/04 Javascript
基于JavaScript实现表单密码的隐藏和显示出来
2016/03/02 Javascript
JS基于ocanvas插件实现的简单画板效果代码(附demo源码下载)
2016/04/05 Javascript
JavaScript中0和&quot;&quot;比较引发的问题
2016/05/26 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
SpringBoot+Vue前后端分离,使用SpringSecurity完美处理权限问题的解决方法
2018/01/09 Javascript
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
2018/10/31 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
vue组件内部引入外部js文件的方法
2020/01/18 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
python Selenium爬取内容并存储至MySQL数据库的实现代码
2017/03/16 Python
Python 3.x 判断 dict 是否包含某键值的实例讲解
2018/07/06 Python
python3+requests接口自动化session操作方法
2018/10/13 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
浅谈selenium如何应对网页内容需要鼠标滚动加载的问题
2020/03/14 Python
使用HTML5的Notification API制作web通知的教程
2015/05/08 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
英国美术用品购物网站:Cass Art
2019/10/08 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
销售人员职业生涯规划范文
2014/03/01 职场文书
说明书怎么写
2014/05/06 职场文书
股指期货心得体会
2014/09/13 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫