javascript特效实现——当前时间和倒计时效果的简单实例

前端技术 2023/09/07 JavaScript

这个效果的实现关键是对Date对象和setTimeout的使用。

一共有三个例子，HTML结构如下，就不添加CSS样式了。

<body>
  当前时间：<p id=\"p1\"></p>
  高考倒计时：<p id=\"p2\"></p>
  限时抢购：<p id=\"p3\"></p>
</body>

主要体会javascript的实现

window.onload=function () { 
  var p1=document.getElementById(\"p1\"),
    p2=document.getElementById(\"p2\");
    p3=document.getElementById(\"p3\");
  showtime1();
  showtime2();
  showtime3();
}

1.简单的实现当前时间的显示

function showtime1() {
   var nowdate=new Date();//创建Date对象nowdate,以获取当前时间
   var year=nowdate.getFullYear(),//获取年份
     month=nowdate.getMonth()+1,//获取月份，getMonth()得到的是0-11，需要加1
     date=nowdate.getDate(),//获取日份
     day=nowdate.getDay(),//获取一周中的某一天，getDay()得到的是0-6
     week=[\"星期日\",\"星期一\",\"星期二\",\"星期三\",\"星期四\",\"星期五\",\"星期六\"],
     h=nowdate.getHours(),
     m=nowdate.getMinutes(),
     s=nowdate.getSeconds(),
     h=checkTime(h),//函数checkTime用于格式化时，分，秒
     m=checkTime(m),
     s=checkTime(s);
   p1.innerHTML=year+\"年\"+month+\"月\"+date+\"日\"+week[day]+h+\"：\"+m+\"：\"+s;
   setTimeout(showtime1, 1000);//反复执行函数本身
 }

其中的checkTime函数如下：

function checkTime(i) {
  if (i<10) {
   i=\"0\"+i;
  }
  return i;
}

因为平时看到的时间格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09这样的格式。所以在从9变成10的过程中，有一位数，变成两位数，同样在充59秒变为0秒或者59分变为0分或者23时变为0时。

比如 23:59:59 再下一秒 应该变为00:00:00；若未使用checkTime函数进行处理，则会变为0:0:0，这样格式上就有点不统一，而且视觉上也有字数增加或减少的突变。(后面两个例子就不用checkTime函数对时分秒进行处理了！！！)

2.高考倒计时效果实现

function showTime2() {
　　var nowtime=new Date(),//获取当前时间
　　  endtime=new Date(\"2017/6/6\");//定义结束时间
  var lefttime=endtime.getTime()-nowtime.getTime(),//距离结束时间的毫秒数
    leftd=Math.floor(lefttime/(1000*60*60*24)),//计算天数
    lefth=Math.floor(lefttime/(1000*60*60)%24),//计算小时数
    leftm=Math.floor(lefttime/(1000*60)%60),//计算分钟数
    lefts=Math.floor(lefttime/1000%60);//计算秒数
  p2.innerHTML=leftd+\"天\"+lefth+\":\"+leftm+\":\"+lefts;
  setTimeout(showTime2, 1000);  
}

其中比较重要的几点：

① 定义结束的时间endtime=new Date(\"2017/6/6\")是通过new一个带有参数的Date对象，直接 new Date()则是直接获取到当前的时间；

② getTime()方法得到的是距离1970 年 1 月 1 日的毫秒数。

③天数，小时数，分钟数和秒数的计算，%（取模运算）。得到距离结束时间的毫秒数（剩余毫秒数），除以1000得到剩余秒数，再除以60得到剩余分钟数，再除以60得到剩余小时数。除以24得到剩余天数。剩余秒数 lefttime/1000 模60得到秒数，剩余分钟数 lefttime/(1000*60) 模60得到分钟数，剩余小时数模 lefttime/(1000*60*60) 模24得到小时数。

3.限时抢购倒计时效果

function showtime3() {
　　var nowtime=new Date(),
　　　　endtime=new Date(\"2020/1/1,00:00:00\"),//设置结束时间
　　　　lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
　　　　d=Math.floor(lefttime/(60*60*24)),
　　　　h=Math.floor(lefttime/(60*60)%24),
　　　　m=Math.floor(lefttime/60%60),
　　　　s=Math.floor(lefttime%60);
　　p3.innerHTML=d+\"天\"+h+\"小时\"+m+\"分\"+s+\"秒\";
　　setTimeout(showtime3, 1000);  
}

其实和第二个例子大同小异，区别是结束时间的设置 new Date(\"2020/1/1,00:00:00\")

下面是完整的代码

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <meta charset=\"UTF-8\">
  <title>倒计时效果</title>
  <script type=\"text/javascript\">
    function checkTime(i) {
      if (i<10) {
        i=\"0\"+i;
      }
      return i;
    }
    window.onload=function () {
      
      var p1=document.getElementById(\"p1\"),
        p2=document.getElementById(\"p2\");
      showtime1();
      showtime2();
      showtime3();
　　　　 }
    function showtime1() {
      var nowdate=new Date();
      var year=nowdate.getFullYear(),//年份
      month=nowdate.getMonth()+1,//月份
      date=nowdate.getDate(),//日
      week=[\"星期日\",\"星期一\",\"星期二\",\"星期三\",\"星期四\",\"星期五\",\"星期六\"],
      day=nowdate.getDay(),//getDay获取0-6
      h=nowdate.getHours(),
      h=checkTime(h),
      m=nowdate.getMinutes(),
      m=checkTime(m),
      s=nowdate.getSeconds(),
      s=checkTime(s);
     p1.innerHTML=year+\"年\"+month+\"月\"+date+\"日\"+week[day]+h+\"：\"+m+\"：\"+s;
     setTimeout(showtime1, 1000);
     }
     function showtime2() {
      var nowtime=new Date(),
        endtime=new Date(\"2017/6/6\");
      var lefttime=endtime.getTime()-nowtime.getTime(),
        leftd=Math.floor(lefttime/(1000*60*60*24)),
        lefth=Math.floor(lefttime/(1000*60*60)%24),
        leftm=Math.floor(lefttime/(1000*60)%60),
        lefts=Math.floor(lefttime/1000%60);
      p2.innerHTML=leftd+\"天\"+lefth+\":\"+leftm+\":\"+lefts;
      setTimeout(showtime2, 1000);  
     }
     function showtime3() {
      var nowtime=new Date(),
        endtime=new Date(\"2020/1/1,00:00:00\"),
        lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000),
        d=Math.floor(lefttime/(60*60*24)),
        h=Math.floor(lefttime/(60*60)%24),
        m=Math.floor(lefttime/60%60),
        s=Math.floor(lefttime%60);
      p3.innerHTML=d+\"天\"+h+\"小时\"+m+\"分\"+s+\"秒\";
      setTimeout(showtime3, 1000);  
     }
  </script>
</head>
<body>
  当前时间：<p id=\"p1\"></p>
  高考倒计时：<p id=\"p2\"></p>
  限时抢购：<p id=\"p3\"></p>
</body>
</html>

以上这篇javascript特效实现——当前时间和倒计时效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phpstudy。

本文地址：https://www.stayed.cn/item/18308

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案