Html+Css+js实现计时器
人狠话不多,先上图
实现原理:
1.通过js控制图片的路径,动态替换图片
2.通过js控制图片的显示或隐藏,动态替换图片
一版的实现代码:
game.html
<body>
<div class="game-startNumber flex">
<div class="staticTime">
<img name="0.png">
<img name="0.png">
</div>
<div class="activityTime" id="clockNum">
<img name="0.png">
<img name="0.png">
<img name="0.png">
<img name="0.png">
</div>
</div>
<div class="game-beginBtn" id="startBtn">开始</div>
<div class="game-beginBtn" id="endBtn" style="display:none">我爱你</div>
</body>
game.css
/*弹性盒子*/
.flex{
display: flex;
display: -webkit-flex;
}
.game-startNumber{
position: relative;
top: 2.7rem;
width: 3.6rem;
padding: 0 .3rem;
height: 1.8rem;
margin: auto;
line-height: 2.2rem;
background: url(../images/game-number.png) no-repeat;
background-size: 100% auto;
}
.game-startNumber img{
display: inline-block;
width: .4rem;
height: .7rem;
}
.staticTime{
flex: 1;
-webkit-flex: 1;
-moz-flex:1;
}
.staticTime>img:nth-child(1){
margin: 0 .07rem;
}
.staticTime>img:nth-child(2){
margin: 0 0 0 .05rem;
}
.activityTime{
flex: 2;
-webkit-flex: 2;
-moz-flex:2;
}
.activityTime>img{
margin: 0 .1rem;
}
game.js
$(function () {
countDown();
})
// 计时器
var n= 0, timer=null,oNumber,imgStr="",speed=60;
function countDown() {
startN("0000");
//开始计时
$("#startBtn").click(function () {
startTime();
});
//暂停并且清空计时器
$("#endBtn").click(function () {
var currentTime = stopTime();
// console.log(currentTime) //暂停时记录的时间
if(currentTime != "0520"){
Show('float10');
clearTime()
}
});
}
// 开始计时
function startTime() {
$("#startBtn").hide();
$("#endBtn").show();
clearInterval(timer);
timer=setInterval(function () {
imgStr ="";
n++;
//分钟
var m=parseInt(n/60);
//秒
var s=parseInt(n%60);
//计数器显示的值
oNumber = toDub(m) + toDub(s);
//超过30秒后循环计时
if(oNumber == "3000"){
clearTime()
startTime()
}
// console.log(oNumber.length) //长度为4
for(var i=0;i<oNumber.length;i++){
var current = oNumber[i];
var oSpan= "<img src='"+"images/"+current+".png"+"'/>";
imgStr = imgStr + oSpan;
}
$("#clockNum").html(imgStr);
},1000/speed);
}
//暂停并且清空计时器
function stopTime() {
clearInterval(timer);
return oNumber;
}
//补零
function toDub(n){
return n<10 ? "0"+n : ""+n;
}
// 初始化时间值
function startN(num) {
var num = num;
var imgStr = '';
for(var i=0;i<num.length;i++){
var current = num[i];
var oSpan= "<img src='"+"images/"+current+".png"+"'/>";
imgStr = imgStr + oSpan;
}
$("#clockNum").html(imgStr);
}
// 重置计时器
function clearTime() {
clearInterval(timer);
clockM = '';
clockS = '';
oNumber='';
n=0;
startN("0000");
$("#startBtn").show();
$("#endBtn").hide();
// startTime();
}
二版的出现缘由:
由于一版是不断地替换图片路径,导致了在苹果手机上显示出来的数字会渐隐渐现,页面效果不好,所以对一版进行了更改!(不过二版的html代码有点赘余,有想法者请多多指点)
game.html
<body>
<div class="game-startNumber flex">
<div class="staticTime">
<img name="0.png">
<img name="0.png">
</div>
<div class="activityTime" id="clockNum">
<div style="display:inline-block" id="one">
<img name="0.png" id="n0">
<img name="1.png" id="n1" style="display:none">
<img name="2.png" id="n2" style="display:none">
<img name="3.png" id="n3" style="display:none">
<img name="4.png" id="n4" style="display:none">
<img name="5.png" id="n5" style="display:none">
<img name="6.png" id="n6" style="display:none">
<img name="7.png" id="n7" style="display:none">
<img name="8.png" id="n8" style="display:none">
<img name="9.png" id="n9" style="display:none">
</div>
<div style="display:inline-block" id="two">
<img name="0.png" id="n0">
<img name="1.png" id="n1" style="display:none">
<img name="2.png" id="n2" style="display:none">
<img name="3.png" id="n3" style="display:none">
<img name="4.png" id="n4" style="display:none">
<img name="5.png" id="n5" style="display:none">
<img name="6.png" id="n6" style="display:none">
<img name="7.png" id="n7" style="display:none">
<img name="8.png" id="n8" style="display:none">
<img name="9.png" id="n9" style="display:none">
</div>
<div style="display:inline-block" id="three">
<img name="0.png" id="n0">
<img name="1.png" id="n1" style="display:none">
<img name="2.png" id="n2" style="display:none">
<img name="3.png" id="n3" style="display:none">
<img name="4.png" id="n4" style="display:none">
<img name="5.png" id="n5" style="display:none">
<img name="6.png" id="n6" style="display:none">
<img name="7.png" id="n7" style="display:none">
<img name="8.png" id="n8" style="display:none">
<img name="9.png" id="n9" style="display:none">
</div>
<div style="display:inline-block" id="four">
<img name="0.png" id="n0">
<img name="1.png" id="n1" style="display:none">
<img name="2.png" id="n2" style="display:none">
<img name="3.png" id="n3" style="display:none">
<img name="4.png" id="n4" style="display:none">
<img name="5.png" id="n5" style="display:none">
<img name="6.png" id="n6" style="display:none">
<img name="7.png" id="n7" style="display:none">
<img name="8.png" id="n8" style="display:none">
<img name="9.png" id="n9" style="display:none">
</div>
</div>
</div>
</body>
game.css(修改部分)
/*原本*/
/* .activityTime>img{
margin: 0 .1rem;
} */
.activityTime>div{
margin: 0 .05rem;
}
game.js(修改部分)
// 开始计时
function startTime() {
$("#startBtn").hide();
$("#endBtn").show();
clearInterval(timer);
timer=setInterval(function () {
imgStr ="";
n++;
//分钟
var m=parseInt(n/60);
//秒
var s=parseInt(n%60);
//计数器显示的值
oNumber = toDub(m) + toDub(s);
// console.log(oNumber)
var l = parseInt(m/10)
$("#one").children().hide()
$("#one").children("#n"+l).show()
var k = m%10
$("#two").children().hide()
$("#two").children("#n"+k).show()
var j = parseInt(s/10)
$("#three").children().hide()
$("#three").children("#n"+j).show()
var i = s%10
$("#four").children().hide()
$("#four").children("#n"+i).show()
//超过30秒后循环计时
if(oNumber == "3000"){
clearTime()
startTime()
}
// for(var i=0;i<oNumber.length;i++){
// var current = oNumber[i];
// var oSpan= "<img src='"+"images/"+current+".png"+"'/>";
// imgStr = imgStr + oSpan;
// }
// $("#clockNum").html(imgStr);
},1000/speed);
}
小橙子快来看↓