javascript+css 진행 바 효과 구현

본 논문 의 사례 는 자바 script+css 가 진도 항목 효 과 를 실현 하 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.
주로 스타일 로 진행 바 의 효 과 를 구현 합 니 다.자바 스 크 립 트 는 표시 되 는 백분율 을 제어 합 니 다.
html 템 플 릿

<div class="progress_area">
 <span id="progress" class="progress_bac"></span>
</div>
<input type="button" class="progress-inp" value="100%" οnclick="progress(100);"/>
<input type="button" class="progress-inp" value="86%" οnclick="progress(86);" />
<input type="button" class="progress-inp" value="20%" οnclick="progress(20);"/>

css:

.progress_area{
 width: 255px;
 height: 13px;
 border: 1px solid #ccc;
 border-radius: 15px;
 margin-bottom: 30px;
}
.progress-inp{
 width: 60px;
 height: 28px;
 border: 1px solid #ccc;
 background: #62c7ef;
 border-radius: 8px;
 color: white;
 cursor: pointer;
 outline:none;
}
.progress_bac{
 display: block;
 height: 100%;
 width: 50%;
 background: #83a4f1;
 border-radius: 10px;
}

실 현 된 효과:

이 진도 가 너무 딱딱 한 것 같 아 요.이후 box-shadow 를 통 해 음영 효 과 를 주 었 습 니 다.
box-shadow 는 6 개의 인자 가 있 습 니 다:
box-shadow:inset x-offset y-offset blur-radius spread-radius color
투영 방식 X 축 편 이 량 Y 축 편 이 량 음영 모호 반경 음영 확장 반경 음영 색
css:

.progress_bac{
 display: block;
 height: 100%;
 width: 50%;
 background: #83a4f1;
 border-radius: 10px;
 -moz-box-shadow:0px 0px 7px 0px #4486ca;
 -webkit-box-shadow:0px 0px 7px 0px #4486ca;
 box-shadow:0px 0px 7px 0px #4486ca;
}

효과:

그림자 의 색 은 사용자 정의 할 수 있 습 니 다.box-shadow 를 통 해 하 이 라 이 트 를 실현 할 수 있 습 니 다.많이 시도 하 십시오.
아래 단 추 를 눌 렀 을 때 진도 바 는 해당 하 는 값 을 표시 하고 지 정 된 위치 로 갑 니 다.그러나 위의 코드 를 통 해 볼 때 단 추 를 눌 렀 을 때 진도 바 는 단번에 지 정 된 위치 에 도착 하여 과도 한 효과 가 없습니다.
javascript 과 css 두 가지 방식 으로 이 루어 집 니 다.
css：
css 는 매우 간단 합 니 다.css 에 transition 애니메이션 효과 라 는 매개 변 수 는 매개 변수의 폭 을 바 꾸 는 애니메이션 효 과 를 통 해 간단하게 이 루어 집 니 다.

.progress_bac{
 display: block;
 height: 100%;
 width: 50%;
 background: #83a4f1;
 border-radius: 10px;
 -moz-box-shadow:0px 0px 7px 0px #4486ca;
 -webkit-box-shadow:0px 0px 7px 0px #4486ca;
 box-shadow:0px 0px 7px 0px #4486ca;
 -moz-transition: width 0.5s;
 -webkit-transition: width 0.5s;
 transition: width 0.5s;
}

javascript：
js 가 실현 하 는 방식 은 여러 가지 가 있 습 니 다.순환 을 써 서 타 이 머 를 쓸 수 있 습 니 다.다음 코드 는 타이머 로 쓴 것 입 니 다.

function progress(value){
 if ( value ){ 
  var num = "";
  var loader_progress = setInterval(function(){
   num++;
   document.getElementById("progress").style.width = num+"%";
   if ( num == value ){
    clearInterval(loader_progress);
   }
  },10);
 }
};

이상 은 간단 한 진도 조목 실현 방식 이다.css 를 수정 하면 진도 항목 이 서로 다른 효 과 를 보 여줄 수 있 습 니 다.이것 은 약간의 조정 이 필요 합 니 다.