3 진행률 표시 줄

<! DOCTYPE HTML> 
<HTML LANG = "EN"> 
<head> 
    <메타 캐릭터 = "UTF-8"> 
    <TITLE>拖动条</ TITLE> 
    <스타일> 
        * { 
            패딩 : 0 ; 
            여백 : 0 ; 
        } 
        .box1 { 
            폭 : 600PX; 
            높이 : 10px; 
            배경 - 색상 : 빨강; 
            마진 : 300 픽셀 자동; 
            위치 : 상대; 
        } 
        .box2 { 
            높이 : 30 픽셀; 
            폭 : 40px; 
            배경 - 색상 : 핑크;
            위치 : 절대; 
            왼쪽 : 0 ; 
            최고 : - 10px; 
        } 
        .box1 범위 { 
            폭 : 40px; 
            높이 : 40px; 
            위치 : 절대; 
            배경 - 색상 : 노란색; 
            왼쪽 : - 50 픽셀; 
            최고 : - 15 픽셀; 
            텍스트 - 정렬 : 센터; 
            라인 - 높이 : 40px; 
        } 
        .box1 피 { 
            폭 : 40px; 
            높이 : 40px; 
            총수 : 절대; 
            최고 : - 15 픽셀; 
            왼쪽 : 600PX; 
            텍스트 -정렬 : 센터; 
            라인 - 높이 : 40px; 
        }
     </ 스타일> 
    <스크립트 SRC = "../ public.js"> </ script> 
</ head> 
<body> 
<div 클래스 = "BOX1"> 
    <스팬 ID = "TXT"> </ SPAN> 
    < p> 10 </ p> 
    <div 클래스 = "BOX2"> </ div> 
</ div> 
</ body> 
<script> VAR otxt = document.querySelector를 ( "#의 TXT" );
    var에 oBox1 = document.querySelector ( "BOX1." );
    var에
    oBox2 = document.querySelector ( "BOX2." ); 
    addEvent (oBox2, "mousedown" 적중)
     함수 히트 (이브) {
         E1 = 이브 || window.event를; 
        addEvent (문서 "MouseMove 이벤트" , 이동)
         함수 이동 (이브) {
             VAR의 E2 = 이브 || window.event를;
            VAR X = e2.clientX-oBox1.offsetLeft- e1.offsetX;
            경우 (X <= 0 ) { 
                X = 0 ; 
            } 
            다른  경우 (x> = 560 ) { 
                X = 560 
            } 
            oBox2.style.left = X + "PX는"
             // 지우기가 마우스를 Shihai 튀는 방지하기 위해 드래그 --- 드래그 
            VAR의 A = (X / 560 * 10) .toFixed. (1) 
            otxt.innerHTML =

            window.getSelection ? window.getSelection () removeAllRanges (). document.selection.empty (); 
        } 
        addEvent (문서는 "와 mouseUp" 업)
         기능 {()를 
            removeEvent (문서, "mouseMove 나" , 이동) 
        } 
        stopDefault (E1) // 기본을 명확 누르면, 드래그 방지 할 수없는 텍스트를 선택 
    }
 </ SCRIPT> 
</ HTML>
추천
