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 エラーの解決方法の詳細な説明
推薦する
Firefox ブラウザでバックグラウンド ミュージックを再生するための究極のソリューション (Chrome マルチブラウザ対応)
FirefoxでBGMを再生するための推奨コードがテストに合格しました空のコントロールパネルを開いて...
MySql 学習 3 日目: データ テーブル間の接続とクエリの詳細
主キー:キーワード: 主キー機能: null にすることはできず、一意である必要があります。主キーの...
フロントエンドの上級者向けコースでは、JavaScript のストレージ機能の使い方を学習します。
目次序文背景実施計画の考え方js ストレージ機能ソリューション設計やっと要約する序文どの SaaS ...
Centos8 (最小インストール) Python3.8+pip のインストール方法に関するチュートリアル
Python8のインストールを最小化した後、Python3.8.1をインストールしました。オンライン...
Vueコンポーネントの基本のまとめ
コンポーネントの基本1 コンポーネントの再利用コンポーネントは再利用可能な Vue インスタンスです...
CentOS SVN サーバーで複数のプロジェクトを管理する方法
一つの要求一般的に、企業には複数のプロジェクトがあります。SVN サーバーを設定した後は、プロジェク...
CentOS 6.5 に MySQL 5.6 をインストールするチュートリアル
1. Linuxに対応するRPMパッケージをダウンロードする5.6 より前のバージョンhttp://...
Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法
Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...
Docker 経由で CentOS コンテナを作成する手順
目次序文コンテナ間の通信を容易にするためのブリッジネットワークを作成するCentOS7イメージを使用...
純粋な CSS でカスタムラジオボタンとチェックボックス機能を実装する
1. 効果を達成する 2 知識ポイント2.1 <label> タグHTML では、<...
JavaScript の setTimeout と setTimeinterval の使用例の説明
どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...
Linux 編集の開始、停止、再起動の Springboot jar パッケージ スクリプトの例
序文springboot設定ファイルでは、設定ファイルの名前には独自の意味と用途があります。 dev...
ウェブ開発者やデザイナーにとって欠かせないオンラインウェブツールとアプリケーション
これまでの記事で、フロントエンド開発者にとって必須のツール、スクリプト、リソースのコレクションを紹介...
ウェブページ作成時に標準 HTML コードを使用する際のポイント
多くの Web サイト デザイナーが犯す最も一般的な間違いは、Web ページが IE で正常に表示さ...
JS を使用して配列内の要素の存在を 10 分で判断する
序文フロントエンド開発では、配列内に要素が存在するかどうかを判断する必要があることがよくあります。実...