Pemasa sektor dilaksanakan berdasarkan jQuery dengan kod sumber download_jquery

Rendering adalah seperti berikut:

Demonstrasi kesan Muat turun kod sumber

Pietimer ialah pemasa yang boleh menghasilkan perubahan berbentuk kipas pada halaman Ia berdasarkan jQuery dan boleh menyesuaikan masa pemasaan dalam beberapa saat, menyesuaikan warna, lebar dan ketinggian berbentuk kipas, dsb., dan menyokong a. fungsi panggil balik apabila masa tamat Kawal mula dan jeda, sesuai untuk halaman yang memerlukan pemasa, seperti peperiksaan dalam talian dan senario jualan masa terhad.

HTML

Mula-mula muatkan fail perpustakaan jquery dan fail pietimer.js.

<script src="jquery.min.js"></script> 
<script src="jquery.pietimer.min.js"></script> 

Kemudian kami meletakkan butang "Mula" dan "Jeda" pada halaman, serta elemen #demo untuk melukis grafik peminat, dan kemudian .boom untuk menggesa penyelesaian yang dijadualkan.

<p><a href="#" id="start" class="btn">开始</a> <a href="#" id="pause" class="btn">暂停</a></p> 
<p id="demo"></p> 
<p class="boom">时间到！</p> 

jQuery

Mula-mula kita perlu melukis sektor dalam #demo, yang dipanggil melalui $('#demo').pietimer(). Parameter saat mewakili masa pemasaan (saat), dan warna mewakili warna sektor. Ia boleh ditetapkan melalui rgba, atau Menggunakan nilai warna heksadesimal, seperti #FFFFFF, lebar dan tinggi mewakili jejari sektor, dan fungsi panggil balik seterusnya menunjukkan bahawa ia dicetuskan apabila pemasaan selesai.

$(function(){  
 $('.boom').hide();  
 $('#demo').pietimer({ 
  seconds: , 
  color: 'rgba(, , , .)', 
  height: , 
  width: 
 }, 
 function(){ 
  $('.boom').show('slow'); 
 }); 
}); 

Sudah tentu, kod di atas melukis sektor dan mentakrifkan pilihan parameter yang berkaitan, tetapi untuk benar-benar mencetuskan pemasa, anda perlu memanggil $('#demo').pietimer('start'), dan jeda yang sama ialah : $('#demo').pietimer('pause'), selepas menjeda, anda juga boleh mengklik "Mula" untuk meneruskan pemasa.

$(function(){  
 $('a#start').click(function(){ 
  $('.boom').hide(); 
  $('#demo').pietimer('start'); 
  return false; 
 }); 
 $('a#pause').click(function(){ 
  $('#demo').pietimer('pause'); 
  return false; 
 });  
}); 

Kandungan di atas adalah pengenalan editor kepada pemasa kipas berdasarkan jQuery dengan muat turun kod sumber saya harap anda menyukainya.