この記事では、プログレスバー効果を実現するための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を可能な限り避ける理由
この記事では、例を使用して、MySQL ストアド プロシージャでの case ステートメントの使用方...
達成される効果:マウスを小さな画像の上に置くと、小さなブロックが小さな画像の上に表示され、この小さな...
最近データベースを学び始めたのですが、とても興味深いコースだと感じていますが、含まれる内容の多くは私...
目次前面に書かれた複数のストレージマウント方法1.バインドマウント2. 巻数3.tmpfsマウントス...
現在シミュレーションしているのは、マスター スレーブ システム (ホスト 1 台とスレーブ 1 台)...
目次背景解決新しい質問高度な背景シャトル ボックスが大量のデータを処理すると、レンダリングされる D...
Vue.js を使用して、クリックしてズームできる 9 グリッドの画像表示モジュールを作成しました。...
この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコー...
目次1 STMP プロトコルに基づいてメールを送信する Node.js メソッド2 MS Excha...
目次1. isPrototypeOf()例 1、オブジェクト クラス インスタンス:例 2: Hum...
この記事の主な内容は次のとおりです。 1. ブラウザのサポート2. 画像3. レスポンシブツール4....
目次1. はじめに2. 本文2.1 単一列のソート2.2 複数の列を並べ替える2.3 ソート方法2....
require メソッドの読み込みルールキャッシュからの読み込みを優先するコアモジュールパス形式のモ...
目次1. Linuxホスト名を設定するクライアントホストを構成するサーバーホストを構成する2. ホス...
この記事では、MySQL 5.7 zipアーカイブ版のインストールチュートリアルを参考までに紹介しま...