コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > シンプルな JQuery プログレスバー example_jquery

シンプルな JQuery プログレスバー example_jquery

WBOY
リリース： 2016-05-16 16:50:55
オリジナル
1303 人が閲覧しました

jQuery で実装された最も単純なプログレス バー。コードは 10 行未満です。スタイルは直接無視できます。 (自分で見つけてください)

シンプルな JQuery プログレスバー example_jquery

[CSS] コード

コードをコピー コードは次のとおりです:

$(function(){
var i=0;
(function progressBar(){
i=i 1;
if(i>=101){
i =0;
}
$("#proc").animate({width:i "%"},500);
$("#progressWord").text(i " %") ;
setTimeout(progressBar,1500);
})();
});

[CSS] コード

コードをコピー コードは次のとおりです:

.progress_out {
位置:相対;
ボーダー:1px ソリッド #3c4d60;
-webkit-box-shadow: #666 0px 0px 3px;
-moz-box-shadow: #666 0px 0px 3px;
ボックスシャドウ: #666 0px 0px 3px;
幅:200px;
高さ:40px;
}
.progress_inner{
背景色: #DADAE4;
幅: 100 %;
高さ: 40px;
}
.progress_word{
位置:絶対;
左:50%;
上:24%;
フォント-重量: 太字 ;
}

[HTML] コード

コードをコピー コードは次のとおりです。

< div id= "outDiv" class="progress_out">



0%


関連ラベル：
jquery进度条
ソース：php.cn
前の記事：JSで2つの大きな数値(整数)の乗算を実装_JavaScriptスキル 次の記事：imgのhrefとsrc_javascriptスキルにおける変数の取得と値の代入方法について
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
VueJS スケジューリング関数の実行順序により問題が発生する APIから取得したお知らせのリストをページに表示しようとしています。私は Vuex ストアを使用しており、アナウンスと呼ばれる状態があります。また、ユーザーがページを更新/入力する...
から 2024-04-06 10:37:58
0
1
385
エンドユーザーの現在の選択に基づいて選択ボックスから選択したオプションを移動するには、jquery スクリプトが必要です エンドユーザーが選択ボックス要素を介してアイテムをランク付けできる HTML ページがあります。簡単なデモを確認するには、フィドルを参照してください: https://jsfidd...
から 2024-04-04 18:40:04
0
1
3528
表のタイトルを垂直方向に回転、中央 + 下揃え、クロスブラウザー ヘッダーが回転されたテーブルがありますが、これは Chrome では期待どおりに表示されますが、Firefox では期待どおりに表示されません。 Chromev108 (垂直下、水...
から 2024-04-04 16:45:25
0
1
330
複数のテーブルからデータを取得する場合、SQL グループ化でテーブル内のエントリに基づいてクエリを実行する方法 2つのテーブルがあります。クリック2.rideクリックテーブルID |タイムライドテーブルID |タイムスタンプ両方のテーブルからデータを取得したいのですが、GROUPBYEXTR...
から 2024-04-04 08:58:17
0
1
319
apply からのメソッドを使用する 配列の最大値を見つける簡単な方法は Math.max.apply(null,myArray) です。 ただし、myArray に複素数が含まれており、各複素数が複素数の長さを計算す...
から 2024-04-03 21:41:46
0
2
278
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート