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 index()方法使用代码
Jun 02 Javascript
Colortip基于jquery的信息提示框插件在IE6下面的显示问题修正方法
Dec 06 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
浅谈JavaScript数据类型及转换
Feb 28 Javascript
用JavaScript实现页面重定向功能的教程
Jun 04 Javascript
Javascript技术难点之apply,call与this之间的衔接
Dec 04 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
基于node.js依赖express解析post请求四种数据格式
Feb 13 Javascript
纯js实现隔行变色效果
Nov 29 Javascript
在vue中多次调用同一个定义全局变量的实例
Sep 25 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 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
打造计数器DIY三步曲(下)
2006/10/09 PHP
PHP动态生成javascript文件的2个例子
2014/04/11 PHP
PHP多个文件上传到服务器实例
2014/10/29 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
php设计模式之原型模式分析【星际争霸游戏案例】
2020/03/23 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
深入剖析JavaScript:Object类型
2016/05/10 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
bootstrap轮播图示例代码分享
2017/05/17 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
JS分页的实现(同步与异步)
2017/09/16 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
webpack的CSS加载器的使用
2018/09/11 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
Python遍历zip文件输出名称时出现乱码问题的解决方法
2015/04/08 Python
python实现bucket排序算法实例分析
2015/05/04 Python
python二分查找算法的递归实现方法
2016/05/12 Python
django2 快速安装指南分享
2018/01/05 Python
Python3.7 dataclass使用指南小结
2019/02/22 Python
django的模型类管理器——数据库操作的封装详解
2020/04/01 Python
Python代码需要缩进吗
2020/07/01 Python
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
意大利在线药房:Saninforma
2021/02/11 全球购物
软件测试有哪些?什么是配置项?
2012/02/12 面试题
车工岗位职责
2013/11/26 职场文书
创业女性典型材料
2014/05/02 职场文书
华山导游词
2015/02/03 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL