js實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條效果
本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單進(jìn)度條的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)進(jìn)度條需要三個(gè)部分:
1、外部的大容器
2、在增長(zhǎng)的進(jìn)度條
3、顯示進(jìn)度條可視化的百分?jǐn)?shù)
運(yùn)用js控制進(jìn)度條的width便可實(shí)現(xiàn);
具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div{ width: 500px; height: 50px; position: relative; border: 2px solid; margin: 0 auto; } aside{ height: 50px; background:red; } p{ position: absolute; top: 0; right: 0; } </style> <script type="text/javascript"> var i = 0; var timer = setInterval(function(){ document.getElementById("aside").style.width = i++ + 'px'; document.getElementById("span").innerHTML = parseInt(i*100/500); if(i > 500){ clearInterval(timer);} },10) </script> </head> <body> <div> <aside id="aside" style="width: 10px;"></aside> <p><span id="span">0</span>%</p> </div> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)帶箭頭的進(jìn)度流程
- JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
- javascript+css實(shí)現(xiàn)進(jìn)度條效果
- JS實(shí)現(xiàn)可控制的進(jìn)度條
- node.js實(shí)現(xiàn)帶進(jìn)度條的多文件上傳
- js+HTML5 canvas 實(shí)現(xiàn)簡(jiǎn)單的加載條(進(jìn)度條)功能示例
- 教你3分鐘利用原生js實(shí)現(xiàn)有進(jìn)度監(jiān)聽(tīng)的文件上傳預(yù)覽組件
- JS中實(shí)現(xiàn)一個(gè)下載進(jìn)度條及播放進(jìn)度條的代碼
- 詳解JavaScript進(jìn)度管理
相關(guān)文章
詳解ES6之a(chǎn)sync+await 同步/異步方案
這篇文章主要介紹了詳解ES6之a(chǎn)sync+await 同步/異步方案,本文以最簡(jiǎn)明的方式來(lái)疏通 async + await,有興趣的可以了解下2017-09-09JavaScript實(shí)現(xiàn)打字效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)打字效果的方法,可實(shí)現(xiàn)文字陸續(xù)出現(xiàn)的打字效果,涉及javascript時(shí)間函數(shù)及頁(yè)面元素獲取的相關(guān)技巧,需要的朋友可以參考下2015-07-07js判斷數(shù)組key是否存在(不用循環(huán))的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js判斷數(shù)組key是否存在(不用循環(huán))的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08JavaScript和JQuery的鼠標(biāo)mouse事件冒泡處理
這篇文章主要介紹了JavaScript和JQuery的鼠標(biāo)mouse事件冒泡處理,本文總結(jié)出了mouse事件的一些定論,并分別給出了JavaScript和JQuery測(cè)試代碼,需要的朋友可以參考下2015-06-06使用JS實(shí)現(xiàn)圖片展示瀑布流效果的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇使用JS實(shí)現(xiàn)圖片展示瀑布流效果的實(shí)例代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案
這篇文章主要介紹了微信小程序中的video視頻實(shí)現(xiàn) 自定義播放按鈕、封面圖、視頻封面上文案,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01微信小程序怎么加入JavaScript腳本,做出動(dòng)態(tài)效果
這篇文章主要介紹了教大家為小程序加入?JavaScript?腳本,做出動(dòng)態(tài)效果,以及如何跟用戶(hù)互動(dòng)。學(xué)會(huì)了腳本,就能做出復(fù)雜的頁(yè)面了。需要的朋友可以參考下2022-12-12window.showModalDialog()返回值的學(xué)習(xí)心得總結(jié)
本篇文章主要介紹了window.showModalDialog()返回值的學(xué)習(xí)心得。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01