会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132471个问题
JAVA 全系列/第二阶段:JAVA 基础深化和提高/智能电话本项目实战 30647楼
Python 全系列/第一阶段:Python入门/Python入门(动画版) 30650楼

QQ图片20220509080830.jpg

Python 全系列/第二阶段:Python 深入与提高/游戏开发-坦克大战 30651楼

老师好,控制提示框移动范围时,使用“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) 30652楼
JAVA 全系列/第一阶段:JAVA 快速入门/数组和数据存储 30654楼
JAVA 全系列/(隐藏)第二十三阶段:数字货币交易所项目/服务中台_交易系统的开发 30656楼
Python 全系列/第一阶段:Python入门/Python入门(动画版) 30657楼
Python 全系列/第五阶段:数据库编程/mysql的使用 30659楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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