快捷導(dǎo)航

JavaScript實(shí)現(xiàn)簡(jiǎn)單動(dòng)態(tài)進(jìn)度條效果

更新時(shí)間：2018年04月06日 12:57:45 作者：冷月葬殘花

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎ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>

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

您可能感興趣的文章:

相關(guān)文章

微信小程序登錄時(shí)如何獲取input框中的內(nèi)容
這篇文章主要介紹了微信小程序登錄時(shí)如何獲取input框中的內(nèi)容,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
JS常見(jiàn)簡(jiǎn)單正則表達(dá)式驗(yàn)證功能小結(jié)【手機(jī),地址,企業(yè)稅號(hào),金額,身份證等】
這篇文章主要介紹了JS常見(jiàn)簡(jiǎn)單正則表達(dá)式驗(yàn)證功能,結(jié)合實(shí)例形式總結(jié)分析了JS針對(duì)手機(jī),地址,企業(yè)稅號(hào),金額,身份證等的常見(jiàn)驗(yàn)證技巧,需要的朋友可以參考下
2017-01-01
JS圖片延遲加載插件LazyImgv1.0用法分析【附demo源碼下載】
這篇文章主要介紹了JS圖片延遲加載插件LazyImgv1.0用法,結(jié)合實(shí)例形式分析了使用圖片延遲加載插件LazyImgv1.0的注意事項(xiàng)與核心操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
2017-09-09
詳解JavaScript樹(shù)結(jié)構(gòu)
對(duì)于數(shù)據(jù)結(jié)構(gòu)“樹(shù)”，想必大家都熟悉，本文，我們就再來(lái)回顧一下數(shù)據(jù)結(jié)構(gòu)中的二叉樹(shù)與樹(shù)，并用JavaScript實(shí)現(xiàn)它們。下面就跟著小編一起來(lái)看下吧
2017-01-01
微信小程序收藏功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了微信小程序收藏功能的實(shí)現(xiàn)代碼,基本功能是點(diǎn)擊收藏后顯示已收藏，在另一個(gè)頁(yè)面出現(xiàn)目前點(diǎn)擊收藏的項(xiàng)目。需要的朋友可以參考下
2018-06-06
uniapp實(shí)現(xiàn)橫向滾動(dòng)選擇日期
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)橫向滾動(dòng)選擇日期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-10-10
webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件
在 webpack5 中內(nèi)置了 file-loader、url-loader、raw-loader, 可以直接通過(guò)配置實(shí)現(xiàn)常用功能,下面就來(lái)介紹一下webpack5處理圖片、圖標(biāo)字體、多媒體等靜態(tài)資源文件的實(shí)現(xiàn)方法,感興趣的可以了解一下
2023-12-12
JavaScript生成一個(gè)不重復(fù)的ID的方法示例
這篇文章主要介紹了JavaScript生成一個(gè)不重復(fù)的ID的方法示例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-09-09
淺談nodeName,nodeValue,nodeType,typeof 的區(qū)別
本文主要簡(jiǎn)單介紹了nodeName,nodeValue,nodeType,typeof 的區(qū)別,算是知識(shí)點(diǎn)的一個(gè)小總結(jié)，希望對(duì)小伙伴們有所幫助
2015-01-01
通過(guò)JavaScript實(shí)現(xiàn)CSS和JS文件的動(dòng)態(tài)加載
在現(xiàn)代Web開(kāi)發(fā)中,動(dòng)態(tài)加載CSS和JavaScript文件是一個(gè)常見(jiàn)的需求,這種技術(shù)可以用來(lái)優(yōu)化頁(yè)面加載速度,減少初始加載時(shí)間,并提高用戶(hù)體驗(yàn),本文將詳細(xì)介紹如何通過(guò)JavaScript實(shí)現(xiàn)CSS和JS文件的動(dòng)態(tài)加載,包括不同的加載方法、注意事項(xiàng)以及最佳實(shí)踐
2024-11-11