JavaScript でプログレスバーを実装するいくつかの方法の紹介-jsチュートリアル-php.cn

1，构建基本的HTML结构和CSS样式

2，给进度条增加文字显示

3，制作进度条的第二种方式---直接使用图片+背景图片

4，应用

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript でプログレスバーを実装するいくつかの方法の紹介

黄舟

Nov 21, 2017 am 09:54 AM

javascript js 方法

前回の記事では、進行状況バーの JavaScript 実装の例を紹介しましたが、実際のプロジェクトでは進行状況バーが依然として非常に便利であることは周知のとおりです。

最初に最終的な効果を見てみましょう:

JavaScript でプログレスバーを実装するいくつかの方法の紹介

最初のステップは、基本的に
基本コードを構築し、効果のデモを確認することです:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 
} 
/*进度条样式*/ 
.progressbar_1{ 
    background-color:#eee; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 
    color:#222; 
} 
.progressbar_1 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 
} 
</style> 
</head> 
<body> 
<div class="wrap"> 
    <h1 id="构建基本的HTML结构和CSS样式">1，构建基本的HTML结构和CSS样式</h1> 
    

 
    0%的状态： 
    <div class="progressbar_1"> 
        <div class="bar"></div> 
    </div> 
    

 
    50%的状态： 
    <div class="progressbar_1"> 
        <div class="bar" style="width: 50%;"></div> 
    </div> 
    

 
    80%的状态： 
    <div class="progressbar_1"> 
        <div class="bar" style="width: 80%;"></div> 
    </div> 
     
    

 
    100%的状态： 
    <div class="progressbar_1"> 
        <div class="bar" style="width: 100%;"></div> 
    </div> 
    
 
    这步非常简单，相信大家都能看明白。 
</div> 
</body> 
</html>

ログイン後にコピー

2 番目のステップは、テキスト表示を追加することです。進行状況バー

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>制作进度条的两种方法</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 
} 
/*进度条样式*/ 
.progressbar_1{ 
    background-color:#eee; 
    color:#222; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 
} 
.progressbar_1 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 
} 
/*绝对定位*/ 
.progressbar_2{ 
    background-color:#eee; 
    color:#222; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 
    text-align:center; 
    position:relative; 
} 
.progressbar_2 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 
    position:absolute; 
    left:0; 
    top:0; 
} 
.progressbar_2 .text { 
    height:16px; 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    line-height:16px; 
} 
/*绝对定位 + z-index */ 
.progressbar_3{ 
    background-color:#eee; 
    color:#222; 
    height:16px; 
    width:150px; 
    border:1px solid #bbb; 
    text-align:center; 
    position:relative; 
} 
.progressbar_3 .bar { 
    background-color:#6CAF00; 
    height:16px; 
    width:0; 
    position:absolute; 
    left:0; 
    top:0; 
    z-index:10; 
} 
.progressbar_3 .text { 
    height:16px; 
    position:absolute; 
    left:0; 
    top:0; 
    width:100%; 
    line-height:16px; 
     
    z-index:100; 
} 
</style> 
</head> 
<body> 
<div class="wrap"> 
    <h1 id="给进度条增加文字显示">2，给进度条增加文字显示</h1> 
     
    
 
    一个进度条需要包含对应的进度文字显示，本例中，我希望文字显示在进度条的中间。 
    接下来，我们在进度条元素内增加一个显示 文字的div。 
    
 
    很显然，直接添加div后，div会占据原先绿色进度条的位置。看下面例子：
 
        <div class="progressbar_1"> 
        <div >50%</div> 
        <div class="bar" style="width: 50%;"></div> 
    </div> 
    

 
    那么有什么办法使得文字 和 绿色进度条 同时显示在 一起呢？ 
    
 
    估计你也想到了，那就是绝对定位。通过对父元素添加相对定位，然后给子元素添加绝对定位，设置子元素的左边距和上边距都为0。 
    
 
    看下面的例子： 
    

 
    <div class="progressbar_2"> 
        <div class="text">50%</div> 
        <div class="bar" style="width: 50%;"></div> 
    </div> 
    

 
    这时你会发现文字被遮盖了，相信你第一时间就会想到用 z-index 去设置他们的层级关系。
 
    对，我也选择的是它。通过给他们设置不同的z-index值来确定层级关系，值越大越显示在上面。看下面例子：

 
    <div class="progressbar_3"> 
        <div class="text">50%</div> 
        <div class="bar" style="width: 50%;"></div> 
    </div> 
    

 
    <div class="progressbar_3"> 
        <div class="text">80%</div> 
        <div class="bar" style="width: 80%;"></div> 
    </div> 
    

 
    <div class="progressbar_3"> 
        <div class="text">100%</div> 
        <div class="bar" style="width: 100%;"></div> 
    </div> 
        这是第一种方式，也是目前最为流行的 制作进度条的方式。
 
    他的原理就是采用 相对定位和绝对定位，然后通过背景不同来控制进度。 
    接下来我们看第二种方式制作进度条。
 </div> 
</body> 
</html>

ログイン後にコピー

原則は、相対位置と絶対位置を使用し、さまざまな背景を通じて進行状況を制御することです。次に、進行状況バーを作成する 2 番目の方法を見ていきます。
3 番目のステップ、進行状況バーを作成する 2 番目の方法 -- 画像と背景画像を直接使用します

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<style> 
*{ 
    margin:0; 
    padding:0; 
} 
body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 
} 
/*不带文字*/ 
.progress{ 
    border:0; 
    width: 152px; 
    height: 18px; 
    background:url(img/progress.gif) no-repeat -100px 50%; 
} 
/*带文字显示*/ 
.progressbar_3{ 
    width:152px; 
    position:relative; 
    height:18px; 
    text-align:center; 
    position:relative; 
    color:#222; 
} 
.progressbar_3 .text{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    line-height:18px; 
    z-index:100; 
} 
.progressbar_3 .progress{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    z-index:10; 
} 
</style> 
</head> 
<body> 
<div class="wrap"> 
    <h1 id="制作进度条的第二种方式-直接使用图片-背景图片">3，制作进度条的第二种方式---直接使用图片+背景图片</h1> 
      <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="0%" alt="0%"  style="background-position:-152px 50%;"/>          
       <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="20%" alt="20%"  style="background-position:-120px 50%;"/> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="50%" alt="50%"  style="background-position:-76px 50%;"/> 
         <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="80%" alt="80%"  style="background-position:-30px 50%;"/> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="100%" alt="100%"  style="background-position: 0 50%;"/> 
 
    如果你想在上面进度条上添加进度显示的文字，你应该知道怎么办了（如果你仔细阅读过前面的例子的话）。
 
    对，就是使用绝对定位+相对定位来控制。 
    <div class="progressbar_3"> 
        <div class="text">0%</div> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="0%" alt="0%"  style="background-position:-152px 50%;"/> 
    </div> 
    <div class="progressbar_3"> 
        <div class="text">20%</div> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="20%" alt="20%"  style="background-position:-120px 50%;"/> 
    </div> 
    <div class="progressbar_3"> 
        <div class="text">50%</div> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="50%" alt="50%"  style="background-position:-76px 50%;"/> 
    </div> 
    <div class="progressbar_3"> 
        <div class="text">80%</div> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="80%" alt="80%"  style="background-position:-30px 50%;"/> 
    </div> 
    <div class="progressbar_3"> 
        <div class="text">100%</div> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="100%" alt="100%"  style="background-position: 0 50%;"/> 
    </div> 
    这种方式的原理就是 利用 一张img图片，然后给img图片又设置背景图，通过背景图的background position 属性 来显示不同的部分。
 
    当然这种方式 对图片有点要求 。你仔细一点就会发现，宽度是img的2倍。
 
    另外图片必须是gif透明的，也就是说空心的。呵呵。看不到进度条。
 
    总的来说，这应该算一个技巧，在实际项目中，也是能使用的。
<p style="float:right;">Dev By <a href="http://www.jb51.net" >jb51.net</a></p> 
</div> 
</body> 
</html>

ログイン後にコピー

4 番目のステップ、適用
最後に、簡単なアプリケーションを見てみましょう:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 

<style> 
*{ 
    margin:0; 
    padding:0; 
} 
body{font-size:12px;}h1{font-size:15px;} 
.wrap{ 
    font-size: 12px; 
    margin:40px auto; 
    width:400px; 
} 

/*不带文字*/ 
.progress{ 
    border:0; 
    width: 152px; 
    height: 18px; 
    background:url(img/progress.gif) no-repeat -100px 50%; 
} 
/*带文字显示*/ 
.progressbar_3{ 
    width:152px; 
    position:relative; 
    height:18px; 
    text-align:center; 
    position:relative; 
    color:#222; 
} 
.progressbar_3 .text{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    line-height:18px; 
    z-index:100; 
} 
.progressbar_3 .progress{ 
    width:152px; 
    position:absolute; 
    left:0; 
    top:0; 
    height:18px; 
    z-index:10; 
} 
</style> 

<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript" charset="gb2312"></script> 
<script> 
$(function(){ 
    var $txt = $(".progressbar_3 .text"); 
    var $progress = $(".progressbar_3 .progress"); 

    $("#addTo").click(function(){ 
        $progress.animate({"backgroundPosition":"-76px 50%"},500,function(){ 
            $(this).attr({"alt":"50%","title":"50%"}); 
            $txt.text("50%"); 
            $("<p>进度条加载完毕!</p>").appendTo(".wrap"); 
        }); 
    }); 
    $("#cutdown").click(function(){ 
        $progress.animate({"backgroundPosition":"-120px 50%"},500,function(){ 
            $(this).attr({"alt":"20%","title":"20%"}); 
            $txt.text("20%"); 
            $("<p>进度条加载完毕!</p>").appendTo(".wrap"); 
        }); 
    }); 
}); 
</script> 
</head> 
<body> 
<div class="wrap"> 
    <h1 id="应用">4，应用</h1> 
          <div class="progressbar_3"> 
        <div class="text">0%</div> 
        <img class="progress lazy"  src="/static/imghw/default1.png"  data-src="img/bg.gif"      style="max-width:90%"  style="max-width:90%" title="0%" alt="0%"  style="background-position:-152px 50%;"/> 
    </div> 
      <button id="addTo" >增加至50%</button> 
    <button id="cutdown" >减少至20%</button> 
     我使用的是第二种方式来做控制，通过animate来控制图片的background-position来达到进度条效果。
     当然你也可以使用第一种方式做，第一种方式需要改变的是进度条的 width 属性。 
        <p style="float:right;">Dev By <a href="http://www.jb51.net" >jb51.net</a></p> 
    </div> 
</body> 
</html>

ログイン後にコピー

アニメーションを使用して画像の背景位置を制御し、プログレスバー効果を実現します。
もちろん、最初の方法を使用することもできます。最初の方法で変更する必要があるのは、プログレスバーの幅属性です。

概要:

この記事を学習することで、友人は JavaScript でプログレスバーを実装する方法をよりよく理解できると思います。それぞれの方法は、自分のニーズに応じて適切な方法を選択できます。！

関連する推奨事項:

プログレスバーのネイティブコードを実装するJavaScript

JSネイティブアップロード大きなファイルの表示プログレスバー -phpアップロードファイル

タイマーに基づいて進行状況バーを実装する JavaScript の例

以上がJavaScript でプログレスバーを実装するいくつかの方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

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

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7662

CakePHP チュートリアル

1393

C# チュートリアル

1205

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

Related knowledge

トマト無料小説アプリで小説を書く方法. トマトノベルで小説を書く方法に関するチュートリアルを共有します。 Mar 28, 2024 pm 12:50 PM

トマトノベルは非常に人気のある小説閲覧ソフトウェアです。トマトノベルでは、新しい小説や漫画を読むことができます。どの小説も漫画もとても面白いです。小説を書きたい友達もたくさんいます。お小遣いを稼いで、小説の内容を編集することもできます。「テキストに文章を書きたいです。それで、小説はどうやって書くのですか？友達は知らないので、一緒にこのサイトに行きましょう。小説の書き方の入門を少し見てみましょう。」 Tomato Novels を使用して小説を書く方法に関するチュートリアルを共有します。 1. まず、携帯電話で Tomato Free Novels アプリを開き、パーソナルセンター - ライターセンターをクリックします。 2. Tomato Writer Assistant ページに移動し、次の場所で [新しい本の作成] をクリックします。小説の終わり

Colorful マザーボードに BIOS を入力するにはどうすればよいですか? 2つの方法を教えます Mar 13, 2024 pm 06:01 PM

Colorful マザーボードは中国国内市場で高い人気と市場シェアを誇っていますが、Colorful マザーボードのユーザーの中には、設定のために BIOS を入力する方法がまだ分からない人もいます。この状況に対応して、編集者はカラフルなマザーボード BIOS に入る 2 つの方法を特別に提供しました。ぜひ試してみてください。方法 1: U ディスク起動ショートカットキーを使用して、U ディスクインストールシステムに直接入ります。ワンクリックで U ディスクを起動する Colorful マザーボードのショートカットキーは ESC または F11 です。まず、Black Shark インストールマスターを使用して、Black Shark インストールマスターを作成します。 Shark U ディスク起動ディスクを選択し、コンピュータの電源を入れます。起動画面が表示されたら、キーボードの ESC キーまたは F11 キーを押し続けて、起動項目を順次選択するウィンドウに入ります。「USB」の場所にカーソルを移動します。」と表示され、その後

WeChat で削除された連絡先を回復する方法 (簡単なチュートリアルでは、削除された連絡先を回復する方法について説明します) May 01, 2024 pm 12:01 PM

残念ながら、WeChat は広く使用されているソーシャルソフトウェアであり、何らかの理由で特定の連絡先を誤って削除してしまうことがよくあります。ユーザーがこの問題を解決できるように、この記事では、削除された連絡先を簡単な方法で取得する方法を紹介します。 1. WeChat の連絡先削除メカニズムを理解します。これにより、削除された連絡先を取得できるようになります。WeChat の連絡先削除メカニズムでは、連絡先がアドレス帳から削除されますが、完全には削除されません。 2. WeChat の組み込みの「連絡先帳復元」機能を使用します。WeChat には、この機能を通じて以前に削除した連絡先をすばやく復元できる「連絡先帳復元」機能が用意されています。 3. WeChat 設定ページに入り、右下隅をクリックし、WeChat アプリケーション「Me」を開き、右上隅にある設定アイコンをクリックして設定ページに入ります。

携帯電話の文字サイズの設定方法（携帯電話の文字サイズを簡単に調整できます） May 07, 2024 pm 03:34 PM

携帯電話が人々の日常生活において重要なツールになるにつれて、フォントサイズの設定は重要なパーソナライゼーション要件になりました。さまざまなユーザーのニーズを満たすために、この記事では、簡単な操作で携帯電話の使用体験を向上させ、携帯電話のフォントサイズを調整する方法を紹介します。携帯電話のフォントサイズを調整する必要があるのはなぜですか - フォントサイズを調整すると、テキストがより鮮明で読みやすくなります - さまざまな年齢のユーザーの読書ニーズに適しています - フォントサイズを使用すると、視力の悪いユーザーにとって便利です携帯電話システムの設定機能 - システム設定インターフェイスに入る方法 - 設定インターフェイスで「表示」オプションを見つけて入力します。 - 「フォントサイズ」オプションを見つけて、サードパーティでフォントサイズを調整します。アプリケーション - フォントサイズの調整をサポートするアプリケーションをダウンロードしてインストールします - アプリケーションを開いて、関連する設定インターフェイスに入ります - 個人に応じて

Win11で管理者権限を取得する方法まとめ Mar 09, 2024 am 08:45 AM

Win11 管理者権限の取得方法のまとめ. Windows 11 オペレーティングシステムでは、管理者権限は、ユーザーがシステム上でさまざまな操作を実行できるようにする非常に重要な権限の 1 つです。ソフトウェアのインストールやシステム設定の変更など、一部の操作を完了するために管理者権限の取得が必要になる場合があります。以下にWin11の管理者権限を取得する方法をまとめましたので、お役に立てれば幸いです。 1. ショートカットキーを使用する Windows 11 システムでは、ショートカットキーを使用してコマンドプロンプトをすばやく開くことができます。

モバイルドラゴンの卵を孵化させる秘密が明らかに（モバイルドラゴンの卵をうまく孵化させる方法を段階的に教えます） May 04, 2024 pm 06:01 PM

テクノロジーの発展に伴い、モバイルゲームは人々の生活に欠かせないものになりました。かわいいドラゴンエッグの画像と面白い孵化過程で多くのプレイヤーの注目を集めており、その中でも注目を集めているゲームの一つがモバイル版ドラゴンエッグです。プレイヤーがゲーム内で自分のドラゴンをより適切に育成し成長させることができるように、この記事ではモバイル版でドラゴンの卵を孵化させる方法を紹介します。 1. 適切な種類のドラゴンエッグを選択するプレイヤーは、ゲーム内で提供されるさまざまな種類のドラゴンエッグの属性と能力に基づいて、自分に適したドラゴンエッグの種類を慎重に選択する必要があります。 2. 孵化機のレベルをアップグレードします。プレイヤーはタスクを完了し、小道具を収集することで孵化機のレベルを向上させる必要があります。孵化機のレベルは孵化速度と孵化成功率を決定します。 3. プレイヤーはゲームに参加する必要がある孵化に必要なリソースを収集します。

Oracleバージョンの問い合わせ方法の詳細説明 Mar 07, 2024 pm 09:21 PM

Oracleバージョンのクエリ方法を詳しく解説 Oracleは、世界で最も人気のあるリレーショナルデータベース管理システムの1つで、豊富な機能と強力なパフォーマンスを提供し、企業で広く使用されています。データベースの管理と開発のプロセスでは、Oracle データベースのバージョンを理解することが非常に重要です。この記事では、Oracle データベースのバージョン情報をクエリする方法と具体的なコード例を詳しく紹介します。単純な SQL ステートメントを実行して、Oracle データベース内の SQL ステートメントのデータベースバージョンをクエリします。

推奨: 優れた JS オープンソースの顔検出および認識プロジェクト Apr 03, 2024 am 11:55 AM

顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネットアプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワークインタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザーエクスペリエンスが向上することが挙げられます。欠点としては、モデルサイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピュータービジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。

See all articles

JavaScript でプログレスバーを実装するいくつかの方法の紹介

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック