cari

Rumah  >  Artikel  >  hujung hadapan web  >  Contoh kesan undur yang dilaksanakan oleh JS (2 contoh)_kemahiran javascript

Contoh kesan undur yang dilaksanakan oleh JS (2 contoh)_kemahiran javascript

WBOY
WBOYasal
2016-05-16 15:23:571380semak imbas

Contoh dalam artikel ini menerangkan kesan kira detik yang dilaksanakan oleh JS. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Kami sering melihat bahawa sesetengah laman web suka mempunyai kesan undur butang semasa mendaftar, iaitu berapa saat yang diperlukan untuk mendaftar sebelum anda boleh mengklik butang tersebut adalah untuk memaksa anda membaca langkah berjaga-jaga pendaftarannya Kesan yang sangat praktikal; di samping itu, apabila kita mengambil peperiksaan dalam talian, kita pasti akan menghadapi kesan undur Bagaimana kesan undur ini dicapai? Seterusnya kita akan menggunakan Js untuk melaksanakan kesan kira detik, kod khusus:

halaman html: 

<html> 
 <head> 
  <title>倒计时</title> 
  <!--以下为css样式--> 
  <style type= "text/css"> 
   .daojishi h2 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    margin-bottom:5px; 
    color:#151515; 
   } 
   .daojishi #timer 
   { 
    font-family:Helvetica, Microsoft YaHei, Arial, sans-serif; 
    font-size:14px; 
    color:#151515; 
    font-weight:bold; 
   } 
  </style> 
  <script type = "text/javascript" src = "timer.js"> 
  </script> 
 </head> 
 <body onload = "timer()"> 
  <div class = "daojishi"> 
   <h2>剩余时间为：</h2> 
   <div id = "timer"> 
   </div> 
  </div> 
 </body> 
</html>

pemasa.js: 

function timer() 
{
 var ts = (new Date(2018, 11, 11, 9, 0, 0)) - (new Date());//计算剩余的毫秒数
 var dd = parseInt(ts / 1000 / 60 / 60 / 24, 10);//计算剩余的天数
 var hh = parseInt(ts / 1000 / 60 / 60 % 24, 10);//计算剩余的小时数
 var mm = parseInt(ts / 1000 / 60 % 60, 10);//计算剩余的分钟数
 var ss = parseInt(ts / 1000 % 60, 10);//计算剩余的秒数
 dd = checkTime(dd);
 hh = checkTime(hh);
 mm = checkTime(mm);
 ss = checkTime(ss);
 document.getElementById("timer").innerHTML = dd + "天" + hh + "时" + mm + "分" + ss + "秒";
 setInterval("timer()",1000);
}
function checkTime(i)
{
  if (i < 10) {
  i = "0" + i;
 }
  return i;
}

Tangkapan skrin kesan berjalan adalah seperti berikut:

Mari kita lihat satu lagi kesan kira detik JS: 

<!doctype html>
<html>
<head>
 <meta charset="utf-8">
 <title>倒计时js代码</title>
</head>
<body>
<DIV id="CountMsg" class="HotDate">
 <span id="t_d">00天</span>
 <span id="t_h">00时</span>
 <span id="t_m">00分</span>
 <span id="t_s">00秒</span>
</DIV>
<script type="text/javascript">
 function getRTime(){
  var EndTime= new Date('2016/05/1 10:00:00'); //截止时间
  var NowTime = new Date();
  var t =EndTime.getTime() - NowTime.getTime();
  /*var d=Math.floor(t/1000/60/60/24);
  t-=d*(1000*60*60*24);
  var h=Math.floor(t/1000/60/60);
  t-=h*60*60*1000;
  var m=Math.floor(t/1000/60);
  t-=m*60*1000;
  var s=Math.floor(t/1000);*/
  var d=Math.floor(t/1000/60/60/24);
  var h=Math.floor(t/1000/60/60%24);
  var m=Math.floor(t/1000/60%60);
  var s=Math.floor(t/1000%60);
  document.getElementById("t_d").innerHTML = d + "天";
  document.getElementById("t_h").innerHTML = h + "时";
  document.getElementById("t_m").innerHTML = m + "分";
  document.getElementById("t_s").innerHTML = s + "秒";
 }
 setInterval(getRTime,1000);
 </script>
</body>
</html>

Tangkapan skrin kesan berjalan adalah seperti berikut:

Pembaca boleh memilih kod kira detik untuk digunakan mengikut keutamaan mereka sendiri.

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan JavaScript.

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 data aplikasi pemalam kalendar FullCalendar (1)_kemahiran javascriptArtikel seterusnya：Paparan data aplikasi pemalam kalendar FullCalendar (1)_kemahiran javascript

Artikel berkaitan

Lihat lagi