Maison > Article > interface Web > Exemples d'effets de compte à rebours implémentés par JS (2 exemples)_compétences javascript
L'exemple de cet article décrit l'effet de compte à rebours implémenté par JS. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :
Nous constatons souvent que certains sites Web aiment avoir un effet de compte à rebours lors de l'inscription, c'est-à-dire le nombre de secondes qu'il faut pour s'inscrire avant de pouvoir cliquer sur le bouton. Le but est de vous obliger à lire ses précautions d'inscription. Un effet très pratique ; de plus, lorsque nous passons des examens en ligne, nous rencontrerons certainement l'effet compte à rebours. Comment cet effet compte à rebours est-il obtenu ? Ensuite nous utiliserons Js pour implémenter un effet de compte à rebours, le code spécifique :
page 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>
timer.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; }
La capture d'écran de l'effet en cours d'exécution est la suivante :
Jetons un coup d'œil à un autre effet de compte à rebours 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>
La capture d'écran de l'effet en cours d'exécution est la suivante :
Les lecteurs peuvent choisir un code de compte à rebours à utiliser selon leurs propres préférences.
J'espère que cet article sera utile à tout le monde dans la programmation JavaScript.