哔哩哔哩一键三联基本实方法

思路：通过mousedown来实现，超过时间即长按，用setInterval来计时，未超过就是单击事件，并清除计时器。代码如下：

<!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>
<style>
    .redC{
        color: #FF0000FF;
    }
    span{
        cursor: pointer!important;
    }
</style>
<body>
<div>长按事件</div>
<progress value="0" max="100"></progress>
<span class="class1" onmousedown="down()" onmouseup="up()" onclick="cli(event)">点赞</span>
<span class="class2" onclick="cli(event)">投币</span>
<span class="class3" onclick="cli(event)">收藏</span>
<!-- <button ontouchstart="down()" ontouchend="up()" onclick="cli()">点击</button> -->
<script>
    let dianZan=document.getElementsByClassName('class1')[0];
    let dianZan1=document.getElementsByClassName('class2')[0];
    let dianZan2=document.getElementsByClassName('class3')[0];
    let time="";
    let lock=true;
    function down(){
        time=setInterval(()=>{
            lock=false;
            redFun()
        },1000)
    }
    function up(){
        clearInterval(time);
        setTimeout(()=>{
            lock=true;
        })
    }
    function cli(node){
        if(lock){
            console.log(41,node)
            // alert("单机");
            if(node.target.style.color){
                node.target.style.color = ""
            }else {
                node.target.style.color = "#FF0000FF"
            }
        }
    }
    function redFun(){
        dianZan.style.color = "#FF0000FF"
        dianZan1.style.color = "#FF0000FF"
        dianZan2.style.color = "#FF0000FF"
    }
</script>
</body>
</html>

 

posted @ 2023-08-21 14:02  何歡  阅读(162)  评论(0)    收藏  举报