Rumah > Artikel > hujung hadapan web > Laksanakan kod contoh kira detik yang cantik dan praktikal berdasarkan jQuery_jquery

Laksanakan kod contoh kira detik yang cantik dan praktikal berdasarkan jQuery_jquery

WBOYasal: 2016-05-16 15:22:411098semak imbas

Kesan kira detik mempunyai pelbagai aplikasi, seperti kira detik Sukan Olimpik, kira detik peperiksaan kemasukan kolej dan kira detik cuti, dsb. Bahagian ini berkongsi kesan kira detik yang lebih cantik dan praktikal.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>倒计时效果代码</title>
<style type="text/css">
* {
 padding:0;
 margin:0;
}
.colockbox {
 width:250px;
 height:30px;
 overflow:hidden;
 color:#000000;
 background:url(mytest/jQuery/colockbg.png) no-repeat;
 margin:0px auto;
}
.colockbox span {
 float:left;
 display:block;
 width:40px;
 height:29px;
 line-height:29px;
 font-size:20px;
 font-weight:bold;
 text-align:center;
 color:#ffffff;
 margin-right:22px;
}
</style>
<script type="text/javascript" src="http://www.softwhy.com/mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(function(){ 
 countDown("2016/2/3 6:30:59","#colockbox1"); 
}); 
function countDown(time,id){ 
 var day_elem=$(id).find('.day'); 
 var hour_elem=$(id).find('.hour'); 
 var minute_elem=$(id).find('.minute'); 
 var second_elem=$(id).find('.second'); 
 var end_time = new Date(time).getTime();
 var sys_second = (end_time-new Date().getTime())/1000; 
 var timer = setInterval(function(){ 
  if(sys_second>1) { 
   sys_second-=1; 
   var day=Math.floor((sys_second/3600)/24); 
   var hour=Math.floor((sys_second/3600)%24); 
   var minute=Math.floor((sys_second/60)%60); 
   var second=Math.floor(sys_second%60); 
   $(day_elem).text(day);
   $(hour_elem).text(hour<10&#63;"0"+hour:hour);
   $(minute_elem).text(minute<10&#63;"0"+minute:minute); 
   $(second_elem).text(second<10&#63;"0"+second:second);
  } 
  else { 
   clearInterval(timer); 
  } 
 }, 1000); 
} 
</script>
</head>
<body>
<div class="colockbox" id="colockbox1"> 
 <span class="day">00</span> 
 <span class="hour">00</span> 
 <span class="minute">00</span> 
 <span class="second">00</span> 
</div>
</body>
</html>

Kod di atas memenuhi keperluan kami dan boleh mencapai kesan kira detik dari saat ke hari Proses pelaksanaan diperkenalkan di bawah.

1. Prinsip pelaksanaan:

Prinsipnya agak mudah ialah untuk mendapatkan cap masa masa tamat tolak cap masa masa semasa, iaitu perbezaan bilangan saat antara kedua-duanya perbezaan jam, dan kemudian bahagikan Ambil 24, dan kemudian gunakan fungsi Math.floor() untuk membulatkan ke bawah, iaitu bilangan hari Prinsip ini digunakan untuk mendapatkan jam, minit dan saat di bawah. Gunakan fungsi pemasa untuk memanggil fungsi yang sepadan setiap saat untuk mencapai kesan undur.

2. Kod ulasan:

1.$(function(){}), apabila struktur dokumen dimuatkan sepenuhnya, laksanakan kod dalam fungsi.
2.countDown("2016/2/3 6:30:59","#colockbox1"), panggil fungsi, parameter pertama ialah masa tamat tempoh, dan parameter kedua ialah nilai atribut id bagi div.
3.function countdown(time,id){}, isytiharkan fungsi ini.
4.var day_elem=$(id).find('.day'), dapatkan objek yang nilai atribut kelasnya ialah hari di bawah div.
5.var hour_elem=$(id).find('.hour'), dapatkan objek yang nilai atribut kelasnya ialah jam di bawah div.
6.var minute_elem=$(id).find('.minute'), dapatkan objek yang nilai atribut kelasnya adalah minit di bawah div.
7.var second_elem=$(id).find('.second'), dapatkan objek yang nilai atribut kelasnya adalah kedua di bawah div.
8.var end_time=new Date(time).getTime(), dapatkan cap masa peristiwa tamat tempoh.
9.var sys_second=(end_time-new Date().getTime())/1000, dapatkan bilangan perbezaan saat antara masa tamat tempoh dan masa semasa.
10.var timer=setInterval(function(){}, 1000), laksanakan fungsi setiap saat.
11.if(sys_second>1), jika perbezaan dalam saat lebih besar daripada 1.
12.sys_second-=1, tolak satu daripada yang kedua.
13.var day=Math.floor((sys_second/3600)/24), dapatkan perbezaan bilangan hari.
14.var hour=Math.floor((sys_second/3600)$), dapatkan perbezaan bilangan jam, sila ambil perhatian bahawa yang berikut ialah operasi modulo.
15.var minute=Math.floor((sys_second/60)`), dapatkan bilangan perbezaan minit.
16.var second=Math.floor(sys_second`), dapatkan perbezaan bilangan saat.
17.$(day_elem).text(day), menulis hari ke dalam elemen span.
18.$(hour_elem).text(hour<10?"0" hour:hour), tulis jam ke dalam rentang Jika bilangan jam kurang daripada 10, tambah 0 di hadapan, dan sebab yang sama di belakang.
19.clearInterval(pemasa), jika perbezaan dalam saat mencapai 0, hentikan perlaksanaan setInterval fungsi pemasa.

Kandungan di atas ialah kod contoh kira detik yang cantik dan praktikal berdasarkan jQuery yang telah dikongsi oleh editor dengan anda. Saya harap perkongsian artikel ini dapat membantu 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：Paparan animasi jQuery dan contoh demonstrasi kesan menyembunyikan (dengan muat turun kod sumber demo)_jqueryArtikel seterusnya：Paparan animasi jQuery dan contoh demonstrasi kesan menyembunyikan (dengan muat turun kod sumber demo)_jquery

Artikel berkaitan

Lihat lagi