cari

Rumah >hujung hadapan web >tutorial js >Contoh untuk menerangkan kesan undur berbilang milisaat js pada kemahiran time_javascript yang sama

Contoh untuk menerangkan kesan undur berbilang milisaat js pada kemahiran time_javascript yang sama

WBOY
WBOYasal
2016-05-16 15:21:591280semak imbas

Contoh dalam artikel ini menerangkan kod undur js milisaat dan kesan serentak, dan berkongsinya dengan semua orang untuk rujukan anda Kandungan khusus adalah seperti berikut

Rendering:

Fungsi pelaksanaan: panggil fungsi, masukkan id elemen html dan tarikh akhir (cap waktu unix), dan cetak kira detik ke tarikh akhir semasa dalam elemen html, tepat kepada milisaat

Rendering adalah seperti berikut: 

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style>
      div{
        width: 100%;
        height: 50px;
        margin-bottom: 5px;
        background: yellowgreen;
      }
    </style>
  </head>

  <body>
    
    <h2>毫秒的倒计时</h2>
    <div id="timer1"></div>
    <div id="timer2"></div>
    <div id="timer3"></div>
    <div id="timer4"></div>
    <script>
      var addTimer = function(){
        var list = [],
          interval;
          
        return function(id,timeStamp){
          if(!interval){
            interval = setInterval(go,1);
          }
          list.push({ele:document.getElementById(id),time:timeStamp});
        }
        
        function go() { 
          for (var i = 0; i < list.length; i++) { 
            list[i].ele.innerHTML = changeTimeStamp(list[i].time); 
            if (!list[i].time) 
              list.splice(i--, 1); 
          } 
        }

        //传入unix时间戳，得到倒计时
        function changeTimeStamp(timeStamp){
          var distancetime = new Date(timeStamp*1000).getTime() - new Date().getTime();
          if(distancetime > 0){ 
　　　　　　　　　　　　　　//如果大于0.说明尚未到达截止时间       
            var ms = Math.floor(distancetime%1000);
            var sec = Math.floor(distancetime/1000%60);
            var min = Math.floor(distancetime/1000/60%60);
            var hour =Math.floor(distancetime/1000/60/60%24);
            
            if(ms<100){
              ms = "0"+ ms;
            }
            if(sec<10){
              sec = "0"+ sec;
            }
            if(min<10){
              min = "0"+ min;
            }
            if(hour<10){
              hour = "0"+ hour;
            }
            
            return hour + ":" +min + ":" +sec + ":" +ms;
          }else{
　　　　　　　　　　　　　　//若否，就是已经到截止时间了
            return "已截止！"
          }  
        }        
      }();
      
      addTimer("timer1",1451923200);//1月5日00点，unix时间戳自己去百度一下，就有的
      addTimer("timer2",1451926800);//1月5日01点
      addTimer("timer3",1451930400);//1月5日02点
      addTimer("timer4",1452020400);//1月6日03点

    </script>
    
  </body>

</html>

Bagaimana untuk menggunakan fungsi ini?

addTimer("#id", timestamp int); PS:

Sebenarnya fungsi ini mempunyai masalah kecil: tidak memaparkan nombor tarikh akhir kerana bos mengatakan bahawa masa undur kami hanya beberapa jam, jadi saya terlalu malas untuk menulis apabila menilai jam dan hari. undur itu. Jadi jika cap masa masuk lebih daripada 1 hari yang lalu. Kemudian anda akan melihat hasilnya seperti ini: 02:11:32:874~~Tinggal 2 jam sahaja lagi! Ia jelas salah, bukan?

jadi, ada 2 pilihan di sini:

Kaedah 1:

Tukar var jam =Math.floor(distancetime/1000/60/60$); 60); Jika tarikh akhir lebih daripada satu hari yang lalu, kedudukan jam akan memaparkan nombor yang lebih besar daripada 24 sebagai contoh: 36:45:22:888

Kaedah 2:

Tulis pembolehubah lain untuk mengira bilangan hari Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Melaksanakan iklan imej terapung rawak berdasarkan kemahiran JavaScript code_javascriptArtikel seterusnya：Melaksanakan iklan imej terapung rawak berdasarkan kemahiran JavaScript code_javascript

Artikel berkaitan

Lihat lagi