JS實(shí)現(xiàn)可控制的進(jìn)度條
寫在前面
進(jìn)度條一直以來(lái)都是很多地方都可以用的，那么很多的時(shí)候其實(shí)我們都是自己在網(wǎng)上找代碼，直接使用的，很少有人自己寫源碼的，今天呢我們就簡(jiǎn)單的實(shí)現(xiàn)一個(gè)進(jìn)度條的效果，沒(méi)有做美化，喜歡做美化的可以自己做一下美化。
源碼已經(jīng)放到Github上：進(jìn)度條源碼
一如既往的看效果：
好吧，效果還是一如既往的丑，簡(jiǎn)單的說(shuō)一下怎么實(shí)現(xiàn)這樣的效果，還是和之前一樣我們分析一下難點(diǎn)在哪？
第一：進(jìn)度條是生成的，那么就意味著div的寬度是不定的。
第二：百分比是動(dòng)態(tài)的，就意味著是計(jì)算出來(lái)的。
第三：每次的改變，百分比都要自己計(jì)算出來(lái)，說(shuō)明公式里面的數(shù)據(jù)是變量。
只要解決這三個(gè)問(wèn)題，這個(gè)進(jìn)度條就解決了，至于顏色怎么改變這些就不是什么難點(diǎn)了。
首先怎么是div的寬度不固定呢？其實(shí)也不難，只要我們根據(jù)用戶輸入的長(zhǎng)度來(lái)改變寬度就可了，拿到用戶輸入的數(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; }
第三的問(wèn)題第二里面也就一起解答了！
看源碼：
<!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.aoyou183.cn/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(); /* 判斷一下是不是超過(guò)了可見(jiàn)區(qū)域 */ if(Number(user_number)>=(screewidth/2)){ console.log(screewidth); alert('輸入過(guò)長(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)看出來(lái)了，我沒(méi)有做過(guò)多的校驗(yàn)，沒(méi)有判斷用戶輸入的是不是空就觸發(fā)函數(shù)，這些知道就行了，自己寫的時(shí)候不要忘記加上，不然會(huì)出bug！
不要忘記引入jquery
謝謝閱讀
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)2. XHTML 1.0：標(biāo)記新的開(kāi)端3. HTML5 Canvas繪制圖形從入門到精通4. XML解析錯(cuò)誤：未組織好 的解決辦法5. ASP基礎(chǔ)知識(shí)VBScript基本元素講解6. asp(vbscript)中自定義函數(shù)的默認(rèn)參數(shù)實(shí)現(xiàn)代碼7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. 利用CSS3新特性創(chuàng)建透明邊框三角9. 使用Spry輕松將XML數(shù)據(jù)顯示到HTML頁(yè)的方法10. XML入門的常見(jiàn)問(wèn)題(四)
網(wǎng)公網(wǎng)安備