jQuery melaksanakan aktiviti produk countdown_jquery

Undur detik biasanya digunakan untuk menunjukkan berapa banyak masa yang tinggal antara detik tertentu pada masa hadapan dan masa sekarang. Kira detik digunakan secara meluas di WEB, seperti kira detik sistem peperiksaan, kira detik aktiviti keutamaan dalam tapak web pembelian kumpulan, dsb. Hari ini, kami akan menggunakan jQuery untuk melaksanakan fungsi kira detik yang mudah.

Artikel ini adalah berdasarkan kiraan detik laman web pembelian kumpulan Kami tahu bahawa laman web tersebut akan menetapkan masa tamat untuk setiap promosi (komoditi), iaitu masa tamat tetapi apabila masa sistem mencapai masa tamat bermakna aktiviti sudah tamat. Oleh itu, kita perlu menentukan masa tamat aktiviti dalam HTML.
HTML

<ul class="prolist"> 
   <li><img src="images/p1.jpg" />简约时尚皮带男士手表一款69元<p class="endtime showtime" 
   value="1354365003"></p></li> 
   <li><img src="images/p2.jpg" />高强度无毒树脂材料榨汁器24元<p class="endtime showtime" 
   value="1350748800"></p></li> 
   <li><img src="images/p3.jpg" />茶香番茄/乌梅/杨梅0.48元<p class="endtime showtime" 
   value="1346487780"></p></li> 
   <li><img src="images/p4.jpg" />沙滩鞋男士户外凉鞋69元<p class="endtime showtime" 
   value="1367380800"></p></li> 
</ul> 

Dalam kod html di atas, kami membuat senarai untuk memaparkan nama acara, gambar dan kira detik Perkara utama ialah kami menentukan masa tamat untuk setiap aktiviti: nilai nilai atribut .endtime, yang merupakan rentetan nombor. . , mewakili bilangan saat sejak 1 Januari 1970, yang dijana oleh bahagian belakang (PHP). Contohnya, masa tamat 01-05-2013 12:00 boleh ditukar kepada 1367380800 saat melalui PHP dan saat yang ditukar boleh digunakan dalam kira detik pengiraan jQuery berikutnya.
CSS
Kita perlu memberikan senarai pada halaman penampilan yang lebih bagus sedikit.

.endtime{font-size:20px; font-family:"Microsoft Yahei"; color:#000} 
.prolist{margin:10px auto} 
.prolist li{float:left; width:320px; height:240px; margin:10px; font-size:14px; 
position:relative} 
.prolist li img{width:320px; height:198px;} 
.showtime{position:absolute; top:174px; height:24px; line-height:24px; 
background:#333; color:#fff; opacity:.6; display:none} 

Simpan dan pratonton kesan halaman, anda boleh melihat senarai aktiviti yang tersusun rapi.
jQuery

var serverTime = * 1000; //服务器时间，毫秒数 
$(function(){ 
  var dateTime = new Date(); 
  var difference = dateTime.getTime() - serverTime; //客户端与服务器时间偏移量 
   
  setInterval(function(){ 
   $(".endtime").each(function(){ 
    var obj = $(this); 
    var endTime = new Date(parseInt(obj.attr('value')) * 1000); 
    var nowTime = new Date(); 
    var nMS=endTime.getTime() - nowTime.getTime() + difference; 
    var myD=Math.floor(nMS/(1000 * 60 * 60 * 24)); //天 
    var myH=Math.floor(nMS/(1000*60*60)) % 24; //小时 
    var myM=Math.floor(nMS/(1000*60)) % 60; //分钟 
    var myS=Math.floor(nMS/1000) % 60; //秒 
    var myMS=Math.floor(nMS/100) % 10; //拆分秒 
    if(myD>= 0){ 
      var str = myD+"天"+myH+"小时"+myM+"分"+myS+"."+myMS+"秒"; 
    }else{ 
      var str = "已结束！";  
    } 
    obj.html(str); 
   }); 
  }, 100); //每个0.1秒执行一次 
}); 

Kami mula-mula mendapatkan masa pelayan Kami perlu memastikan kiraan detik konsisten dengan masa pelayan, supaya kiraan detik yang dilihat oleh setiap pelanggan adalah sama masalah kira detik tidak segerak disebabkan oleh masa mesin klien tidak konsisten dengan masa pelayan. Sudah tentu, masa pelayan ini perlu diperoleh menggunakan bahasa sebelah pelayan Artikel ini menggunakan bilangan saat yang diperolehi oleh fungsi masa() PHP. Ingat untuk mendarabkannya dengan 1000 untuk menukarnya kepada milisaat.
Kami mencipta pemasa melalui setInterval dan melaksanakan kod dalam setInterval setiap 100 milisaat.
Kemudian dalam pemasa, kami menggunakan kaedah each() jQuery untuk melintasi senarai pada halaman dan mengira hari, jam, minit dan saat.
Oleh kerana fungsi getTime() JavaScript memperoleh bilangan milisaat, /1000 digunakan dalam proses pengiraan,
Kami tidak mahu memaparkan semua kira detik dalam senarai pada satu halaman, tetapi memerlukan pengguna meluncurkan tetikus ke atas gambar dalam senarai untuk memaparkan kira detik yang sepadan, jadi kami juga perlu menambah kod tambahan berikut :

$(function(){ 
  $(".prolist li img").each(function(){ 
    var img = $(this); 
    img.hover(function(){ 
      img.next().show(); 
    },function(){ 
      img.next().hide(); 
    }); 
  }); 
}); 

Pemarahan akhir:

Perkara di atas adalah mengenai kira detik. Saya harap ia akan membantu kajian semua orang.