3 progress bar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖动条</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .box1{
            width: 600px;
            height: 10px;
            background-color: red;
            margin: 300px auto;
            position: relative;
        }
        .box2{
            height: 30px;
            width: 40px;
            background-color: pink;
            position: absolute;
            left: 0;
            top: -10px;
        }
        .box1 span{
            width: 40px;
            height: 40px;
            position: absolute;
            background-color: yellow;
            left: -50px;
            top: -15px;
            text-align: center;
            line-height: 40px;
        }
        .box1 p{
            width: 40px;
            height: 40px;
            position: absolute;
            top: -15px;
            left: 600px;
            text-align: center;
            line-height: 40px;
        }
    </style>
    <script src="../public.js"></script>
</head>
<body>
<div class="box1">
    <span id="txt"></span>
    <p>10</p>
    <div class="box2"></div>
</div>
</body>
<script>
    var otxt=document.querySelector("#txt");
    var oBox1=document.querySelector(".box1");
    var oBox2=document.querySelector(".box2");
    addEvent(oBox2,"mousedown",hit)
    function hit(eve) {
        varEve || = E1 the window.event; 
        addEvent (Document, "mouseMove" , Move)
         function Move (Eve) {
             var E2 = Eve || the window.event;
             var X = e2.clientX-oBox1.offsetLeft- e1.offsetX;
             IF (X <= 0 ) { 
                X = 0 ; 
            } 
            the else  IF (X> = 560. ) { 
                X = 560. 
            }
            oBox2.style.left = X + "PX"
             // Clear the mouse is dragged to prevent bouncing Shihai --- drag 
            var A = (X / 560. * 10) .toFixed (. 1) 
            otxt.innerHTML = A

            window.getSelection ? . window.getSelection () removeAllRanges (): document.selection.empty (); 
        } 
        addEvent (the Document, "mouseUp" , up)
         function up () { 
            removeEvent (the Document, "mouseMove" , the Move) 
        } 
        stopDefault (E1) // when pressed clear the default, select the text can not be prevented from dragging 
    }
 </ Script> 
</ HTML>
Guess you like
