JavaScript实现倒计时代码段Item1(非常实用)


Posted in Javascript onNovember 03, 2015

现今团购网、电商网、门户网等,常使用时间记录重要的时刻,如时间显示、倒计时差、限时抢购等,本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果。

1、简单时间显示

讲解日期对象Date,并通过该对象获取时、分、秒等,让你自由提取所需时间内容。

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
 window.onload = function(){
  showTime();
 }
 function showTime(){
  var myDate = new Date();
  var year = myDate.getFullYear();
  var month = myDate.getMonth() + 1;
  var date = myDate.getDate();
  var dateArr = ["日","一",'二','三','四','五','六'];
  var day = myDate.getDay();
  var hours = myDate.getHours();
  var minutes = formatTime(myDate.getMinutes());
  var seconds = formatTime(myDate.getSeconds());
  var systemTime = document.getElementById("time");
  systemTime.innerHTML = " " + year + "年" + month +"月" + date + "日" + " 星期" + dateArr[day] + " " + hours + ":" + minutes + ":" + seconds;
  setTimeout("showTime()",500);
 }
 //格式化时间:分秒。
 function formatTime (i){
  if(i < 10){
   i = "0" + i;
  }
  return i;
 }
 </script>
</head>
<body>
 <div id ='time'></div>
</body>
</html>

显示结果:

JavaScript实现倒计时代码段Item1(非常实用) 

2、倒计时时差

讲解gettime()等方法,及计算时间的方法,学会时间相差的天数。

<!DOCTYPE html>
<html>
<head>
 <title>获取时间</title>
 <script type="text/javascript">
  window.onload = function(){
   deadTime();
  }
  function deadTime(){
   var nowTime = new Date();
   var finalTime = new Date("2015-11-11");
   var lefttime = (finalTime.getTime() - nowTime.getTime())/(1000*24*60*60);
   var date = Math.ceil(lefttime);
   document.getElementById("time").innerHTML = date;
  }
 </script>
</head>
<body>
 <div >距离双十一还有:<span id ='time'></span>天</div>
</body>
</html>

显示效果:

JavaScript实现倒计时代码段Item1(非常实用) 

3、 限时抢购

如何运用日期对象及方法,计算相差的天、时、分、秒的方法。

<!DOCTYPE html>
<html>
<head>
<title>团购——限时抢</title>
</head>
<body>
<div class="time"> <span id="LeftTime"></span></div>
</div>
<script>
function FreshTime()
{
 var endtime=new Date("2015/11/11,12:20:12");//结束时间
 var nowtime = new Date();//当前时间
 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); 
 d=parseInt(lefttime/3600/24);
 h=parseInt((lefttime/3600)%24);
 m=parseInt((lefttime/60)%60);
 s=parseInt(lefttime%60);
 document.getElementById("LeftTime").innerHTML="距离活动结束还剩" + d+"天"+h+"小时"+m+"分"+s+"秒";
 if(lefttime<=0){
  document.getElementById("LeftTime").innerHTML="团购已结束";
  clearInterval(sh);
 }
}
 FreshTime();
 var sh;
 sh=setInterval(FreshTime,1000);
</script>
</body>
</html>

JavaScript实现倒计时代码段Item1(非常实用) 

Javascript 相关文章推荐
Knockoutjs的环境搭建教程
Nov 26 Javascript
浅析JavaScript中的隐式类型转换
Dec 05 Javascript
Javascript实现返回上一页面并刷新的小例子
Dec 11 Javascript
通过遮罩层实现浮层DIV登录的js代码
Feb 07 Javascript
js中的setInterval和setTimeout使用实例
May 09 Javascript
jQuery子属性过滤选择器用法分析
Feb 10 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
javascript检测flash插件是否被禁用的方法
Jan 14 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
jQuery操作css样式
May 15 jQuery
如何在JavaScript中优雅的提取循环内数据详解
Mar 04 Javascript
jQuery实用技巧必备(下)
Nov 03 #Javascript
JavaScript实现的多种鼠标拖放效果
Nov 03 #Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
Nov 03 #Javascript
jQuery实现Email邮箱地址自动补全功能代码
Nov 03 #Javascript
jQuery实现仿QQ头像闪烁效果的文字闪动提示代码
Nov 03 #Javascript
基于JavaScript怎么实现让歌词滚动播放
Nov 03 #Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 #Javascript
You might like
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
PHP解码unicode编码的中文字符代码分享
2014/08/13 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
Javascript Cookie读写删除操作的函数
2010/03/02 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
点击弹出层外区域关闭弹出层jquery特效示例
2013/08/25 Javascript
jquery日历控件实现方法分享
2014/03/07 Javascript
js实现微信分享代码
2020/10/11 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
快速对接payjq的个人微信支付接口过程解析
2019/08/15 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
js实现小星星游戏
2020/03/23 Javascript
基于javascript的无缝滚动动画实现2
2020/08/07 Javascript
Vue实现计算器计算效果
2020/08/17 Javascript
Python中给List添加元素的4种方法分享
2014/11/28 Python
深入理解Javascript中的this关键字
2015/03/27 Python
Python操作使用MySQL数据库的实例代码
2017/05/25 Python
详解django的serializer序列化model几种方法
2018/10/16 Python
Python可迭代对象操作示例
2019/05/07 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
总结python 三种常见的内存泄漏场景
2020/11/20 Python
Python使用tkinter制作在线翻译软件
2021/02/22 Python
购买中国最好的电子产品:Geekbuying
2018/03/13 全球购物
《卖木雕的少年》教学反思
2014/04/11 职场文书
假面舞会策划方案
2014/05/29 职场文书
优秀毕业生求职信
2014/06/05 职场文书
2014年度培训工作总结
2014/11/27 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
困难补助申请报告
2015/05/19 职场文书
民事诉讼答辩状范文
2015/05/21 职场文书
德能勤绩工作总结
2015/08/11 职场文书
新娘婚礼答谢词
2015/09/29 职场文书
MySql开发之自动同步表结构
2021/05/28 MySQL