この記事では、プログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 今回のエフェクト画像は以下の通り。 この例を実行するのは難しくありません。練習したとき、新しい知識のポイントは 一般的な考え方としては、最初にdivボックスに幅0のdivボックスを配置し、ボタンの コードは次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <スタイル> #容器 { 幅: 500ピクセル; 高さ: 200px; マージン: 50px 自動; 位置: 相対的; } #箱 { 幅: 260ピクセル; 高さ: 30px; 境界線: 1px ピンクの実線; 境界線の半径: 16px; 下マージン: 20px; パディング: 1px; オーバーフロー: 非表示; } #続き 幅: 0; 高さ: 100%; 背景色: ピンク; 境界線の半径: 16px; } #ボタン{ 位置: 絶対; 左マージン: 110px; 幅: 50px; 高さ: 30px; } #文章 { 表示: ブロック; 位置: 相対的; 左: 120px; 下マージン: 20px; } </スタイル> </head> <本文> <div id="コンテナ"> <div id="box" データコンテンツ前="22"> <div id="続き"></div> </div> <div id="text">0%</div> <button id="btn">送信</button> </div> <スクリプト> box = document.getElementById("box"); とします。 btn = document.getElementById("btn"); とします。 cont = document.getElementById("cont"); となります。 text = document.getElementById("text"); とします。 関数 getstyle(obj, name) { if (window.getComputedStyle) { window.getComputedStyle(obj, null)[name]を返します。 } それ以外 { obj.currentStyle[name]を返します。 } } btn.onclick = 関数(){ ini = 0 とします。 num = setInterval(() => { とします。 tem = parseInt(window.getComputedStyle(cont, null)["width"]); とします。 今 = tem + 26 とします。 (tem >= 260)の場合{ console.log(現在); クリア間隔(数値); 戻る; } cont.style.width = now + "px"; ini = ini + 10; text.innerText = ini + "%"; }, 80); } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: 初心者向けの MySQL のインストール方法 (効果が実証済み)
>>: MySQLデータベースがNULLを可能な限り避ける理由
この記事の例では、WeChatアプレットのシームレスなスクロールを実現するための具体的なコードを参考...
まず関数の自己呼び出しを知る必要がある関数の自己呼び出し - 自己呼び出し関数1 回限りの関数 - ...
目次1. 補足知識ポイント: 関数の暗黙的な変換2. 補足知識: call/apply を使って配列...
1. 説明MySQLでは、テーブル内の行の総数を取得する必要がある場合、通常は次の文を使用します。 ...
目次cloneElementの役割使用シナリオ新しい小道具を追加するプロップを変更するイベントカスタ...
目次1. LAN内のプロキシ2. イントラネットの浸透イントラネット侵入とは何ですか?橋プロキシサー...
目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...
コンセプトMMM (Mysql のマスター マスター レプリケーション マネージャー) は、Perl...
1.MySQLレプリケーションの概念これは、プライマリ データベースの DDL および DML 操作...
1. MacにMySQLデータベースをインストールする1. MySQLデータベースをダウンロードする...
目次序文1. 背景2. シミュレーションテスト3. 結論要約する序文もし私が罠に陥っていなかったら、...
障害に遭遇すると、障害の根本的な原因を考えるのではなく、障害を解決する方法を考えることがよくあります...
1. コマンドの紹介userdel (ユーザー削除) コマンドは、ユーザー アカウントと関連ファイル...
<br />ウェブサイトを科学的にデザインする: アイトラッキング研究から学ぶ 23 の...
HTMLに触れた当初はレイアウトにいつもテーブルを使っていましたが、とても面倒で見た目も悪かったの...