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中的location用法简单介绍
Mar 07 Javascript
js更优雅的兼容
Aug 12 Javascript
JavaScript中访问节点对象的方法有哪些如何使用
Sep 24 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
jQuery模拟select实现下拉菜单功能
Jun 20 Javascript
Bootstrap中datetimepicker使用小结
Dec 28 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
微信小程序实现form表单本地储存数据
Jun 27 Javascript
js和jquery判断数据类型的4种方法总结
Aug 28 jQuery
Openlayers学习之地图比例尺控件
Sep 28 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原创论坛
2006/10/09 PHP
php重定向的三种方法分享
2012/02/22 PHP
PHP使用PHPMailer发送邮件的简单使用方法
2013/11/12 PHP
PHP 提取图片img标记中的任意属性的简单实例
2013/12/10 PHP
PHP数组函数知识汇总
2016/05/12 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
jquery 操作单选框,复选框,下拉列表实现代码
2009/10/27 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
2014/08/15 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
Angular 页面跳转时传参问题
2016/08/01 Javascript
JS请求servlet功能示例
2017/06/01 Javascript
JavaScript ES6常用基础知识总结
2019/02/09 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
JavaScript数组排序小程序实现解析
2020/01/13 Javascript
es6中使用map简化复杂条件判断操作实例详解
2020/02/19 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
Python实现爬取知乎神回复简单爬虫代码分享
2015/01/04 Python
python中threading超线程用法实例分析
2015/05/16 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
Python单例模式的两种实现方法
2017/08/14 Python
wxpython实现图书管理系统
2018/03/12 Python
Python实现按当前日期(年、月、日)创建多级目录的方法
2018/04/26 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
python利用opencv实现颜色检测
2021/02/23 Python
自我评价的正确写法
2013/09/19 职场文书
乡镇2014法制宣传日活动总结
2014/11/01 职场文书
MySQL 8.0 Online DDL快速加列的相关总结
2021/06/02 MySQL
python中使用redis用法详解
2022/12/24 Redis