Html+Css+js实现计时器

最新推荐文章于 2024-07-02 12:22:49 发布

TurtleOrange

最新推荐文章于 2024-07-02 12:22:49 发布

阅读量4.3k

点赞数 2

分类专栏：前端技术前端实践思考文章标签： html css js 前端

本文链接：https://blog.csdn.net/TurtleOrange/article/details/89949288

版权

前端同时被 3 个专栏收录

30 篇文章 0 订阅

订阅专栏

实践

30 篇文章 0 订阅

订阅专栏

前端技术

13 篇文章 0 订阅

订阅专栏

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);
}

小橙子快来看↓
在这里插入图片描述

TurtleOrange

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
2
评论
Html+Css+js实现计时器

Html+Css+js实现计时器人狠话不多，先上图实现原理：1.通过js控制图片的路径，动态替换图片2.通过js控制图片的显示或隐藏，动态替换图片一版的实现代码：game.html<body> <div class="game-startNumber flex"> <div class="staticTime"> &l...
复制链接

扫一扫

专栏目录