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 相关文章推荐
jQuery each()方法的使用方法
Mar 18 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
js获取php变量的实现代码
Aug 10 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
javascript实现倒计时N秒后网页自动跳转代码
Dec 11 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
DOM事件阶段以及事件捕获与事件冒泡先后执行顺序(图文详解)
Aug 18 Javascript
Bootstrap轮播图学习使用
Feb 10 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
Aug 16 jQuery
详解关于react-redux中的connect用法介绍及原理解析
Sep 11 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
原生JavaScript实现进度条
Feb 19 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
萌王史莱姆”萌王性别尴尬!那“萌战”归女组还是男?
2018/12/17 日漫
正义联盟的终局之战《天启星战争》将成为DC动画宇宙的最后一部
2020/04/09 欧美动漫
php中mysql连接和基本操作代码(快速测试使用,简单方便)
2014/04/25 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
Yii2主题(Theme)用法详解
2016/07/23 PHP
php连接mysql之mysql_connect()与mysqli_connect()的区别
2020/07/19 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
JavaScript基本对象
2007/01/11 Javascript
一个小型js框架myJSFrame附API使用帮助
2008/06/28 Javascript
jQuery中[attribute]选择器用法实例
2014/12/31 Javascript
JavaScript中的闭包
2016/02/24 Javascript
js+html制作简单验证码
2017/02/16 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
vue实现点击图片放大效果
2017/08/15 Javascript
JS实现的贪吃蛇游戏案例详解
2019/05/01 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
[06:16]DOTA2守卫传承者——职业选手谈心路历程
2015/02/26 DOTA
[43:41]VP vs RNG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Django框架中数据的连锁查询和限制返回数据的方法
2015/07/17 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
Python TestCase中的断言方法介绍
2019/05/02 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
python3使用GUI统计代码量
2019/09/18 Python
python实现的汉诺塔算法示例
2019/10/23 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
Python 使用双重循环打印图形菱形操作
2020/08/09 Python
致跳远、跳高运动员广播稿
2014/01/09 职场文书
总经理的岗位职责
2014/02/23 职场文书
我们的节日端午节活动方案
2014/03/02 职场文书
经济类毕业生求职信
2014/06/26 职场文书
护理目标管理责任书
2014/07/25 职场文书
课外小组活动总结
2014/08/27 职场文书
个人年终总结开头
2015/03/06 职场文书