JS 제어 가능 한 진도 구현

앞 에 쓰다
진도 조 는 지금까지 많은 곳 에서 사용 할 수 있 었 다.그러면 많은 경우 에 우 리 는 인터넷 에서 코드 를 찾 고 직접 사용 했다.스스로 소스 코드 를 쓰 는 사람 이 별로 없 었 다.오늘 우 리 는 진도 조 의 효 과 를 간단하게 실현 하고 미화 하지 않 았 다.미화 하 는 것 을 좋아 하 는 사람 은 스스로 미화 할 수 있다.
원본 코드 는 Github 에 올 렸 습 니 다진도 스 트 립 소스 코드
변 함 없 는 보기 효과:

좋 습 니 다.효 과 는 예전 과 같이 추 합 니 다.이런 효 과 를 어떻게 실현 하 는 지 간단하게 말씀 드 리 겠 습 니 다.아니면 예전 과 같이 어 려 운 점 이 어디 에 있 는 지 분석 해 보 겠 습 니 다.
첫째,진도 조 는 생 성 된 것 이 므 로 div 의 폭 이 일정 하지 않다 는 것 을 의미한다.
둘째:백분율 은 동태 적 인 것 이 고 계산 한 것 을 의미한다.
셋째,매번 의 변화,백분율 은 스스로 계산 해 야 한다.공식 안의 데 이 터 는 변수 라 는 것 을 설명 한다.
이 세 가지 문 제 를 해결 하기 만 하면 이 진도 조 는 해 결 될 것 이 고 색깔 이 어떻게 바 뀌 는 지 에 대해 서 는 어 려 운 점 이 아니다.
우선 div 의 폭 이 왜 고정 되 지 않 습 니까?사실 어렵 지 않 습 니 다.사용자 가 입력 한 길이 에 따라 폭 을 바 꾸 면 됩 니 다.사용자 가 입력 한 데 이 터 를 받 아 데이터 의 값 을 스타일 의 돈 으로 부여 하면 됩 니 다!


var user_number = $("#user_number").val();
context.style.width = user_number+"px";

둘째:백분율 은 어떻게 계산 합 니까?백분율 이면 색상 의 너비/div 의 너비 입 니 다.그러면 색상 의 너비 가 변 하기 만 하면 백분율 은 자 연 스 럽 게 변 합 니 다.


if(count !== Number(user_number)){
  /*         */
  nercon.style.width = count+"px";
  /* count   */
  count++;
  /*       ，       */
  text_contest.textContent = (parseFloat(count/user_number)*100).toFixed(2)+"%";
  }else{
  return false;
  }

세 번 째 문제,두 번 째 문제 도 같이 풀 었 습 니 다!
원본 코드 보기:


<!DOCTYPE html>
<!-- 
 aim：csdn example
 date：2018-09
 author:clearlove
 bug:0%
 environment:osx
 introduce:Progress bar introduction
 -->
<html>
 <head>
 <meta charset="utf-8" />
 <title></title>
 <style type="text/css">
 .style_input{
 width: 3rem;
 margin-bottom: 2rem;
 }
 #context{
 height: 1.5rem;
 border: 1px solid black;
 float: left;
 border-radius:10px;
 }
 #ner_con{
 background-color: aqua;
 height: 100%;
 border-radius:10px;
 }
 #text_contest{
 height: 1.5rem;
 width: 3rem;
 float: left;
 margin-left: 0.3rem;
 }
 #pro_div{
 height: 1.5rem;
 width: 3rem;
 float: left;
 }
 </style>
 <script src="js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
 <input type="number" name="" id="user_number" value="" class="style_input"/>
 <input type="button" name="" id="" value="  " οnclick="change()"/>
 
 <div id="">
 <div id="context">
 <div id="ner_con">
 </div>
 </div>
 <div id="text_contest">
 </div>
 </div>
 <script type="text/javascript">
 var count = 1;
 var screewidth = document.body.clientWidth;
 function change(){
  /*   ID      */
  var nercon = document.getElementById("ner_con");
  var context = document.getElementById("context");
  var text_contest = document.getElementById("text_contest");
  var user_number = $("#user_number").val();
  /*                */
  if(Number(user_number)>=(screewidth/2)){
  console.log(screewidth);
  alert("    ，     ！");
  return false;
  }
  else{
  context.style.width = user_number+"px";
  /*        div         */
  if(count !== Number(user_number)){
  /*         */
  nercon.style.width = count+"px";
  /* count   */
  count++;
  /*       ，       */
  text_contest.textContent = (parseFloat(count/user_number)*100).toFixed(2)+"%";
  }else{
  return false;
  }
  setTimeout("change()",100);
  }
  
 }
 </script>
 </body>
</html>

PS:여기 서 자세 한 사람 은 이미 알 아 보 았 을 것 입 니 다.저 는 너무 많은 검 사 를 하지 않 았 습 니 다.사용자 가 입력 한 것 이 비어 있 는 지 아 닌 지 판단 하지 않 고 함 수 를 촉발 합 니 다.이런 것 을 알 면 됩 니 다.자신 이 쓸 때 추가 하 는 것 을 잊 지 마 세 요.그렇지 않 으 면 bug 가 나 옵 니 다!
jquery 도입 잊 지 마 세 요.
감사합니다
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this

18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

JS 제어 가능 한 진도 구현

좋은 웹페이지 즐겨찾기