jquery特效(8)—倒计时
最近公司在做一个答题的小游戏,每道题可以有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程序估计比较容易吧~~~希望对小伙伴有帮助,有什么疑问可以留言给我。
唉,最近心情比较低落,到处都是感伤的事情,不想长大,不想面对,我只想静静地写个程序。。。。。。
个性签名:别低头,王冠会掉,别后退,梦想会碎~~~~~