js按钮点击持续时间（一个demo）

最新推荐文章于 2023-10-13 13:17:58 发布

大笨峰

最新推荐文章于 2023-10-13 13:17:58 发布

阅读量246

点赞数

分类专栏： js的demo 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/returndbf/article/details/122805524

版权

js的demo 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

女神想玩，花十分钟写了一个demo

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="father">
        <div>
            <h3>时间<span id="show"></span></h3>
        </div>
       
            <button onmousedown="down()" onmouseup="up()">小王按这里</button>
        
    </div>
</body>
<script>
    let time = 0
    let timeCount = null
    function down() {
        time = 0
        let show = document.getElementById("show")
        show.innerHTML = time
        timeCount = setInterval(() => {
            time++
        }, 1)
        console.log(time)
    }
    function up() {
        let show = document.getElementById("show")
        show.innerHTML = time
        if(time>100){
            alert("时间过长~")
        }else if(time==100){
            alert("太准了你！")
        }else if(time>=90&&time<100){
            alert("很接近了，加油")
        }else{
            alert("再接再厉~")
        }
        console.log(time)
        clearInterval(timeCount)
    }
</script>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    #father {
        display: flex;
        justify-content: center;
        width: 100%;
        height: 100%;
        align-items: center;
        flex-direction: column ;
    }

    button {
        border-radius: 50%;
        width: 150px;
        height:150px;
        border:none;
        background-color: rgb(180, 236, 236);
        box-shadow: 0px 10px 50px rgb(245, 245, 202);
    }
</style>

</html>

~~不要做舔狗~~

大笨峰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js按钮点击持续时间（一个demo）

女神想玩，花十分钟写了一个demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
复制链接

扫一扫

专栏目录