jQuery+css實現的切換圖片功能代碼
786
2024-03-12
設計一個答題的小游戲，每道題可以有20秒時間作答，超過時間就要給出相應的提醒，由于20秒時間太長，不適合做GIF動態圖，下面來看一下我寫的5秒倒計時的測試程序結果：
一、主體程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>手寫倒計時程序</title>
<link rel="stylesheet" type="text/css" />
</head>
<body>
<section class="countDown">
<span id="countDownTime"></span>
<section class="clear"></section>
</section>
<script src="http://www.gimoo.net/t/1904/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="http://www.gimoo.net/t/1904/js/layout.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
二、CSS樣式
*{
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;
}
三、Jquery程序
先來說一下倒計時的原理：
1、將時間轉為0:0格式
2、需要開啟一個定時器，每隔1000ms就讓時間自動減1
3、判斷時間是否為0，如果為0則代表計時結束，此時需要給出提示或者做其他事情
下面來看具體實現的倒計時程序：
$(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);
}
})
帶著我寫的原理再去看這段JS程序估計比較容易吧，希望對小伙伴有幫助。
