1、动态效果图：
2、代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>考试倒计时</title>
<style type="text/css">
.all{
width: 300px;
margin: 0 auto;
}
#timer{
text-align: center;
}
</style>
</head>
<body>
<div class="all">
<img id="image">
<div id="timer">
<input type="text" id="numbers" placeholder="输入考试时间（秒）"/>
<input type="button" value="开始考试" onclick="show()"/>
</div>
</div>
<script type="text/javascript">
function show(){
// maxtime,time1,time2,time3,time4均为全局变量
maxtime = parseInt(document.getElementById('numbers').value); // 获取输入框中的值，并将其转化成整数
time1 = Math.round(maxtime*0.75); // 考试进行到1/4
time2 = Math.round(maxtime*0.5); // 考试进行到1/2
time3 = Math.round(maxtime*0.25); // 考试进行到3/4
time4 = 0; // 考试结束
image.src="images/exam-0.png";
timing = setInterval("showTime()",1000); // 设置定时器timing，每秒刷新调用一次函数showTime()
}
function showTime(){
if(maxtime>0){
maxtime--;
// minutes,seconds为局部变量
var minutes = Math.floor(maxtime/60); // 计算出分钟
var seconds = maxtime%60; // 计算出秒
// 时间为个位数时，补零
if(minutes<10){minutes = "0" + minutes};
if(seconds<10){seconds = "0" + seconds};
document.getElementById('timer').innerHTML="距离本场考试结束还有"+minutes+"分"+seconds+"秒!";
// 考试进行到相应的时间点时切换对应图片
if(maxtime == time1){image.src="images/exam-1.png";}
else if(maxtime == time2){image.src="images/exam-2.png";}
else if(maxtime == time3){image.src="images/exam-3.png";}
else if(maxtime == time4){image.src="images/exam-4.png";}
}
else{
clearInterval(timing); // 清除定时器timing
alert("时间到，考试结束!");
}
}
</script>
</body>
</html>
本人是web开发初学者，欢迎各位留言交流。
288
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
