溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

使用JavaScript怎么實現(xiàn)一個可控制的進度條

發(fā)布時間：2021-04-16 16:35:02 來源：億速云 閱讀：188 作者：Leah 欄目：web開發(fā)

本篇文章給大家分享的是有關(guān)使用JavaScript怎么實現(xiàn)一個可控制的進度條，小編覺得挺實用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

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";
  /* 只需要將內(nèi)部的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>

以上就是使用JavaScript怎么實現(xiàn)一個可控制的進度條，小編相信有部分知識點可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手