欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript特效實現(xiàn)——當(dāng)前時間和倒計時效果的簡單實例

 更新時間：2016年07月20日 09:00:02   投稿：jingxian  
下面小編就為大家?guī)硪黄猨avascript特效實現(xiàn)——當(dāng)前時間和倒計時效果的簡單實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

這個效果的實現(xiàn)關(guān)鍵是對Date對象和setTimeout的使用。

一共有三個例子，HTML結(jié)構(gòu)如下，就不添加CSS樣式了。

<body>
  當(dāng)前時間：<p id="p1"></p>
  高考倒計時：<p id="p2"></p>
  限時搶購：<p id="p3"></p>
</body>

主要體會javascript的實現(xiàn)

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

1.簡單的實現(xiàn)當(dāng)前時間的顯示

function showtime1() {
   var nowdate=new Date();//創(chuàng)建Date對象nowdate,以獲取當(dāng)前時間
   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),//函數(shù)checkTime用于格式化時，分，秒
     m=checkTime(m),
     s=checkTime(s);
   p1.innerHTML=year+"年"+month+"月"+date+"日"+week[day]+h+"："+m+"："+s;
   setTimeout(showtime1, 1000);//反復(fù)執(zhí)行函數(shù)本身
 }

其中的checkTime函數(shù)如下：

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

因為平時看到的時間格式一般是00:00:01,而getHours，getMinutes，getSeconds得到格式是0到9，不是00到09這樣的格式。所以在從9變成10的過程中，有一位數(shù)，變成兩位數(shù)，同樣在充59秒變?yōu)?秒或者59分變?yōu)?分或者23時變?yōu)?時。

比如 23:59:59 再下一秒 應(yīng)該變?yōu)?0:00:00；若未使用checkTime函數(shù)進行處理，則會變?yōu)?:0:0，這樣格式上就有點不統(tǒng)一，而且視覺上也有字?jǐn)?shù)增加或減少的突變。(后面兩個例子就不用checkTime函數(shù)對時分秒進行處理了?。?！)

2.高考倒計時效果實現(xiàn)

function showTime2() {
　　var nowtime=new Date(),//獲取當(dāng)前時間
　　  endtime=new Date("2017/6/6");//定義結(jié)束時間
  var lefttime=endtime.getTime()-nowtime.getTime(),//距離結(jié)束時間的毫秒數(shù)
    leftd=Math.floor(lefttime/(1000*60*60*24)),//計算天數(shù)
    lefth=Math.floor(lefttime/(1000*60*60)%24),//計算小時數(shù)
    leftm=Math.floor(lefttime/(1000*60)%60),//計算分鐘數(shù)
    lefts=Math.floor(lefttime/1000%60);//計算秒數(shù)
  p2.innerHTML=leftd+"天"+lefth+":"+leftm+":"+lefts;
  setTimeout(showTime2, 1000);  
}

其中比較重要的幾點：

① 定義結(jié)束的時間endtime=new Date("2017/6/6")是通過new一個帶有參數(shù)的Date對象，直接 new Date()則是直接獲取到當(dāng)前的時間；

② getTime()方法得到的是距離1970 年 1 月 1 日的毫秒數(shù)。

③天數(shù)，小時數(shù)，分鐘數(shù)和秒數(shù)的計算，%（取模運算）。得到距離結(jié)束時間的毫秒數(shù)（剩余毫秒數(shù)），除以1000得到剩余秒數(shù)，再除以60得到剩余分鐘數(shù)，再除以60得到剩余小時數(shù)。除以24得到剩余天數(shù)。剩余秒數(shù) lefttime/1000 模60得到秒數(shù)，剩余分鐘數(shù) lefttime/(1000*60) 模60得到分鐘數(shù)，剩余小時數(shù)模 lefttime/(1000*60*60) 模24得到小時數(shù)。

3.限時搶購倒計時效果

function showtime3() {
　　var nowtime=new Date(),
　　　　endtime=new Date("2020/1/1,00:00:00"),//設(shè)置結(jié)束時間
　　　　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);  
}

其實和第二個例子大同小異，區(qū)別是結(jié)束時間的設(shè)置 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>
  當(dāng)前時間：<p id="p1"></p>
  高考倒計時：<p id="p2"></p>
  限時搶購：<p id="p3"></p>
</body>
</html>

以上這篇javascript特效實現(xiàn)——當(dāng)前時間和倒計時效果的簡單實例就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論