横线打分功能

主要实现代码大致如下
<style>
   .loadeBox1 {
      position:absolute;
      width:800px;
      height:40px;
   }
   .bar1 {
      width:500px;
      height:1px;
      background-color:deepskyblue;
      cursor:pointer;
      position:absolute;
      top:50%;
      left:10%;
      transform:translate(0,-50%);
      /* left:200px;
           */
   }
   .radio1 {
      width:0px;
      height:0px;
      border-radius:50%;
      background-color:rgb(30,144,255);
      position:absolute;
      /* left:-2.5px;
           */
   }
   .bigRadio1 {
      width:10px;
      height:10px;
      background-color:rgba(30,144,255,0.5);
      border-radius:50%;
      position:absolute;
      top:-4.5px;
      left:-5px;
   }
   .loading1 {
      height:1px;
      background-color:royalblue;
      position:absolute;
      top:0;
      left:0;
   }
   .title1 {
      width:40px;
      height:20px;
      background-color:rgb(255,255,255);
      position:absolute;
      top:50%;
      transform:translate(0,-50%);
      line-height:20px;
      text-align:center;
      color:black;
      font-size:12px;
      border: 1px solid #36c9ff;
   }

</style>
<script type="text/javascript">
  
   function addAll() {
      $("#totalScore").val($("#supportLevelScore").val()*1+$("#benchAbnormalScore").val()*1+$("#dataAccuracyScore").val()*1+$("#warehouseServiceScore").val()*1);
      $(".title5").text($("#totalScore").val());
   }
</script>

<script>
   $(function() {
      $(window).unbind("mousemove");
      window.RadioLeft = $(".radio1").offset().left;
      window.BoxLeft = $(".bar1").offset().left;
      window.BoxWidth = $(".bar1").width();
      window.RadioWidth = $(".radio1").width();


      $(".radio1").mousedown(function(e) {
         var X = e.pageX;
         $(window).bind("mousemove");
         $(window).mousemove(function(e) {
            if (e.pageX < BoxLeft) {
               $(".radio1").css("left", "0px");
               $(".title1").text("25");
               $("#supportLevelScore").val(25);
               addAll();
            } else if (e.pageX > (BoxLeft + BoxWidth - RadioWidth)) {
               $(".radio1").css("right", "0px");
               $(".title1").text("0");
               $("#supportLevelScore").val(0);
               addAll();
            } else {
               $(".radio1").css("left", e.pageX - RadioLeft + "px");
               var newRadioLeft = $(".radio1").offset().left;
               var newBoxLeft = $(".bar1").offset().left;
               var val = 25-((newRadioLeft - newBoxLeft) / BoxWidth) * 25;
               val = Math.floor(val);
               if (val < 0) {
                  val = 0;
               }
               $(".title1").text(val);
               $(".loading1").width(((newRadioLeft - newBoxLeft) / BoxWidth) * 500);
               $("#supportLevelScore").val(val);
               addAll();
            }
         });
      });
      $(".radio1").mouseup(function(e) {
         $(window).unbind("mousemove");
      });
      $(window).mouseup(function(e) {
         $(this).unbind("mousemove");
      });

</script>

<div style="padding-left: 30px">
   <label style="font-size: larger">试验支持程度(25分)：</label>
   <br>
   <div class="loadeBox1" style="padding-left: 10px">
      <div class="title1">
         <c:if test="${testEvaluateInfo.supportLevelScore eq null}">0</c:if>
         <c:if test="${testEvaluateInfo.supportLevelScore ne null}">${testEvaluateInfo.supportLevelScore}</c:if>
      </div>
      <div class="bar1">
         <div class="radio1">
            <div class="bigRadio1"></div>
         </div>
         <div class="loading1"></div>
      </div>
      <form:hidden path="supportLevelScore" id="supportLevelScore"/>
   </div>
</div>
<br>
<br>
<br>
<div style="padding-left: 30px">
   <label style="font-size: larger">台架异常解决及时(25分)：</label>
   <br>
      <div class="loadeBox2" style="padding-left: 10px">
         <div class="bar2">
            <div class="radio2">
               <div class="bigRadio2"></div>
            </div>
            <div class="loading2"></div>
         </div>
         <div class="title2">
            <c:if test="${testEvaluateInfo.benchAbnormalScore eq null}">0</c:if>
            <c:if test="${testEvaluateInfo.benchAbnormalScore ne null}">${testEvaluateInfo.benchAbnormalScore}</c:if>
         </div>
         <form:hidden path="benchAbnormalScore" id="benchAbnormalScore"/>
      </div>
</div>

<label style="font-size: larger">汇总：</label>
<HR style="FILTER: alpha(opacity=100,finishopacity=0,style=3)" width="100%" color=#0b2e13 SIZE=3>
<div style="padding-left: 10px;position: absolute">
   <div>总分：</div>
   <div class="title5">
      <c:if test="${testEvaluateInfo.totalScore eq null}">0</c:if>
      <c:if test="${testEvaluateInfo.totalScore ne null}">${testEvaluateInfo.totalScore}</c:if>
   </div>
   <form:hidden path="totalScore" readonly="true" htmlEscape="false" maxlength="64"/>
</div>

效果如下，我这是需求为默认满分，圆点右拉减分机制，其他需求可更改