设计一个答题的小游戏,每道题可以有20秒时间作答,超过时间就要给出相应的提醒,由于20秒时间太长,不适合做GIF动态图,下面来看一下我写的5秒倒计时的测试程序结果:
一、主体程序
rush:xhtml;">
手写倒计时程序
二、CSS样式
rush: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格式
3、判断时间是否为0,如果为0则代表计时结束,此时需要给出提示或者做其他事情
下面来看具体实现的倒计时程序:
=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程序估计比较容易吧,希望对小伙伴有帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。