javascript倒计时效果实现


Posted in Javascript onNovember 12, 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倒计时效果实现

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倒计时效果实现

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倒计时效果实现

知识点:

1.学会使用日期对象Date和方法。
2.学会不同时间内容的获取。
3.学会计算时差的方法。

本文介绍了常见的几种倒计时效果,特别适合用于现今团购网、电商网、门户网等倒计时抢购活动,希望本文能帮助大家熟练掌握javascript倒计时效果的实现方法。

Javascript 相关文章推荐
js处理表格对table进行修饰
May 26 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
nuxt+axios解决前后端分离SSR的示例代码
Oct 24 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
Node绑定全局TraceID的实现方法
Nov 14 Javascript
vue实现购物车结算功能
Jun 18 Javascript
微信小程序实现多图上传
Jun 19 Javascript
详解JavaScript中new操作符的解析和实现
Sep 04 Javascript
基于jquery步骤进度条源码分享
Nov 12 #Javascript
javascript手风琴下拉菜单实现代码
Nov 12 #Javascript
javascript弹出窗口实现代码
Nov 12 #Javascript
javascript实现tab切换特效
Nov 12 #Javascript
window.location.reload 刷新使用分析(去对话框)
Nov 11 #Javascript
JavaScript中获取Radio被选中的值
Nov 11 #Javascript
javascript图片滑动效果实现
Jan 28 #Javascript
You might like
一个php导出oracle库的php代码
2009/04/20 PHP
10个可以简化php开发过程的MySQL工具
2010/04/11 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php mysql_real_escape_string addslashes及mysql绑定参数防SQL注入攻击
2016/12/23 PHP
javascript 原型模式实现OOP的再研究
2009/04/09 Javascript
JavaScript Konami Code 实现代码
2009/07/29 Javascript
jquery中动态效果小结
2010/12/16 Javascript
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JS去除数组重复值的五种不同方法
2013/09/06 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
2014/06/16 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
仿JQuery输写高效JSLite代码的一些技巧
2015/01/13 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
微信小程序 tabs选项卡效果的实现
2017/01/05 Javascript
angularjs实现多张图片上传并预览功能
2017/02/24 Javascript
layui导航栏实现代码
2017/05/19 Javascript
浅谈struts1 &amp; jquery form 文件异步上传
2017/05/25 jQuery
iview中Select 选择器多选校验方法
2018/03/15 Javascript
JS中双击和单击事件冲突的解决方法
2018/04/09 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
[01:08:44]NB vs VP 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python中dictionary items()系列函数的用法实例
2014/08/21 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Ubuntu18.04安装 PyCharm并使用 Anaconda 管理的Python环境
2020/04/08 Python
JD Sports法国:英国篮球和运动时尚的领导者
2017/09/28 全球购物
《大禹治水》教学反思
2014/04/27 职场文书
爬山的活动方案
2014/08/16 职场文书
交通事故赔偿协议书怎么写
2014/10/04 职场文书
MySQL锁机制
2021/04/05 MySQL
python常见的占位符总结及用法
2021/07/02 Python