SOURCE

console 命令行工具 X clear

                    
>
console
var cir=document.querySelector(".cir");
var msg=document.querySelector(".msg");
var flag=false;
cir.addEventListener("mousedown",function(e) {
    flag=true;
    x=e.pageX;
    y=e.pageY;
    msg.style.display="block";
    msg.style.left=x-25+"px";
    msg.style.top="73px";
     msg.innerHTML=Math.round((x-152)/3);
    console.log(flag);
    console.log(cir.style.left)
})
window.addEventListener("mousemove",function(e) {
    if (flag) {
        x=e.pageX;
        y=e.pageY;
        console.log(cir.style.left)
        
        if (x>162 && x<452) {
            cir.style.left=x-11+"px";
            msg.style.left=x-25+"px";
            msg.innerHTML=Math.round((x-152)/3);
        }
        
    }    
})
window.addEventListener("mouseup",function() {
    flag=false;
    msg.style.display="none";
    console.log(flag);
})
<div class="box">
    
</div>
<div class="cir"></div>
<div class="msg"></div>
body {
    height: 200px;
    display: flex;

    justify-content: center;
    align-items: center;
}
.box {
    position: relative;
    width: 300px;
    height: 20px;
    background-color: lightgray;
    border-radius: 10px;
    box-shadow: 2px 2px 3px 2px rgba(105, 105, 105, 0.307);
    border: 1px solid orangered;
}
.cir {
    position: absolute;
    top: 97px;
    left: 152px;
    width: 22px;
    height: 22px;
    background-color: rgb(255, 77, 32);
    border-radius: 11px;
}
.msg {
    width: 50px;
    height: 20px;
    background-color: lightblue;
    position: absolute;
    display: none;
    transition:display .5s;
    color: white;
    text-align: center;
    line-height: 20px;
}
.msg::after {
    content: "";
     width: 0px;
    height: 0px;
    display: inline-block;
    /* background-color: rgb(255, 136, 0);  */
    position: absolute;
    left: 20px;
    top:20px;
    border:5px solid transparent;
    border-top: 5px solid lightblue;  

}