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 相关文章推荐
深入聊聊Array的sort方法的使用技巧.详细点评protype.js中的sortBy方法
Apr 12 Javascript
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript 私有成员分析
Jan 13 Javascript
jQuery实现设置、移除文本框默认值功能
Jan 13 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
jQuery检查元素存在性(推荐)
Sep 17 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
js实现显示手机号码效果
Mar 09 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 Javascript
layui自定义工具栏的方法
Sep 19 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
yii2学习教程之5种内置行为类详解
2017/08/03 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
JS OOP包机制,类创建的方法定义
2009/11/02 Javascript
JQuery AJAX提交中文乱码的解决方案
2010/07/02 Javascript
用nodejs写的一个简单项目打包工具
2013/05/11 NodeJs
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jQuery判断元素是否存在的可靠方法
2014/05/06 Javascript
jQuery实现的简单提示信息插件
2015/12/08 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
javascript实现查找数组中最大值方法汇总
2016/02/13 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
JavaScript仿微博输入框效果(案例分析)
2016/12/06 Javascript
Javascript中常用类型的格式化方法小结
2016/12/26 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
详解Vue.js 可拖放文本框组件的使用
2021/03/03 Vue.js
解决Python 遍历字典时删除元素报异常的问题
2016/09/11 Python
Python文件操作基本流程代码实例
2017/12/11 Python
Python科学计算包numpy用法实例详解
2018/02/08 Python
flask中过滤器的使用详解
2018/08/01 Python
Python箱型图处理离群点的例子
2019/12/09 Python
Python使用socket模块实现简单tcp通信
2020/08/18 Python
HTML5 在canvas中绘制文本附效果图
2014/06/23 HTML / CSS
Ray-Ban雷朋美国官网:全球领先的太阳眼镜品牌
2016/07/20 全球购物
Java程序员综合测试题
2014/04/25 面试题
留学自荐信
2013/10/10 职场文书
综合素质自我评价怎么写
2014/09/14 职场文书
复兴之路观后感3000字
2015/06/02 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
Windows11性能真的上涨35%? 桌面酷睿i9实测结果公开
2021/11/21 数码科技
win10重装系统后上不了网怎么办 win10重装系统网络故障的解决办法
2022/07/23 数码科技