"。"/> "。">

ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLでプログレスバーを実装する方法

HTMLでプログレスバーを実装する方法

青灯夜游
青灯夜游オリジナル
2021-05-17 14:54:1819216ブラウズ

HTML では、進行状況タグを使用して進行状況バーを実装できます。このタグは、実行中のタスク (プロセス) の進行状況を定義できます。構文 ""。

HTMLでプログレスバーを実装する方法

このチュートリアルの動作環境: Windows 7 システム、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 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。