快捷導(dǎo)航

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

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

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

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

其實(shí)這倒計(jì)時(shí)之前有接觸過很多，只是用的都是別人的源碼。
應(yīng)項(xiàng)目需求，終于認(rèn)真一回，把一個(gè)自己看似很簡單的問題，終于耗上了跨度一個(gè)星期的時(shí)間，才弄出來。
源碼直接復(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';//開始時(shí)間 
    var limitTimes = 10;//時(shí)間長度 
    // 倒計(jì)時(shí) 入口 
    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('時(shí)間到!'); 
      } 
    },1000); 
 
    /* 
      s,10分鐘后的具體日期： 
      date,開始時(shí)間 
      然后轉(zhuǎn)化成毫秒比較，所得的差值化成分秒，就是倒計(jì)時(shí)的分秒。 
     */ 
    function cutDoowns(s,date){ 
      console.log(''); 
      var flag = false; 
      var arr = [];//arr[0]:分，arr[1]:秒，arr[2]:返回boolean 
      var now = new Date();//當(dāng)前時(shí)間 
      var now1 = new Date(date);//開始時(shí)間 
      console.log('開始時(shí)間 now1: '+now1); 
      now1.setMinutes(now1.getMinutes()+s);//10分鐘后的時(shí)間 
      console.log('當(dāng)前時(shí)間 now ：'+now); 
      console.log('10分鐘時(shí) now1：'+now1); 
 
      // 轉(zhuǎn)化成年月日 時(shí)分秒 格式 
      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('當(dāng)前時(shí)間：'+n+'，轉(zhuǎn)化成毫秒：'+time1+'，time11：'+time11); 
      console.log('10分鐘時(shí)：'+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('剩余時(shí)間，minute: '+minute+'，second: '+second+'，surplusSec:'+surplusSec); 
      // var second = Math.round(surplusTimes);//秒數(shù) 
      console.log('剩余時(shí)間，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è)置一個(gè)倒計(jì)時(shí)的時(shí)間長度； 
      2.設(shè)置開始時(shí)間和當(dāng)前時(shí)間； 
      3.結(jié)束時(shí)間是 開始時(shí)間+倒計(jì)時(shí)間； 
      4.結(jié)束毫秒-開始毫秒=剩余倒計(jì)時(shí)間。 
     */ 
     
    // 準(zhǔn)備 
    var countdownMinute = 10;//10分鐘倒計(jì)時(shí) 
    var startTimes = new Date('2016-11-16 15:55');//開始時(shí)間 new Date('2016-11-16 15:21'); 
    var endTimes = new Date(startTimes.setMinutes(startTimes.getMinutes()+countdownMinute));//結(jié)束時(shí)間 
    var curTimes = new Date();//當(dāng)前時(shí)間 
    var surplusTimes = endTimes.getTime()/1000 - curTimes.getTime()/1000;//結(jié)束毫秒-開始毫秒=剩余倒計(jì)時(shí)間 
     
    // 進(jìn)入倒計(jì)時(shí) 
    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('時(shí)間到！'); 
        clearInterval(countdowns); 
      } 
    },1000); 
 
 
  </script> 
  </body> 
</html>

以上所述是小編給大家介紹的JS實(shí)現(xiàn)根據(jù)用戶輸入分鐘進(jìn)行倒計(jì)時(shí)功能，希望對(duì)大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: