Hauptsächlich verwendete Wissenspunkte für den Countdown: 1. Das setInterval, das das Zeitintervall festlegt, kann durch clearInterval abgebrochen werden
2. Konvertieren Sie Millisekunden in das Stunden- und Minutenformat
Dies ist das Rendering 
Das Folgende ist die Funktion in js
var shijian=3600;
var time=null;
function start(){
time=setInterval("count()",1000);//返回值time只是为了需要暂停的时候clearInterval(time)清除时间间隔
}
function count(){
if(shijian<0){
alert("time out");
pause();//一般情况下这个if条件是用来提交数据用的,这里只是测试一下。
}else{
$("#time p").html(Math.floor(shijian/60)+":"+shijian%60);//这里用到将毫秒转换到时分格式
shijian--;
console.info(time);
}
}
function pause(){
clearInterval(time);
}
function goOn(){
time = setInterval("count()",1000);//重新设置时间间隔
}Das zweite sind HTML-Ressourcen. Der Einfachheit halber habe ich das CSS direkt in HTML geschrieben
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="1.js"></script>
<script src="jquery-1.8.3.min.js"></script>
<style type="text/css">
input{
background-color: #9fc5f1;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
font-size:14px;
font-weight: bold;
}
#time p{
color: #1f6dc2;
font-size: 48px;
font-weight: bold;
margin-left:90px;
margin-bottom:0px;
}
</style>
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div id="time">
<p>00:00</p>
<input type="button" value="开始" onclick="start()"/>
<input type="button" value="暂停" onclick="pause()"/>
<input type="button" value="继续" onclick="goOn()"/>
</div>
</body>
</html>Das obige ist der detaillierte Inhalt vonImplementieren Sie die Countdown-Funktion in HTML und JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
