進度條製作
阿新 • • 發佈:2018-12-12
簡單描述一下小例子:
這個進度條是可以通過js控制的,即點選按鈕觸發函式,動態的改變百分比的值與進度條的狀態。當超過100%時,不再響應,按鈕禁用。
html部分:
<div class="progress-bar"> <div class='box'> <div class='clip' id="context"> </div> </div> <span><span id="number">55</span><i>%</i></span> </div> <button onclick="processbar()" id="textbtn">進度條測試</button>
css部分
<style type="text/css"> .progress-bar{ display: inline-block; } .progress-bar span{ font-size: 12px; vertical-align: middle; color: #3385ff; } .box { border-radius: 30px; width: 100px; height: 10px; background-color: #f9f7f7; border: 1px solid #f1f0f0; padding: 0px 2px; display: inline-block; } .clip { background: -webkit-linear-gradient(left, #44e5ff,#02c8e8); background: -o-linear-gradient(right, #44e5ff,#02c8e8); background: -moz-linear-gradient(right, #44e5ff,#02c8e8); background: linear-gradient(to right, #44e5ff,#02c8e8); width: 55px; margin: 1px 0px; box-shadow: 0px 0px 2px #0dd2ea; height: 8px; border-radius: 20px; } </style>
js部分
<script type="text/javascript"> var Numq = document.getElementById("number"); num=Numq.textContent; var bar = document.getElementById("context"); var btn = document.getElementById("textbtn"); function processbar(){ num++; Numq.textContent=num; bar.style.width = num+'px'; if(parseInt(num)>100){ Numq.textContent=100; bar.style.width = 100+'px'; btn.setAttribute("disabled","disabled"); } } </script>
效果圖如下: