Das Beispiel in diesem Artikel beschreibt den von JS implementierten Countdown-Effekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Wir sehen oft, dass einige Websites bei der Registrierung einen Button-Countdown-Effekt haben, der angibt, wie viele Sekunden es dauert, bis Sie auf den Button klicken können. Der Zweck besteht darin, Sie zu zwingen, die Registrierungsvorkehrungen zu lesen Ein sehr praktischer Effekt; außerdem werden wir bei Online-Prüfungen auf jeden Fall auf den Countdown-Effekt stoßen. Als nächstes werden wir Js verwenden, um einen Countdown-Effekt zu implementieren, den spezifischen Code:
HTML-Seite:
<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;
}
Der Screenshot des Laufeffekts sieht wie folgt aus:
Werfen wir einen Blick auf einen weiteren JS-Countdown-Effekt:
<!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>
Der Screenshot des Laufeffekts sieht wie folgt aus:
Leser können einen Countdown-Code auswählen, den sie entsprechend ihren eigenen Vorlieben verwenden möchten.
Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.
