JavaScript實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)進(jìn)度條效果的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:
簡(jiǎn)單說(shuō)一下思路:
主要就是進(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á)指定寬度,沒(méi)有到達(dá)就增長(zhǎng),否則就停止。
為了便于理解,后面JS代碼中也有注釋
1.HTML結(jié)構(gòu)
<div id="box"> <p id="progress"></p> //不斷增長(zhǎng)的進(jìn)度條 <span id=n>0%</span> //百分比的顯示 </div> <button id="btn">開(kāi) 始</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)來(lái)啦!
3.JavaScript代碼
<script> //通過(guò)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 //定義變量,用來(lái)存儲(chǔ)進(jìn)度條的長(zhǎng)度 //啟動(dòng)定時(shí)器 var t = setInterval(function(){ w += 10 //每隔指定時(shí)間,讓進(jìn)度條長(zhǎng)度增加10 if(w >= 100){ //判斷進(jìn)度條的長(zhǎng)度有沒(méi)有等于或大于指定長(zhǎng)度 w = 100 clearInterval(t) //條件成立,清除定時(shí)器 } progress.style.width = w + '%' //給元素賦值變化后的寬度 n.innerHTML = w + '%' //同時(shí)百分比也要增長(zhǎng) },100) //每隔0.1秒執(zhí)行一次 } </script>
這是我的學(xué)習(xí)記錄,分享給大家
也希望對(duì)看到這篇博文的你有幫助?。。?br />
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- javascript 進(jìn)度條的幾種方法
- js實(shí)現(xiàn)進(jìn)度條的方法
- js 進(jìn)度條實(shí)現(xiàn)代碼
- JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
- JS 進(jìn)度條效果實(shí)現(xiàn)代碼整理
- Javascript jquery css 寫(xiě)的簡(jiǎn)單進(jìn)度條控件
- JS實(shí)現(xiàn)環(huán)形進(jìn)度條(從0到100%)效果
- 用CSS+JS實(shí)現(xiàn)的進(jìn)度條效果效果
- PHP中使用Session配合Javascript實(shí)現(xiàn)文件上傳進(jìn)度條功能
- js實(shí)現(xiàn)音頻控制進(jìn)度條功能
相關(guān)文章
微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例
最近在做一個(gè)列表的時(shí)候,涉及到時(shí)間格式化操作。本文主要介紹了微信小程序wxs日期時(shí)間處理的實(shí)現(xiàn)示例,分享給大家,感興趣的可以了解一下2021-07-07IScroll5 中文API參數(shù)說(shuō)明和調(diào)用方法
IScroll是移動(dòng)頁(yè)面上被使用的一款仿系統(tǒng)滾動(dòng)插件。IScroll5相對(duì)于之前的IScroll4改進(jìn)了許多,使得大家可以更方便的定制所需的功能了。2016-05-05js字符串替換所有的指定字符或文字(推薦replaceAll方法)
要實(shí)現(xiàn)js字符串替換所有的某個(gè)字符,推薦大家使用replaceAll方法,默認(rèn)不是所有瀏覽器都兼容,所以這里給出一個(gè)解決方案,需要的朋友可以參考下2014-07-07js DNA動(dòng)態(tài)序列比對(duì)代碼
JavaScript動(dòng)態(tài)序列比對(duì)代碼,隨便 寫(xiě)著玩的,在網(wǎng)上見(jiàn)到用VC、VB寫(xiě)的比較多,這個(gè)算法以前在高中課本上見(jiàn)到過(guò),我只是用Js寫(xiě)一下試試,或許還不是太準(zhǔn)確。2010-07-07javascript實(shí)現(xiàn)固定側(cè)邊欄
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)固定側(cè)邊欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-02-02用js讀、寫(xiě)、刪除Cookie代碼分享及詳細(xì)注釋說(shuō)明
JavaScript是運(yùn)行在客戶(hù)端的腳本,因此一般是不能夠設(shè)置Session的,因?yàn)镾ession是運(yùn)行在服務(wù)器端的。而cookie是運(yùn)行在客戶(hù)端的,所以可以用JS來(lái)設(shè)置cookie. 下面我們來(lái)分析下案例2014-06-06js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法 js實(shí)現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實(shí)現(xiàn)首屏延遲加載實(shí)現(xiàn)方法,以及js實(shí)現(xiàn)多屏單張圖片延遲加載效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07