JavaScript實(shí)現(xiàn)簡單動(dòng)態(tài)進(jìn)度條效果
本文實(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-04javascript中String對(duì)象的slice()方法分析
這篇文章主要介紹了javascript中String對(duì)象的slice()方法,以實(shí)例形式分析了slice()方法的定義、參數(shù)與具體用法,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2014-12-12js中的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-01js數(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-05JS實(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