JS實現(xiàn)可控制的進度條

更新時間：2020年03月25日 14:37:10 作者：何處錦繡不灰堆

這篇文章主要為大家詳細介紹了JS實現(xiàn)可控制的進度條，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

寫在前面

進度條一直以來都是很多地方都可以用的，那么很多的時候其實我們都是自己在網(wǎng)上找代碼，直接使用的，很少有人自己寫源碼的，今天呢我們就簡單的實現(xiàn)一個進度條的效果，沒有做美化，喜歡做美化的可以自己做一下美化。

源碼已經(jīng)放到Github上：進度條源碼

一如既往的看效果：

好吧，效果還是一如既往的丑，簡單的說一下怎么實現(xiàn)這樣的效果，還是和之前一樣我們分析一下難點在哪？

第一：進度條是生成的，那么就意味著div的寬度是不定的。

第二：百分比是動態(tài)的，就意味著是計算出來的。

第三：每次的改變，百分比都要自己計算出來，說明公式里面的數(shù)據(jù)是變量。

只要解決這三個問題，這個進度條就解決了，至于顏色怎么改變這些就不是什么難點了。

首先怎么是div的寬度不固定呢？其實也不難，只要我們根據(jù)用戶輸入的長度來改變寬度就可了，拿到用戶輸入的數(shù)據(jù)，將數(shù)據(jù)的值賦予樣式的款就行了！

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++;
  /* 百分比的顯示，保留兩位小數(shù) */
  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();
  /* 判斷一下是不是超過了可見區(qū)域 */
  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++;
  /* 百分比的顯示，保留兩位小數(shù) */
  text_contest.textContent = (parseFloat(count/user_number)*100).toFixed(2)+"%";
  }else{
  return false;
  }
  setTimeout("change()",100);
  }
  
 }
 </script>
 </body>
</html>

PS：這里仔細的人可能已經(jīng)看出來了，我沒有做過多的校驗，沒有判斷用戶輸入的是不是空就觸發(fā)函數(shù)，這些知道就行了，自己寫的時候不要忘記加上，不然會出bug！

不要忘記引入jquery

謝謝閱讀

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: