jquery實現倒數效果_jquery
- WBOY原創
- 2016-05-16 15:25:451662瀏覽
設計一個答案的小遊戲，每題可以有20秒時間作答，超過時間就要給出對應的提醒，由於20秒時間太長，不適合做GIF動態圖，下面來看一下我寫的5秒倒數的測試程序結果：
一、主體程式
<!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>
二、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程式估計比較容易吧，希望對小夥伴有幫助。
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn