快捷導(dǎo)航

簡(jiǎn)單實(shí)現(xiàn)js進(jìn)度條加載效果

更新時(shí)間：2020年03月25日 11:52:58 作者：蒲小若

這篇文章主要為大家詳細(xì)介紹了如何簡(jiǎn)單實(shí)現(xiàn)js進(jìn)度條加載效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js進(jìn)度條加載效果的具體代碼，供大家參考，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>下載進(jìn)度</title>
<style>
/*定義父容器*/
.content{
width: 500px;
height: 200px;
background: pink;
margin:0 auto;
}
/*定義進(jìn)度條*/
.box{
width: 20px;
height: 30px;
line-height: 30px;
text-align: center;
background: #f00;
color: #fff;
}
/*定義下方顯示的下載百分比*/
.percent{
width: 100%;
height: 30px;
line-height: 30px;
color: #00f;
text-align: center;
}
</style>
</head>
<body>
<div class="content" id="content">
<input type="button" id="button" value="暫停/增加" onclick="parse()">
<div class="box" id="box"></div>
<div class="percent" id="percent"></div>
</div>
<script>
// 獲取id為box的元素
var box = document.getElementById("box");
//初始化y，此值只可以放在方法外部，若放到方法內(nèi)部的話，那方法的每一次執(zhí)行都是從寬度為0開(kāi)始，從而使得進(jìn)度條會(huì)一直停留在第一次執(zhí)行方法的位置。
var y = 0;
//定義parse()方法
function parse(){
//獲取進(jìn)度條div的寬度
var x = box.style.width;
x = parseInt(x) + 1;
y = y+1;
//將y值加上百分號(hào)賦值給box的寬度。這樣每次+1就可以實(shí)現(xiàn)進(jìn)度條占父容器的100%;
box.style.width = y + "%";
//將y值加上百分號(hào)并賦值給顯示下載百分比的div上
document.getElementById("percent").innerHTML = y + "%";
//判斷當(dāng)y已經(jīng)100的時(shí)候，也就是進(jìn)度條的寬度和父容器的寬度一致的時(shí)候停止。
if (y >= 100) {
clearInterval(id);
document.getElementById("percent").innerHTML = "100%";
document.getElementById("box").innerHTML = "下載完畢!";
}
}
//每10毫秒調(diào)用一下parse()方法.
var id = setInterval("parse()",10);
//當(dāng)單機(jī)父容器時(shí)，進(jìn)度條停止
document.getElementById("content").onclick = function(){
clearInterval(id);
} 


</script>
</body>
</html>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

js字符串處理之絕妙的代碼
這篇文章主要介紹了js字符串處理之絕妙的代碼，包括字符串去重、將字符放在對(duì)象中遍歷拼接出字符串、把字符串的奇數(shù)位和偶數(shù)位分別提取到兩個(gè)數(shù)組中、將兩個(gè)數(shù)組按奇數(shù)位和偶數(shù)位插入拼接為字符串，有時(shí)候需要對(duì)字符進(jìn)行處理的時(shí)候可以用得到
2019-04-04
Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法
本篇文章主要介紹了Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-12-12
JS getStyle獲取最終樣式函數(shù)代碼
定義一個(gè)id="flower"的div元素并設(shè)置如上樣式,我們的目標(biāo)就是通過(guò)javascript來(lái)獲取樣式的最終屬性
2010-04-04
JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦
下面小編就為大家?guī)?lái)一篇JavaScript幾種數(shù)組去掉重復(fù)值的方法推薦。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看
2016-04-04
JavaScript?微任務(wù)和宏任務(wù)講解
這篇文章主要分享了JavaScript?微任務(wù)和宏任務(wù)講解，在js中，我們一般將所有的任務(wù)都分成兩類(lèi)，一種是同步任務(wù)，另外一種是異步任務(wù)。而在異步任務(wù)中，又有著更加細(xì)致的分類(lèi)，那就是微任務(wù)和宏任務(wù)，下面來(lái)一起學(xué)習(xí)js中的微任務(wù)和宏任務(wù)吧
2021-12-12
js手機(jī)號(hào)4位顯示空格，銀行卡每4位顯示空格效果
這篇文章主要介紹了js手機(jī)號(hào)4位顯示空格，銀行卡每4位顯示空格效果，手機(jī)號(hào)和銀行卡號(hào)，按照每4位顯示一個(gè)空格的需求，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。
2017-03-03
ES6中Promise、async、await用法超詳細(xì)講解指南
async+await是ES6中引入的異步編程解決方案,旨在解決異步編程中的回調(diào)地獄問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于ES6中Promise、async、await用法超詳細(xì)講解的相關(guān)資料,需要的朋友可以參考下
2024-08-08
uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過(guò)程
經(jīng)常在做app的時(shí)候,會(huì)有做熱更新的需求,這也是常用的更新app的一種手段,下面這篇文章主要給大家介紹了關(guān)于uniApp實(shí)現(xiàn)熱更新的思路與詳細(xì)過(guò)程,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-11-11
微信小程序?qū)崿F(xiàn)多文件或者圖片上傳
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多文件或者圖片上傳，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-07-07
layui 實(shí)現(xiàn)表單和文件上傳一起傳到后臺(tái)的例子
今天小編就為大家分享一篇layui 實(shí)現(xiàn)表單和文件上傳一起傳到后臺(tái)的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09