会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133544个问题

老师好,控制提示框移动范围时,使用“if else”可以实现,但使用“switch”时没有效果。

应该是我的switch语句没写对(第35行代码),怎么写才正确?求指导,谢谢。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
<style>
    input{
        width: 300px;
        margin: 100px 600px 0px;
    }
    #tips{
        width: 30px;
        height: 25px;
        margin: 0px 750px;
        padding: 0;
        font-size: 18px;
        text-align: center;
        border: 1px solid aqua;
        position: absolute;
        display: none;
    }
</style>
</head>
<body>
    <input type="range" min="0" max="100" value="50">
    <div id="tips"></div>
<script>
    var input=document.querySelector('input');
    var tips=document.getElementById('tips');
    function move(){
        input.onmousemove=function () {
            var x=event.clientX;
            var Y=event.clientY;
            // 使用switch语句控制提示框移动范围????????????????????????????????????????
/*            switch (x) {
                case x<600:tips.style.left=-150+'px';
                    break;
                case x>900:tips.style.left=150+'px';
                    break;
                case x>=600&&x<=900:tips.style.left=(x-750)+'px';
                    break;
            }*/
            // 使用if语句控制提示框移动范围
            if (event.clientX>900){
                x = 900;
            }else if (event.clientX<600){
                x = 600;
            }else{
                tips.style.left=(x-750)+'px';
            }

            tips.innerHTML=input.value;

            // console.log('(x,y):('+x+','+'y'+')');
        }
    };
    input.onmousedown=function () {
        tips.style.display='block'
        move();
    };
    input.onmouseup=function () {
        tips.style.display='none'
        input.onmousemove=null;
    }
</script>
</body>
</html>


WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 30646楼
JAVA 全系列/第一阶段:AI驱动的JAVA编程/数组和数据存储 30648楼
JAVA 全系列/(隐藏)第二十三阶段:数字货币交易所项目/服务中台_交易系统的开发 30650楼
Python 全系列/第一阶段:Python入门/Python入门(动画版) 30651楼
Python 全系列/第六阶段:数据库与AI协同技术实战/mysql的使用 30653楼
JAVA 全系列/第十一阶段:分布式RPC调用和分布式文件存储/Zookeeper 30656楼
JAVA 全系列/第二十八阶段:JVM实战和BATJ大厂面试重难点/JVM调优 30657楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器 30660楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637