suchen

Heim  >  Artikel  >  Web-Frontend  >  JS implementiert eine Countdown-Funktion basierend auf Benutzereingabeminuten

JS implementiert eine Countdown-Funktion basierend auf Benutzereingabeminuten

高洛峰
高洛峰Original
2016-12-07 09:23:391633Durchsuche

Kein Unsinn mehr, lassen Sie mich einfach den Code für Sie posten. Der spezifische Code lautet wie folgt:

Tatsächlich bin ich schon oft auf diesen Countdown gestoßen, aber ich habe nur den Quellcode anderer Leute verwendet.
Als Reaktion auf die Bedürfnisse des Projekts habe ich es endlich ernst genommen und mir eine Woche Zeit genommen, um ein scheinbar einfaches Problem zu lösen.
Der Quellcode kann direkt kopiert und eingefügt werden.

Redundante Version + vereinfachte Version. 

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
  <title></title> 
 </head> <body> 
  <script type="text/javascript"> 
    var createTime = &#39;2016-11-14 10:20:00&#39;;//开始时间 
    var limitTimes = 10;//时间长度 
    // 倒计时 入口 
    countdowns = window.setInterval(function(){ 
      var arr = cutDoowns(limitTimes,createTime); 
      document.write(formatDate(arr[0])+&#39;:&#39;+formatDate(arr[1])+&#39;:&#39;+formatDate(arr[2])+&#39;</br>&#39;); 
      if(arr[2]){ 
        document.write(&#39;时间到!&#39;); 
      } 
    },1000); 
  
    /* 
      s,10分钟后的具体日期： 
      date,开始时间 
      然后转化成毫秒比较，所得的差值化成分秒，就是倒计时的分秒。 
     */
    function cutDoowns(s,date){ 
      console.log(&#39;&#39;); 
      var flag = false; 
      var arr = [];//arr[0]:分，arr[1]:秒，arr[2]:返回boolean 
      var now = new Date();//当前时间 
      var now1 = new Date(date);//开始时间 
      console.log(&#39;开始时间 now1: &#39;+now1); 
      now1.setMinutes(now1.getMinutes()+s);//10分钟后的时间 
      console.log(&#39;当前时间 now ：&#39;+now); 
      console.log(&#39;10分钟时 now1：&#39;+now1); 
  
      // 转化成年月日 时分秒 格式 
      var n = now.getFullYear()+&#39;/&#39;+(now.getMonth()+1)+&#39;/&#39;+now.getDay()+&#39; &#39;+now.getHours()+&#39;:&#39;+now.getMinutes()+&#39;:&#39;+now.getSeconds(); 
      var n1 = now1.getFullYear()+&#39;/&#39;+(now1.getMonth()+1)+&#39;/&#39;+now1.getDay()+&#39; &#39;+now1.getHours()+&#39;:&#39;+now1.getMinutes()+&#39;:&#39;+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(&#39;当前时间：&#39;+n+&#39;，转化成毫秒：&#39;+time1+&#39;，time11：&#39;+time11); 
      console.log(&#39;10分钟时：&#39;+n1+&#39;，转化成毫秒：&#39;+time2+&#39;，time21：&#39;+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(&#39;剩余时间，minute: &#39;+minute+&#39;，second: &#39;+second+&#39;，surplusSec:&#39;+surplusSec); 
      // var second = Math.round(surplusTimes);//秒数 
      console.log(&#39;剩余时间，minute: &#39;+minute+&#39;，second: &#39;+second+&#39;，surplusSec:&#39;+surplusSec); 
  
      arr = [minute,second,flag]; 
      return arr; 
    } 
  
    //格式化日期：把单字符转成双字符 
    function formatDate(n){ 
      n = n.toString(); 
      // console.log(n); 
      if(n.length<=1){ 
        n = &#39;0&#39;+n; 
      } 
      // console.log(n); 
      return n; 
    } 
  </script> 
  </body> 
</html>

Vereinfachte Version: 

<!DOCTYPE html> 
<html> 
  <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(&#39;2016-11-16 15:55&#39;);//开始时间 new Date(&#39;2016-11-16 15:21&#39;); 
    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+&#39;:&#39;+secd); 
      if(surplusTimes<=0){ 
        console.log(&#39;时间到！&#39;); 
        clearInterval(countdowns); 
      } 
    },1000); 
  
  
  </script> 
  </body> 
</html>


Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Javascript implementiert eine einfache Version des SternetötungsspielsNächster Artikel：Javascript implementiert eine einfache Version des Sternetötungsspiels

In Verbindung stehende Artikel

Mehr sehen