javascript倒计时效果实现

2024-11-27 01:49:06

本文分析不同倒计时效果的计算思路及方法，掌握日期对象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>

显示结果：

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>

显示效果：

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>

显示效果：

知识点：

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

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

基于Javascript实现倒计时功能

本文实例实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~). 代码名称 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>倒计时实现</title> <sty
JavaScript电子时钟倒计时

本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下 JavaScript时间类 1.获取时分秒: getHours() getMinutes(); getSeconds(); 2.获取年月日: getFullYear(); getMonth() + 1;//获取的月份需要+1: getDate(); //日期 getDay();
js代码实现点击按钮出现60秒倒计时

比如,一些网站上的手机短信认证的功能,有类似实现点击按钮后,倒计时60秒才能再次点击发送的效果. 此例子用Javascript实现点击按钮后,倒计时60秒才能再次点击发送验证码的功能. 例子1:Javascript 实现点击按钮倒计时60秒方可再次点击发送的效果 <input type="button" id="btn" value="免费获取验证码" /> <script type="text/javascrip
最全面的JS倒计时代码

第一种:精确到秒的javascript倒计时代码 HTML代码: <form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="
js倒计时简单实现方法

本文实例讲述了js倒计时简单实现方法的代码,分享给大家供大家参考,具体如下: function timeDown(second) { var month = '', day = '', hour = '', minute = ''; if (second >= 86400 * 30) { month = Math.floor(second / (86400 * 30)) + '月'; second = second % (86400 * 30); } if (second >= 86400)
js实现n秒倒计时后才可以点击的效果

在我们进行注册用户时经常遇到点击按钮后,60秒倒计时后才能继续可以点击,按钮上还能显示倒计时,这60秒时间就是为大家提供"细阅读协议"做准备的,这种功能是如何实现的,下面为大家分享详细代码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>倒计时然后才可以点击效果代码</title> <script type=&quo
js实现新年倒计时效果

一年又一年,新年又快到了,最近大家又开始抢回家过年的车票了,我们就来算一算离新年还有多少天,总结总结在即将过去的2015年大家都收获了什么? 本文实例讲述了js实现新年倒计时效果代码.分享给大家供大家参考.具体如下: 运行效果图: 具体代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional
实例讲解多个js毫秒倒计时同时进行效果

本文实例讲解js毫秒倒计时同时进行效果的代码,分享给大家供大家参考,具体内容如下效果图: 实现功能:调用一个函数,传入html元素的id,和一个截止时间(unix时间戳),在该html元素中打印出到当前到截止时间为止的倒计时,精确到毫秒: 效果图如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" conte
js倒计时抢购实例

本文实例为大家分享了JavaScript实现限时抢购,供大家参考,具体代码如下运行效果图: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type"
javascript电商网站抢购倒计时效果实现

本文实例讲述了javascript电商网站抢购倒计时效果实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>团购--限时抢</title> </head> &

javascript倒计时效果实现

相关推荐

随机推荐