Web前端——倒計時效果

一、JavaScript Date對象

getYear() 獲取年份,獲取年最好用
getFullYear()獲取完整格式年份,如2014,一般用這個
getMonth()獲取月,從0開始(0~11),要返回當前月份要加1
getDate()獲取日(1~31)
getDay()獲取星期幾(0~6)
getHours()獲取小時(0~23)
getMinutes()獲取分鐘數(0~59)
getSeconds()獲取秒數(0~59)
getTime()獲取毫秒數
定義日期對象
var myDate = new Date()
myDate存放了當前日期對象,然后可以通過日期對象的函數獲取具體需要的數據,比如,年月日等等

二、簡單時間顯示

效果:2017年4月18日 星期二 14:22:44
重點:
1、獲取時間,星期幾處理
2、時間要時刻變化,和系統時間相同——setTimeout('showTime()',500)定時調用
3、秒數和分數時刻保證是兩位數——補位處理

window.onload = function(){
    showTime();
  }
  function checkTime(i){  //補位處理
      if(i<10){
          i="0"+i;
      }
   return i;
  }
  function showTime(){
    var now=new Date();
    var year=now.getFullYear();
    var month=  now.getMonth()+1 ;
    var day=  now.getDate()  ;
    var h=now.getHours()  ;
    var m=now.getMinutes()  ;
    var s=now.getSeconds()  ;
    m=checkTime(m)
    s=checkTime(s)

    var weekday=new Array(7)
    weekday[0]="星期日"
    weekday[1]="星期一"
    weekday[2]="星期二"
    weekday[3]="星期三"
    weekday[4]="星期四"
    weekday[5]="星期五"
    weekday[6]="星期六"
    var d=now.getDay();
    document.getElementById("show").innerHTML=""+year+"年"+month+"月"+day+"日 "+ weekday[d]+" "+h+":"+m+":"+s;
    setTimeout('showTime()',500)// 定時500毫秒執行一次showTime()
  }

三、高考倒計時

倒計時原理:當前時間-倒計時截止日
中間轉換點:
1、使用getTime()獲取到毫秒數
毫秒數差 = 當前時間getTime()獲取到毫秒數-倒計時截止日getTime()獲取到毫秒數
2、天數 = 毫秒數之差/每天毫秒數
1000 * 60 * 60 * 24一天的秒數
3、天數不是整數,使用Math.ceil()向上取整函數
Math.ceil(12.3) = 13;

<script language="javascript" type="text/javascript">     
  window.onload = function(){
      var timedate= new Date(2017,6,1);     //自定義結束時間  '
      var now =  new Date();   
      var date = timedate.getTime() - now.getTime();    //得出的為毫秒
      var time = Math.ceil((date)/(1000 * 60 * 60 * 24)); //1000 * 60 * 60 * 24一天的秒數
      if(time > 0 ){
        document.getElementById('timeShow').innerHTML = time;
      }
  }
</script>
</head>
<body>
 <div class="content2">
    <div class="txtshow">距離設置時間還有<span  id="timeShow"></span>天</div>
 </div>
</body>
倒計時效果

四、倒計時二

1、使用了parseInt()函數取整數
2、使用% 計算時間
3、時間結束,更改界面。并停止定時器

function FreshTime()
{
    var endtime=new Date("2017/5/15,12:20:12");//結束時間
    var nowtime = new Date();//當前時間
    var lefttime= parseInt((endtime.getTime()-nowtime.getTime())/1000); 
    d=parseInt(lefttime/3600/24); ;
    h= parseInt(lefttime/(60*60))%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>
倒計時

}
FreshTime();
var sh;
sh=setInterval(FreshTime,1000);

</script>

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 第1章 認識JS JavaScript能做什么?1.增強頁面動態效果(如:下拉菜單、圖片輪播、信息滾動等)2.實現...
    mo默22閱讀 1,327評論 0 5
  • 一、JS前言 (1)認識JS 也許你已經了解HTML標記(也稱為結構),知道了CSS樣式(也稱為表示),會使用HT...
    凜0_0閱讀 2,798評論 0 8
  • 國家電網公司企業標準(Q/GDW)- 面向對象的用電信息數據交換協議 - 報批稿:20170802 前言: 排版 ...
    庭說閱讀 11,167評論 6 13
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,766評論 18 399
  • ¥開啟¥ 【iAPP實現進入界面執行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 6,535評論 0 17