JS實(shí)現(xiàn)可控制的進(jìn)度條
寫在前面
進(jìn)度條一直以來都是很多地方都可以用的，那么很多的時(shí)候其實(shí)我們都是自己在網(wǎng)上找代碼，直接使用的，很少有人自己寫源碼的，今天呢我們就簡(jiǎn)單的實(shí)現(xiàn)一個(gè)進(jìn)度條的效果，沒有做美化，喜歡做美化的可以自己做一下美化。
源碼已經(jīng)放到Github上：進(jìn)度條源碼
一如既往的看效果：
好吧，效果還是一如既往的丑，簡(jiǎn)單的說一下怎么實(shí)現(xiàn)這樣的效果，還是和之前一樣我們分析一下難點(diǎn)在哪？
第一：進(jìn)度條是生成的，那么就意味著div的寬度是不定的。
第二：百分比是動(dòng)態(tài)的，就意味著是計(jì)算出來的。
第三：每次的改變，百分比都要自己計(jì)算出來，說明公式里面的數(shù)據(jù)是變量。
只要解決這三個(gè)問題，這個(gè)進(jìn)度條就解決了，至于顏色怎么改變這些就不是什么難點(diǎn)了。
首先怎么是div的寬度不固定呢？其實(shí)也不難，只要我們根據(jù)用戶輸入的長(zhǎng)度來改變寬度就可了，拿到用戶輸入的數(shù)據(jù)，將數(shù)據(jù)的值賦予樣式的款就行了！
var user_number = $('#user_number').val();context.style.width = user_number+'px';
第二：百分比怎么計(jì)算呢？既然是百分比，就是顏色的寬度/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='http://www.gepszalag.com/bcjs/js/jquery-1.11.2.min.js' type='text/javascript' charset='utf-8'></script> </head> <body> <input type='number' name='' value='' /> <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('輸入過長(zhǎng)，請(qǐng)重新輸入！'); 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>
PS：這里仔細(xì)的人可能已經(jīng)看出來了，我沒有做過多的校驗(yàn)，沒有判斷用戶輸入的是不是空就觸發(fā)函數(shù)，這些知道就行了，自己寫的時(shí)候不要忘記加上，不然會(huì)出bug！
不要忘記引入jquery
謝謝閱讀
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. Ajax對(duì)xml信息的接收和處理操作實(shí)例分析2. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐3. Ajax返回值類型與用法實(shí)例分析4. XML入門精解之結(jié)構(gòu)與語法5. 如何使用CSS3畫出一個(gè)叮當(dāng)貓6. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式7. vue跳轉(zhuǎn)頁面常用的幾種方法匯總8. python如何寫出表白程序9. Python基于os.environ從windows獲取環(huán)境變量10. 解析python 中/ 和 % 和 //（地板除）
網(wǎng)公網(wǎng)安備