秒表效果

最新推荐文章于 2024-09-12 14:28:05 发布

HAI6545

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量252

点赞数 1

分类专栏： JavaScript案例文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/HAI6545/article/details/122415277

版权

JavaScript案例专栏收录该内容

105 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    section {
        width: 400px;
        height: 200px;
    }

    div {
        width: 300px;
        height: 70px;
        border: 1px solid #000;
        line-height: 70px;
    }
</style>

<body>
    <section>
        <div>
            <span>00</span>时
            <span>00</span>分
            <span>00</span>秒
            <span>000</span>毫秒
        </div>
        <button class="startBn">开始</button>
        <button class="stopBn">暂停</button>
    </section>
</body>
<script>
function showTime(ele) {
    this.box = document.querySelector(ele)
    this.btn1 = this.box.querySelector(`.startBn`)
    this.btn2 = this.box.querySelector(`.stopBn`)
    this.spans = this.box.querySelectorAll(`span`)
    this.a = this.b = this.c = this.d = 0
    this.flag = false
    this.flag1 = false
    this.time = null
    this.startBn()
    this.stopBn()
    
}

showTime.prototype.startBn = function () {
    this.btn1.addEventListener(`click`, () => {
        let leng = this.spans.length
        if (!this.flag) {
            this.flag = true
            this.time = setInterval(() => {
                this.a += 5
                this.spans[leng - 1].innerHTML = this.a > 10 ? this.a : '0' + this.a          
                if (this.a >= 999) {
                    this.a = 0
                    this.b += 1
                    this.spans[leng - 1].innerHTML = this.a > 10 ? this.a : '0' + this.a
                    this.spans[leng - 2].innerHTML = this.b > 10 ? this.b : '0' + this.b
                }
                if (this.b >= 59) {
                    this.b = 0
                    this.c++
                    this.spans[leng - 2].innerHTML = this.b > 10 ? this.b : '0' + this.b
                    this.spans[leng - 3].innerHTML = this.c > 10 ? this.c : '0' + this.c
                }
            }, 5)
            this.btn1.innerHTML = "重置"
        } else {
            this.a = this.b = this.c = this.d = 0
            clearInterval(this.time)
            this.time - null
            this.spans.forEach(ele => {
                 ele.innerHTML = '00'
            });
            this.flag = false
            this.flag1 = false
            this.btn1.innerHTML = "开始"
            this.btn2.innerHTML = "暂停"
        }
    })
}

showTime.prototype.stopBn = function () {

    this.btn2.addEventListener(`click`, () => {
        let leng = this.spans.length
        
        if (!this.flag1 && this.flag) {
            clearInterval(this.time)
            this.time = null
            this.flag1 = true
            this.btn2.innerHTML = "继续"
        } else if (this.flag1 && this.flag) {
            clearInterval(this.time)
            this.time = null
            this.flag1 = false
            this.time = setInterval(() => {
                this.a += 1
                this.spans[leng - 1].innerHTML = this.a > 10 ? this.a : '0' + this.a
                if (this.a >= 999) {
                    this.a = 5
                    this.b += 1
                    this.spans[leng - 1].innerHTML = this.a > 10 ? this.a : '0' + this.a
                    this.spans[leng - 2].innerHTML = this.b > 10 ? this.b : '0' + this.b
                }
                if (this.b >= 59) {
                    this.b = 0
                    this.c++
                    this.spans[leng - 2].innerHTML = this.b > 10 ? this.b : '0' + this.b
                    this.spans[leng - 3].innerHTML = this.c > 10 ? this.c : '0' + this.c
                }
            }, 5)
            this.btn2.innerHTML = "暂停"
        }
    })
}
let time = new showTime("section")
</script>

</html>

HAI6545

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
秒表效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><style> section { width: 400px; height: 200px; } div { width: 300p.
复制链接

扫一扫