JS實(shí)現(xiàn)可控制的進(jìn)度條
寫在前面
進(jìn)度條一直以來都是很多地方都可以用的，那么很多的時候其實(shí)我們都是自己在網(wǎng)上找代碼，直接使用的，很少有人自己寫源碼的，今天呢我們就簡單的實(shí)現(xiàn)一個進(jìn)度條的效果，沒有做美化，喜歡做美化的可以自己做一下美化。
源碼已經(jīng)放到Github上：進(jìn)度條源碼
一如既往的看效果：
好吧，效果還是一如既往的丑，簡單的說一下怎么實(shí)現(xiàn)這樣的效果，還是和之前一樣我們分析一下難點(diǎn)在哪？
第一：進(jìn)度條是生成的，那么就意味著div的寬度是不定的。
第二：百分比是動態(tài)的，就意味著是計(jì)算出來的。
第三：每次的改變，百分比都要自己計(jì)算出來，說明公式里面的數(shù)據(jù)是變量。
只要解決這三個問題，這個進(jìn)度條就解決了，至于顏色怎么改變這些就不是什么難點(diǎn)了。
首先怎么是div的寬度不固定呢？其實(shí)也不難，只要我們根據(jù)用戶輸入的長度來改變寬度就可了，拿到用戶輸入的數(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.piao2010.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('輸入過長，請重新輸入！'); 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ù)，這些知道就行了，自己寫的時候不要忘記加上，不然會出bug！
不要忘記引入jquery
謝謝閱讀
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP動態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享2. vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決3. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)4. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能5. uniapp自定義驗(yàn)證碼輸入框并隱藏光標(biāo)6. 淺談由position屬性引申的css進(jìn)階討論7. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向8. CSS可以做的幾個令你嘆為觀止的實(shí)例分享9. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)10. asp批量添加修改刪除操作示例代碼
網(wǎng)公網(wǎng)安備