会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 132490个问题
JAVA 全系列/第二十一阶段:分布式医疗云平台/项目环境搭建(旧) 22516楼
Python 全系列/第二阶段:Python 深入与提高/异常机制 22520楼
JAVA 全系列/第二十一阶段:分布式医疗云平台/项目环境搭建(旧) 22522楼
JAVA 全系列/第九阶段:Spring Boot实战/Spring Boot 22523楼
Python 全系列/第二十三阶段:人工智能基础_机器学习理论和实战(旧)/无约束最优化问题的求解算法 22524楼
JAVA 全系列/第二十一阶段:分布式医疗云平台/项目环境搭建(旧) 22525楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>带有提示文字的滚动条</title>
    <style>
        div{
            width:30px;
            height:15px;
            border: 1px solid black;
            line-height: 15px;
            align:center;
            position:absolute;
            display:none;
        }
    </style>
</head>
<body>
<input type="range" min="0" max="100" value="0"/>  <!--value是当前值-->
<div></div>
<script>
    var div=document.querySelector("div");
    var input=document.querySelector("input");
    var flag=false;
    input.onmousemove=function(){
        div.innerHTML=input.value;
        if(flag) {
            //console.log("(x,y)的值为(" + event.clientX + "," + event.clientY + ")");

            if (event.clientX > 134) {event.clientX = 134;}
            if (event.clientX < 14) {event.clientX = 14;}
            div.style.left = event.clientX + 'px';//style对象的属性值都是字符串,单位包括在字符串中。所以这里用连接符,连接一个字符,使其变成字符串。
            div.style.display = 'block';
        }
    }
    input.onmousedown=function(){//鼠标按下时触发
        flag=true;
        div.style.display='none';
    }
    input.onmouseup=function(){//鼠标抬起时触发
        flag=false;
        div.style.display='none';
    }
</script>
</body>
</html>

我这个绝对定位,距离左边距离的这个功能不能实现。div到第一个位置停止了,但我的程序出来效果图div还可以继续移动

blob.png

WEB前端全系列/第二阶段:JavaScript编程模块/浏览器模型(BOM) 22526楼
JAVA 全系列/第二十一阶段:分布式医疗云平台/项目环境搭建(旧) 22527楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解(旧) 22528楼
JAVA 全系列/第五阶段:JavaWeb开发/Servlet技术详解(旧) 22529楼
JAVA 全系列/第二阶段:JAVA 基础深化和提高/容器(旧) 22530楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

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