Entwerfen Sie ein kleines Spiel zur Beantwortung von Fragen. Wenn die Zeit überschritten wird, wird eine entsprechende Erinnerung angezeigt. Da 20 Sekunden zu lang sind, ist es nicht für die Erstellung von GIF-Animationen geeignet Schauen Sie sich an, was ich geschrieben habe. Die Ergebnisse des 5-Sekunden-Countdown-Testprogramms:
1. Hauptprogramm
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>手写倒计时程序</title>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
</head>
<body>
<section class="countDown">
<span id="countDownTime"></span>
<section class="clear"></section>
</section>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layout.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
2. CSS-Stil
*{
margin: 0;
padding:0;
}
html{
font-size: 12px;
}
.countDown{
width: 3.8rem;
text-align: center;
margin: 2rem auto 0 auto;
}
.countDown #countDownTime{
font-size: 2rem;
}
3. JQuery-Programm
Lass uns zunächst über das Prinzip des Countdowns sprechen:
1. Konvertieren Sie die Zeit in das 0:0-Format
2. Sie müssen einen Timer starten, um die Zeit automatisch alle 1000 ms um 1 zu reduzieren
3. Stellen Sie fest, ob die Zeit 0 ist. Wenn sie 0 ist, bedeutet dies, dass der Timer abgelaufen ist. Zu diesem Zeitpunkt müssen Sie eine Eingabeaufforderung geben oder andere Dinge tun
Sehen wir uns die konkrete Umsetzung des Countdown-Programms an:
$(function(){
var countDownTime=parseInt(5); //在这里设置每道题的答题时长
function countDown(countDownTime){
var timer=setInterval(function(){
if(countDownTime>=0){
showTime(countDownTime);
countDownTime--;
}else{
clearInterval(timer);
alert("计时结束,给出提示");
}
},1000);
}
countDown(countDownTime);
function showTime(countDownTime){ //这段是计算分和秒的具体数
var minute=Math.floor(countDownTime/60);
var second=countDownTime-minute*60;
$("#countDownTime").text(minute+":"+second);
}
})
Mit den Prinzipien, die ich geschrieben habe, wird es wahrscheinlich einfacher sein, sich dieses JS-Programm anzusehen. Ich hoffe, dass es meinen Freunden hilfreich sein wird.
