」。"/> 」。">

首頁  >  文章  >  web前端  >  html怎麼實現進度條

html怎麼實現進度條

青灯夜游
青灯夜游原創
2021-05-17 14:54:1819159瀏覽

在html中,可以使用progress標籤來實現進度條,該標籤可以定義運行中的任務進度(進程),使用語法「」。

html怎麼實現進度條

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

標籤定義執行中的任務進度(進程)。

下载进度:
<progress value="22" max="100">
</progress>

效果圖:

html怎麼實現進度條

說明: 標籤可以與 JavaScript 一起使用來動態顯示任務的進度。

<progress id=&#39;progress1&#39; value="0" max="100">
</progress>
<button onclick="start_run(100)">下载</button>
<script>
function start_run(n)
{
    if(n==0){alert("下载完成")}
    var progress1=document.getElementById("progress1")
    n=n-1
    cur_task=100-n
    progress1.value=cur_task
    setTimeout("start_run("+n+")",100)
    
}
</script>

效果圖:

html怎麼實現進度條

html怎麼實現進度條

#更多程式相關知識,請造訪:程式設計影片! !

以上是html怎麼實現進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn