个人简历页之JS给拖拽条添加显示数字

1、HTML中的部分代码

<h2>技能特长</h2>
<ul>
  <li>C语言<input type="range" class="ra1"></li>
  <div class="show1"></div>
  <script src="简历页制作.js"></script>
  <li>JAVA<input type="range" class="ra2"></li>
  <div class="show2"></div>
  <script src="简历页制作.js"></script>
  <li>前端语言<input type="range" class="ra3"></li>
  <div class="show3"></div>
  <script src="简历页制作.js"></script>
  <li>后端语言<input type="range" class="ra4"></li>
  <div class="show4"></div>
  <script src="简历页制作.js"></script>
</ul>

2、JS中的部分代码

（1）第一个拖拽条

var show1=document.querySelector(".show1");
var ra1=document.querySelector(".ra1");
var flag1=false;
ra1.onmousedown=function()
{
//div显示
show1.style.display="block";
//div内有range值
show1.innerHTML=ra1.value;
var templeft1=event.clientX;
show1.style.left=templeft1-15+"px";
flag1=true;
}
ra1.onmousemove=function(){
//范围校验
//div随range变化的值
if(flag1){

var templeft1=event.clientX;
if(templeft1>=43&&templeft1<201){
  show1.style.left=templeft1-15+"px";
  show1.innerHTML=ra1.value;
}

}
}

（2）第二个拖拽条

var show2=document.querySelector(".show2");
var ra2=document.querySelector(".ra2");
var flag2=false;
ra2.onmousedown=function()
{
//div显示
show2.style.display="block";
//div内有range值
show2.innerHTML=ra2.value;
var templeft2=event.clientX;
show2.style.left=templeft2-15+"px";
flag2=true;
}
ra2.onmousemove=function(){
//范围校验
//div随range变化的值
if(flag2){

var templeft2=event.clientX;
if(templeft2>=43&&templeft2<201){
  show2.style.left=templeft2-15+"px";
  show2.innerHTML=ra2.value;
}

}
}

（3）第三个拖拽条

var show3=document.querySelector(".show3");
var ra3=document.querySelector(".ra3");
var flag3=false;
ra3.onmousedown=function()
{
//div显示
show3.style.display="block";
//div内有range值
show3.innerHTML=ra3.value;
var templeft3=event.clientX;
show3.style.left=templeft3-15+"px";
flag3=true;
}
ra3.onmousemove=function(){
//范围校验
//div随range变化的值
if(flag3){

var templeft3=event.clientX;
if(templeft3>=43&&templeft3<201){
  show3.style.left=templeft3-15+"px";
  show3.innerHTML=ra3.value;
}

}
}

（4）第四个拖拽条

var show4=document.querySelector(".show4");
var ra4=document.querySelector(".ra4");
var flag4=false;
ra4.onmousedown=function()
{
//div显示
show4.style.display="block";
//div内有range值
show4.innerHTML=ra4.value;
var templeft4=event.clientX;
show4.style.left=templeft4-15+"px";
flag4=true;
}
ra4.onmousemove=function(){
//范围校验
//div随range变化的值
if(flag4){

var templeft4=event.clientX;
if(templeft4>=43&&templeft4<201){
  show4.style.left=templeft4-15+"px";
  show4.innerHTML=ra4.value;
}

}
}

个人简历页之JS给拖拽条添加显示数字