DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS實現根據用戶輸入分鐘進行倒計時功能
JS實現根據用戶輸入分鐘進行倒計時功能
編輯:關於JavaScript     

廢話不多說了,直接給大家貼代碼了。具體代碼如下所示:

其實這倒計時之前有接觸過很多,只是用的都是別人的源碼。
應項目需求,終於認真一回,把一個自己看似很簡單的問題,終於耗上了跨度一個星期的時間,才弄出來。
源碼直接復制黏貼可用。

冗余版+簡化版。

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
  <title></title> 
 </head> <body> 
  <script type="text/javascript"> 
    var createTime = '2016-11-14 10:20:00';//開始時間 
    var limitTimes = 10;//時間長度 
    // 倒計時 入口 
    countdowns = window.setInterval(function(){ 
      var arr = cutDoowns(limitTimes,createTime); 
      document.write(formatDate(arr[0])+':'+formatDate(arr[1])+':'+formatDate(arr[2])+'</br>'); 
      if(arr[2]){ 
        document.write('時間到!'); 
      } 
    },1000); 
 
    /* 
      s,10分鐘後的具體日期: 
      date,開始時間 
      然後轉化成毫秒比較,所得的差值化成分秒,就是倒計時的分秒。 
     */ 
    function cutDoowns(s,date){ 
      console.log(''); 
      var flag = false; 
      var arr = [];//arr[0]:分,arr[1]:秒,arr[2]:返回boolean 
      var now = new Date();//當前時間 
      var now1 = new Date(date);//開始時間 
      console.log('開始時間 now1: '+now1); 
      now1.setMinutes(now1.getMinutes()+s);//10分鐘後的時間 
      console.log('當前時間 now :'+now); 
      console.log('10分鐘時 now1:'+now1); 
 
      // 轉化成年月日 時分秒 格式 
      var n = now.getFullYear()+'/'+(now.getMonth()+1)+'/'+now.getDay()+' '+now.getHours()+':'+now.getMinutes()+':'+now.getSeconds(); 
      var n1 = now1.getFullYear()+'/'+(now1.getMonth()+1)+'/'+now1.getDay()+' '+now1.getHours()+':'+now1.getMinutes()+':'+now1.getSeconds(); 
      // 日期轉化成毫秒 
      var time1 = (new Date(n)).getTime(); 
      var time2 = (new Date(n1)).getTime(); 
      // 毫秒轉日期格式 
      var time11 = new Date(time1); 
      var time21 = new Date(time2); 
      console.log('當前時間:'+n+',轉化成毫秒:'+time1+',time11:'+time11); 
      console.log('10分鐘時:'+n1+',轉化成毫秒:'+time2+',time21:'+time21); 
 
      var surplusSec = time2-time1;//距離解鎖剩余毫秒 
 
      if(surplusSec<=0){ 
        clearInterval(countdowns); 
        flag = true; 
        return arr = [00,00,flag]; 
      } 
 
      var minute = Math.floor(surplusSec/1000/60);//分鐘 
      var second = Math.floor((surplusSec-minute*60*1000)/1000);//剩余秒數 
      console.log('剩余時間,minute: '+minute+',second: '+second+',surplusSec:'+surplusSec); 
      // var second = Math.round(surplusTimes);//秒數 
      console.log('剩余時間,minute: '+minute+',second: '+second+',surplusSec:'+surplusSec); 
 
      arr = [minute,second,flag]; 
      return arr; 
    } 
 
    //格式化日期:把單字符轉成雙字符 
    function formatDate(n){ 
      n = n.toString(); 
      // console.log(n); 
      if(n.length<=1){ 
        n = '0'+n; 
      } 
      // console.log(n); 
      return n; 
    } 
  </script> 
  </body> 
</html> 

簡化版本:

<!DOCTYPE html> 
<html lang="en"> 
  <head> 
    <meta charset="utf-8"> 
    <title>打開調試工具,看效果!</title> 
  </head> 
  <body> 
 
  <script type="text/javascript"> 
    /* 
      打開調試工具,看效果! 
      思路: 
      1.設置一個倒計時的時間長度; 
      2.設置開始時間和當前時間; 
      3.結束時間是 開始時間+倒計時間; 
      4.結束毫秒-開始毫秒=剩余倒計時間。 
     */ 
     
    // 准備 
    var countdownMinute = 10;//10分鐘倒計時 
    var startTimes = new Date('2016-11-16 15:55');//開始時間 new Date('2016-11-16 15:21'); 
    var endTimes = new Date(startTimes.setMinutes(startTimes.getMinutes()+countdownMinute));//結束時間 
    var curTimes = new Date();//當前時間 
    var surplusTimes = endTimes.getTime()/1000 - curTimes.getTime()/1000;//結束毫秒-開始毫秒=剩余倒計時間 
     
    // 進入倒計時 
    countdowns = window.setInterval(function(){ 
      surplusTimes--; 
      var minu = Math.floor(surplusTimes/60); 
      var secd = Math.round(surplusTimes%60); 
      console.log(minu+':'+secd); 
      if(surplusTimes<=0){ 
        console.log('時間到!'); 
        clearInterval(countdowns); 
      } 
    },1000); 
 
 
  </script> 
  </body> 
</html>

以上所述是小編給大家介紹的JS實現根據用戶輸入分鐘進行倒計時功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved