JavaScript實(shí)現(xiàn)簡單動(dòng)態(tài)進(jìn)度條效果
更新時(shí)間：2018年04月06日 12:57:45 作者：冷月葬殘花
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單動(dòng)態(tài)進(jìn)度條效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條效果的具體代碼，供大家參考，具體內(nèi)容如下
1.效果
2.源碼
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var myProgress = document.getElementById("myProgress");
var mySpan = document.getElementById("mySpan");
var value = myProgress.value;
mySpan.innerText = value + "%";
var ID = setInterval(function () {
value = myProgress.value;
if (value < 100) {
value += 10;
myProgress.value = value;
mySpan.innerText = value + "%";
}
if (value == 100) {
clearInterval(ID);
}
}, 500);
}
</script>
</head>
<body>
<label for="myProgress">進(jìn)度條</label>
<progress id="myProgress" value="0" max="100"></progress>
<span id="mySpan"></span>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript canvas繪制圓形加載進(jìn)度條
- 詳解JavaScript+Canvas繪制環(huán)形進(jìn)度條
- JavaScript實(shí)現(xiàn)可動(dòng)的canvas環(huán)形進(jìn)度條
- js+HTML5 canvas 實(shí)現(xiàn)簡單的加載條(進(jìn)度條)功能示例
- JS實(shí)現(xiàn)進(jìn)度條動(dòng)態(tài)加載特效
- 基于 D3.js 繪制動(dòng)態(tài)進(jìn)度條的實(shí)例詳解
- php+javascript實(shí)現(xiàn)的動(dòng)態(tài)顯示服務(wù)器運(yùn)行程序進(jìn)度條功能示例
- JavaScript實(shí)現(xiàn)審核流程狀態(tài)的動(dòng)態(tài)顯示進(jìn)度條
- JavaScript?canvas繪制動(dòng)態(tài)圓環(huán)進(jìn)度條
相關(guān)文章
淺談javascript中call()、apply()、bind()的用法
一直對(duì)Javascript中的apply/call/bind的用法很模糊，恰好看到了這篇文章。對(duì)三者之間的區(qū)別與聯(lián)系算是有了比較清晰的認(rèn)識(shí)。這里記錄下來，分享給大家。2015-04-04
javascript中String對(duì)象的slice()方法分析
這篇文章主要介紹了javascript中String對(duì)象的slice()方法,以實(shí)例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12
下面小編就為大家?guī)硪黄猳nclick和onblur沖突問題的快速解決方法。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考2016-04-04
js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無法序列化的問題
JSON序列化指將JSON對(duì)象轉(zhuǎn)換為JSON字符串,J實(shí)現(xiàn)方式有兩種：一種是調(diào)用JSON對(duì)象內(nèi)置的stringify()函數(shù),一種是為對(duì)象自定義toJSON()函數(shù),本文重點(diǎn)介紹js中的bigint類型轉(zhuǎn)化為json字符串時(shí)報(bào)無法序列化的問題,感興趣的朋友一起看看吧2024-01-01
這篇文章主要為大家介紹了js?實(shí)現(xiàn)div拖拽拉伸完整示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
js數(shù)組常用19種方法(你會(huì)的到底有多少呢)
這篇文章主要給大家介紹了關(guān)于js數(shù)組常用19種方法,大家可以看看你會(huì)的到底有多少呢,在日常開發(fā)中我們會(huì)接觸到j(luò)s中數(shù)組的一些方法,需要的朋友可以參考下2023-09-09
跟我學(xué)Nodejs（一）--- Node.js簡介及安裝開發(fā)環(huán)境
這篇文章主要介紹了Node.js簡介及安裝開發(fā)環(huán)境,需要的朋友可以參考下2014-05-05
JS實(shí)現(xiàn)返回上一頁并刷新頁面的方法分析
這篇文章主要介紹了JS實(shí)現(xiàn)返回上一頁并刷新頁面的方法,結(jié)合實(shí)例形式分析了javascript針對(duì)移動(dòng)端、PC端瀏覽器的頁面緩存刷新相關(guān)操作技巧,需要的朋友可以參考下2019-07-07
小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法
這篇文章主要介紹了小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
js操作cookie想必大家并不陌生吧，本文積累了一點(diǎn)小經(jīng)驗(yàn)，在此與大家分享下，希望對(duì)大家有所幫助2013-09-09