一、html代码
<span>魅力值</span><input type="range" min="0" max="100" class="in"/> <div class="box"></div>
二、css代码
<style> *{margin: 0;padding: 0;} .box{ height: 30px; width: 30px; border: 1px solid skyblue; border-radius: 5px; display: none; position: absolute; } </style>
三、js代码
1、获取页面元素
var range=document.querySelector(".in"); var box=document.querySelector(".box");
2、定义开关,判断鼠标是否在box按下
var flag = false;//默认不按下
3、给滑轮设置鼠标按下事件
range.οnmοusedοwn=function(){ flag=true; if(true){ //2.1将div展示出来 box.style.display="block"; //2.2将div的内容赋值为滑轮的值 box.innerHTML=range.value; //2.3 div展示的位置 var x = event.clientX; box.style.