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 相关文章推荐
浅谈JavaScript中面向对象技术的模拟
Sep 25 Javascript
javascript学习笔记(十二) RegExp类型介绍
Jun 20 Javascript
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
jQuery自定义滚动条完整实例
Jan 08 Javascript
点击页面任何位置隐藏div的实现方法
Sep 05 Javascript
jquery拼接ajax 的json和字符串拼接的方法
Mar 11 Javascript
BootStrap 表单控件之单选按钮水平排列
May 23 Javascript
Vue的事件响应式进度条组件实例详解
Feb 04 Javascript
解决koa2 ctx.render is not a function报错问题
Aug 07 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
微信小程序上传多图到服务器并获取返回的路径
May 05 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 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
让你同时上传 1000 个文件 (二)
2006/10/09 PHP
自定义php类(查找/修改)xml文档
2013/03/26 PHP
分割GBK中文遭遇乱码的解决方法
2013/08/09 PHP
PHP正则表达式替换站点关键字链接后空白的解决方法
2014/09/16 PHP
php针对cookie操作的队列操作类实例
2014/12/10 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
Vue分页插件的前后端配置与使用
2019/10/09 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
PyCharm使用教程之搭建Python开发环境
2016/06/07 Python
Python 搭建Web站点之Web服务器网关接口
2016/11/06 Python
python通过zabbix api获取主机
2018/09/17 Python
在Pycharm中修改文件默认打开方式的方法
2019/01/17 Python
详解安装mitmproxy以及遇到的坑和简单用法
2019/01/21 Python
Python绘制热力图示例
2019/09/27 Python
PySide2出现“ImportError: DLL load failed: 找不到指定的模块”的问题及解决方法
2020/06/10 Python
Python如何读写CSV文件
2020/08/13 Python
想学画画?python满足你!
2020/12/24 Python
Python 可视化神器Plotly详解
2020/12/26 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
乌克兰电子和家用电器商店:Foxtrot
2019/07/23 全球购物
创业大赛策划书
2014/03/01 职场文书
超越自我演讲稿
2014/05/21 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
爱国电影观后感
2015/06/19 职场文书
Python实现学生管理系统(面向对象版)
2021/06/24 Python
Python实现简单的俄罗斯方块游戏
2021/09/25 Python
MySQL中B树索引和B+树索引的区别详解
2022/03/03 MySQL
Echarts如何重新渲染实例详解
2022/05/30 Javascript