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实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
jQuery制作简洁的多级联动Select下拉框
Dec 23 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
jquery处理页面弹出层查询数据等待操作实例
Mar 25 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
Aug 20 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
基于vue.js实现购物车
Jan 15 Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
使用php来实现网络服务
2009/09/15 PHP
php学习笔记 面向对象的构造与析构方法
2011/06/13 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
mac下安装nginx和php
2013/11/04 PHP
php数组查找函数总结
2014/11/18 PHP
PHP中ajax无刷新上传图片与图片下载功能
2017/02/21 PHP
PHP判断密码强度的方法详解
2017/05/26 PHP
判断一个对象是否为jquery对象的方法
2014/03/12 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
2014/08/18 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
Markdown与Bootstrap相结合实现图片自适应属性
2016/05/04 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
在html中引入外部js文件,并调用带参函数的方法
2016/10/31 Javascript
详解本地Node.js服务器作为api服务器的解决办法
2017/02/28 Javascript
JavaScript对象引用与赋值实例详解
2017/03/15 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
JS+CSS实现滚动数字时钟效果
2017/12/25 Javascript
vue2.0 如何在hash模式下实现微信分享
2019/01/22 Javascript
layui添加动态菜单与选项卡
2019/07/26 Javascript
JS实现随机点名器
2020/04/12 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
python实现Floyd算法
2018/01/03 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
对tensorflow中cifar-10文档的Read操作详解
2020/02/10 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
怎样比较两个类型为String的字符串
2016/08/17 面试题
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
学校办公室主任职责
2013/12/27 职场文书
土木工程求职信
2014/05/29 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
Python装饰器详细介绍
2022/03/25 Python
画错魏国疆域啦!《派对咖孔明》动画因作画失误于官网致歉
2022/04/07 日漫