js實現(xiàn)簡單進度條效果
更新時間：2020年03月25日 17:07:44 作者：幻期頤y
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)簡單進度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)簡單進度條的具體代碼，供大家參考，具體內(nèi)容如下
實現(xiàn)進度條需要三個部分：
1、外部的大容器
2、在增長的進度條
3、顯示進度條可視化的百分?jǐn)?shù)
運用js控制進度條的width便可實現(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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用 Jest 和 Supertest 進行接口端點測試實例詳解
這篇文章主要介紹了使用 Jest 和 Supertest 進行接口端點測試,結(jié)合實例形式詳細(xì)分析了使用 Jest 和 Supertest 進行接口端點測試具體原理、操作技巧與相關(guān)注意事項,需要的朋友可以參考下2020-04-04
Bootstrap自動適應(yīng)PC、平板、手機的Bootstrap柵格系統(tǒng)
這篇文章主要介紹了Bootstrap自動適應(yīng)PC、平板、手機的Bootstrap柵格系統(tǒng)的相關(guān)資料,需要的朋友可以參考下2016-05-05
根據(jù)輸入郵箱號跳轉(zhuǎn)到相應(yīng)登錄地址的解決方法
本文分享了基于javascript實現(xiàn)的根據(jù)輸入郵箱號跳轉(zhuǎn)到相應(yīng)登錄地址的具體實例代碼，需要的朋友一起來看下吧2016-12-12
JS、CSS以及img對DOMContentLoaded事件的影響
最近在做性能有關(guān)的數(shù)據(jù)上報，發(fā)現(xiàn)了兩個非常有意思的東西：Chrome開發(fā)者工具的Timeline分析面板，以及DOMContentLoaded事件。一個是強大的令人發(fā)指的性能分析工具，一個是重要的性能指標(biāo)，于是就用Timeline對DOMContentLoaded事件進行了一番研究2014-08-08
這篇文章主要為大家詳細(xì)介紹了用js實現(xiàn)放大鏡效果，利用背景圖，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
javascript 改變網(wǎng)頁加載的CSS主要通過動態(tài)響應(yīng)select觸發(fā)的選項變化控制link標(biāo)簽加載的css,以實現(xiàn)不依賴cookie控制的頁面css樣式動態(tài)加載功能,需要的朋友可以參考一下2007-12-12
動態(tài)統(tǒng)計當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解
這篇文章主要介紹了動態(tài)統(tǒng)計當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下2017-10-10
本文主要介紹了JS對象創(chuàng)建的幾種方式，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下2015-04-04
bootstrap-Treeview實現(xiàn)級聯(lián)勾選
這篇文章主要為大家詳細(xì)介紹了bootstrap-Treeview實現(xiàn)級聯(lián)勾選，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11