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 エラーの解決方法の詳細な説明
推薦する
win10 での mysql5.7.21 の詳細なインストール手順
この記事では、MySQL 5.7.21のインストールとインストール中に発生した問題を参考までに紹介し...
VueのRender関数
目次1. ノード、ツリー、仮想DOM 2. 仮想DOM 2.1 データオブジェクトの詳細2.2 制約...
Linux オペレーティング システムでよく使用される MySQL コマンドの概要
以下に、一般的な MySQL コマンドをいくつか示します。 -- データベース サービスを開始します...
Mysql テーブル、列、データベースの追加、削除、変更、クエリの問題の概要
以下は私がまとめた基本的なSQL知識です。主に参考資料として、また将来の他の初心者の助けとして、私自...
JavaScriptの強力な演算子をいくつか見てみましょう
目次序文1. ヌル合体演算子2. ??= 空代入演算子3. ?. オプション連鎖演算子4. ?: 三...
Vueのv-onパラメータの問題についてお話しましょう
Vue での v-on:clock の使用現在、vue.js フレームワークを学習しています。後で参...
RHCEはApacheをインストールし、ブラウザでIPにアクセスします
1. at は、5 時間後にルート ディレクトリの at_test ファイルに「これは at タスク...
CentOS8 システムをベースにした Gitlab を構築するために Docker を使用する詳細なチュートリアル
目次1. Dockerをインストールする2. GitLabをインストールする3. GitLabを初期...
Linuxにおけるselinuxの基本設定チュートリアルの詳細な説明
selinux ( Security-Enhanced Linux)は、Linux カーネル モジュ...
Vueデータ監視の原理の詳細な説明
<本文> <div id="ルート"> <h1&...
Tomcatの動作原理を分析する
SpringBoot は巨大な Python のようで、ゆっくりと私たちの周りを巻きつき、麻痺させま...
CSS3を使用してテキストの垂直配置を実現する方法
最近のプロジェクトでは、テキストを垂直に揃えたいと考え、CSS の writing-mode プロパ...
nginxとlvsのメリットとデメリット、そして適切な使用環境
まず最初に、ロード バランシングとは何かについて説明します。ロード バランシングとは、リクエストの内...
スクロールラグの問題を解決するためのオーバーフロースクロールの詳細な説明
序文div またはモジュールに overflow: scroll 属性を使用すると、iOS フォンで...
MySQL における悲観的ロックと楽観的ロック
リレーショナル データベースでは、悲観的ロックと楽観的ロックがリソース同時実行シナリオのソリューショ...