快捷導(dǎo)航

JS實現(xiàn)根據(jù)用戶輸入分鐘進行倒計時功能

更新時間：2016年11月14日 17:19:05 作者：kaiking_g

倒計時功能大家無論在各大網(wǎng)站都可以看到，今天小編給大家分享一段基于js實現(xiàn)的根據(jù)用戶輸入分鐘進行倒計時功能，非常不錯，需要的朋友參考下吧

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

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

冗余版+簡化版。

<!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,開始時間 
      然后轉(zhuǎn)化成毫秒比較，所得的差值化成分秒，就是倒計時的分秒。 
     */ 
    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); 
 
      // 轉(zhuǎn)化成年月日 時分秒 格式 
      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(); 
      // 日期轉(zhuǎn)化成毫秒 
      var time1 = (new Date(n)).getTime(); 
      var time2 = (new Date(n1)).getTime(); 
      // 毫秒轉(zhuǎn)日期格式 
      var time11 = new Date(time1); 
      var time21 = new Date(time2); 
      console.log('當前時間：'+n+'，轉(zhuǎn)化成毫秒：'+time1+'，time11：'+time11); 
      console.log('10分鐘時：'+n1+'，轉(zhuǎn)化成毫秒：'+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);//剩余秒數(shù) 
      console.log('剩余時間，minute: '+minute+'，second: '+second+'，surplusSec:'+surplusSec); 
      // var second = Math.round(surplusTimes);//秒數(shù) 
      console.log('剩余時間，minute: '+minute+'，second: '+second+'，surplusSec:'+surplusSec); 
 
      arr = [minute,second,flag]; 
      return arr; 
    } 
 
    //格式化日期：把單字符轉(zhuǎn)成雙字符 
    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>打開調(diào)試工具，看效果！</title> 
  </head> 
  <body> 
 
  <script type="text/javascript"> 
    /* 
      打開調(diào)試工具，看效果！ 
      思路： 
      1.設(shè)置一個倒計時的時間長度； 
      2.設(shè)置開始時間和當前時間； 
      3.結(jié)束時間是 開始時間+倒計時間； 
      4.結(jié)束毫秒-開始毫秒=剩余倒計時間。 
     */ 
     
    // 準備 
    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));//結(jié)束時間 
    var curTimes = new Date();//當前時間 
    var surplusTimes = endTimes.getTime()/1000 - curTimes.getTime()/1000;//結(jié)束毫秒-開始毫秒=剩余倒計時間 
     
    // 進入倒計時 
    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實現(xiàn)根據(jù)用戶輸入分鐘進行倒計時功能，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: