JavaScript實現(xiàn)簡單動態(tài)進度條效果
更新時間:2018年04月06日 12:57:45 作者:冷月葬殘花
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單動態(tài)進度條效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)動態(tài)進度條效果的具體代碼,供大家參考,具體內(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">進度條</label> <progress id="myProgress" value="0" max="100"></progress> <span id="mySpan"></span> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript canvas繪制圓形加載進度條
- 詳解JavaScript+Canvas繪制環(huán)形進度條
- JavaScript實現(xiàn)可動的canvas環(huán)形進度條
- js+HTML5 canvas 實現(xiàn)簡單的加載條(進度條)功能示例
- JS實現(xiàn)進度條動態(tài)加載特效
- 基于 D3.js 繪制動態(tài)進度條的實例詳解
- php+javascript實現(xiàn)的動態(tài)顯示服務器運行程序進度條功能示例
- JavaScript實現(xiàn)審核流程狀態(tài)的動態(tài)顯示進度條
- JavaScript?canvas繪制動態(tài)圓環(huán)進度條
相關文章
淺談javascript中call()、apply()、bind()的用法
一直對Javascript中的apply/call/bind的用法很模糊,恰好看到了這篇文章。對三者之間的區(qū)別與聯(lián)系算是有了比較清晰的認識。這里記錄下來,分享給大家。2015-04-04javascript中String對象的slice()方法分析
這篇文章主要介紹了javascript中String對象的slice()方法,以實例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12js中的bigint類型轉(zhuǎn)化為json字符串時報無法序列化的問題
JSON序列化指將JSON對象轉(zhuǎn)換為JSON字符串,J實現(xiàn)方式有兩種:一種是調(diào)用JSON對象內(nèi)置的stringify()函數(shù),一種是為對象自定義toJSON()函數(shù),本文重點介紹js中的bigint類型轉(zhuǎn)化為json字符串時報無法序列化的問題,感興趣的朋友一起看看吧2024-01-01跟我學Nodejs(一)--- Node.js簡介及安裝開發(fā)環(huán)境
這篇文章主要介紹了Node.js簡介及安裝開發(fā)環(huán)境,需要的朋友可以參考下2014-05-05小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法
這篇文章主要介紹了小程序rich-text組件如何改變內(nèi)部img圖片樣式的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-05-05