js を使用してウォーターフォール効果を実現する
|
この記事の例では、滝の流れの効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。
ソースコード:
<!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>
<スタイル>
* {
マージン: 0;
パディング: 0;
ボックスのサイズ: 境界線ボックス;
}
。箱 {
幅: 70ピクセル;
フロート: 左;
左マージン: 4px;
上境界線: 1px 実線 #000;
}
ウル、
オール、
li {
リストスタイルタイプ: なし;
}
li {
幅: 70ピクセル;
表示: ブロック;
テキスト配置: 中央;
}
</スタイル>
</head>
<本文>
<ul class="box"></ul>
<ul class="box"></ul>
<ul class="box"></ul>
<ul class="box"></ul>
<button onclick="reloadPage()">ページを更新</button>
</本文>
</html>
<スクリプト>
var ボックス = document.querySelectorAll(".box");
//最小値を作成します var min = 0;
//カラー配列を作成する var colour = ["red", "yellow", "orange", "blue", "purple", "green", "#cdee", "#feda", "ccc", "#eda", "#639", "#33f", "#f38", "#ca0"]
(j = 1; j <= 50; j++) の場合 {
var lis = document.createElement("li"); // 数字を含む li を作成する
lis.innerHTML = j;
lis.style.height = Math.random() * 40 + 30 + "px"; // ランダムな高さを取得します。最小の高さは 30px です。
lis.style.backgroundColor = colour[parseInt(Math.random() * colour.length-1)]; //ランダムな色を取得する for (var i = 0; i < boxes.length; i++) {
console.log(boxs[i].clientHeight);
// offsetHeightは要素の高さの数値を取得します。if (boxs[i].offsetHeight < boxs[min].offsetHeight) {
min = i; // 高さが最小の配列要素のシーケンス番号を取得します}
}
box[min].appendChild(lis) // 最短のolにliを追加する}
関数 reloadPage() {
location.reload(); // 更新}
</スクリプト>以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Tomcat の 404 エラーの解決方法の詳細な説明
推薦する
JavaScript オブジェクト (詳細)
目次JavaScript オブジェクト1. 定義2. オブジェクトの分類3. オブジェクトを定義する...
Vue から React への変換入門ガイド
目次デザインコンポーネント通信ライフサイクルイベント処理品格とスタイルクラススタイル条件付きレンダリ...
ページングクリックコントロールを実装するネイティブJS
これは、ネイティブJSを使用してページングクリックコントロールを実装する必要がある面接の質問です。参...
JavaScriptでマクロを使用する方法
言語では、DSL を実装するためにマクロがよく使用されます。マクロを使用すると、開発者は JSX 構...
mysql-joinsの具体的な使用方法
目次結合構文: 1. InnerJOIN: (内部結合) 2. LeftJOIN: (左結合) 3....
MySQL IDは1から増加し始め、不連続IDの問題を素早く解決します
mysql idは1から始まり、不連続なidの問題を解決するために自動的に増加します。強迫性障害の私...
WeChat パブリック アカウントの録音ファイルを再生して保存します (amr ファイルを mp3 に変換)
目次オーディオトランスコーディングツール原理JAVE プロジェクトの問題このプロジェクトの特徴拡張機...
W3Cチュートリアル（1）：W3Cを理解する
1994 年に設立された組織である W3C は、共通プロトコルの開発を促進し、それらの相互運用性を確...
Vueはシンプルなマーキー効果を実装します
この記事では、Vueの具体的なコードを共有して、シンプルなマーキー効果を実現しています。具体的な内容...
テーブルタグ（TAGS）の詳細な紹介
テーブルの基本構文<table>...</table> - テーブルを定義し...
JavaScript の手ぶれ補正とスロットリングの詳細な説明
目次デバウンススロットル要約するデバウンス定義: スクロール イベントなど、短時間に連続してトリガー...
ウェブデザイナー職の面接でよくある質問と回答
1. ASP.NET Web アプリケーションのテンプレートとは何ですか? それらの違いは何ですか?...
Linux ファイルディレクトリ管理コマンドの概要
タッチコマンドこれには 2 つの機能があります。1 つは、既存のファイルの時間タグを現在のシステム時...
JS で列挙をシミュレートする方法
序文現在の JavaScript には列挙の概念がありません。一部のシナリオでは、列挙を使用するとデ...
React のグローバル状態管理の 3 つの基本メカニズムの調査
目次序文小道具コンテクスト州要約する序文最新のフロントエンド フレームワークはすべて、コンポーネント...