您好,登錄后才能下訂單哦!
小編給大家分享一下JavaScript實(shí)現(xiàn)簡單進(jìn)度條效果的方法,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
具體內(nèi)容如下
效果圖:
簡單說一下思路:
主要就是進(jìn)度條的寬度的動(dòng)態(tài)調(diào)整!要用到JS的間隔定時(shí)器 setInterval( )
setInterval( )
功能:每隔指定時(shí)間調(diào)用一次函數(shù)
參數(shù):函數(shù),時(shí)間間隔
返回值:定時(shí)器編號(hào)(數(shù)字)
想讓它到一定的寬度就停止,那么需要設(shè)定它的最大寬度,在它外面套一個(gè)有寬度的元素就可以啦!這樣的話控制它在父元素里的百分比就行了。
在函數(shù)里進(jìn)行判斷是否道達(dá)指定寬度,沒有到達(dá)就增長,否則就停止。
為了便于理解,后面JS代碼中也有注釋
1.HTML結(jié)構(gòu)
<div id="box"> <p id="progress"></p> //不斷增長的進(jìn)度條 <span id=n>0%</span> //百分比的顯示 </div> <button id="btn">開 始</button> //按鈕
2.CSS樣式
<style> #box{ width: 500px; height: 30px; border: black 2px solid; position: relative; } #progress{ width: 0px; height: 30px; background: pink; } #btn{ width: 50px; height: 30px; } #n{ position: absolute; top: 5px; right: 0; } </style>
重點(diǎn)來啦!
3.JavaScript代碼
<script> //通過id獲取元素 var progress = document.getElementById('progress') var n = document.getElementById('n') var btn = document.getElementById('btn') //定義函數(shù),并用元素的單擊事件觸發(fā)函數(shù) btn.onclick = function(){ var w = 0 //定義變量,用來存儲(chǔ)進(jìn)度條的長度 //啟動(dòng)定時(shí)器 var t = setInterval(function(){ w += 10 //每隔指定時(shí)間,讓進(jìn)度條長度增加10 if(w >= 100){ //判斷進(jìn)度條的長度有沒有等于或大于指定長度 w = 100 clearInterval(t) //條件成立,清除定時(shí)器 } progress.style.width = w + '%' //給元素賦值變化后的寬度 n.innerHTML = w + '%' //同時(shí)百分比也要增長 },100) //每隔0.1秒執(zhí)行一次 } </script>
這是我的學(xué)習(xí)記錄,分享給大家
看完了這篇文章,相信你對(duì)“JavaScript實(shí)現(xiàn)簡單進(jìn)度條效果的方法”有了一定的了解,如果想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。