シンプルな広告ウィンドウを実現するjs

シンプルな広告ウィンドウを実現するjs

この記事では、参考までに、シンプルな広告ウィンドウを実装するためのjsの具体的なコードを紹介します。具体的な内容は次のとおりです。

1. 目的

jsを使用して、閉じることができない単純な広告ウィンドウ機能を実装します

2. 実装手順

1. 小さいウィンドウのスタイルを設定します。

2. 左上隅の X のイベ​​ントを JavaScript でバインドし、クリックはできるがオフにできず、指定された範囲内でランダムに移動するようにします。

3. 20 回のクリック後にウィンドウが自動的に消えるように設定します (回数は変更できます)。

3. コードモジュール

1.css部分

<スタイル>
        。箱 {
            幅: 180ピクセル;
            高さ: 180ピクセル;
            背景: #f0f0f0;
            位置: 絶対;
        }
 
        .X {
            幅: 30ピクセル;
            高さ: 30px;
            背景: #eaeaea;
            色: 耐火レンガ;
            テキスト配置: 中央;
            行の高さ: 30px;
        }
</スタイル>

2.html部分

<div class="box">
        <div class="X">X</div>
</div>

3.js部分

<スクリプト>
        //ノードを取得します。let boxObj = document.querySelector('.box');
        xObj = document.querySelector('.X'); とします。
 
        //ボックスの位置を取得します。let boxLeft = boxObj.offsetLeft;
        boxTop を boxObj.offsetTop とします。
        // バインドX
 
        xObj.onclick = clickFn;
        xObj.onmouseover = overFn;
 
        //マウスを動かして手の形に変更するfunction overFn() {
            xObj.style.cursor = 'ポインタ';
        }
        num=0 とします。
        //マウスがXをクリックすると、ウィンドウはキャンセルされずに別のランダムな位置にジャンプします。 function clickFn() {
            boxObj.style.left = boxLeft + rand(1, 1000) + 'px';
            boxObj.style.top = boxTop + rand(1, 500) + 'px';
            数値++;
            if(数値==20){
                boxObj.style.display='なし';
            }
        }
        //乱数関数 rand(min, max) {
            Math.round(Math.random() * (max - min) + min) を返します。
        }
</スクリプト>

4. レンダリング

オリジナルスタイル:

クリック後:


以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS 右下隅広告ウィンドウコード (縮小、拡大、閉じることができます)
  • JSはフローティングモバイルウィンドウ(フローティング広告)の特殊効果を実現します

<<:  データベースのインデックス作成に関する知識ポイントのまとめ。必要な情報はすべてここにあります。

>>:  Zabbix モニタリング 4.4 から 5.0 にアップグレードするための詳細なチュートリアル

推薦する

jsのディープコピーを理解しましょう

目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....

Vueスロットの実装原理についての簡単な説明

目次1. サンプルコード2. 現象を通して本質を見抜く3. 実施原則4. 親コンポーネントのコンパイ...

MySQL 5.7 で業務を停止せずに従来のレプリケーションを GTID レプリケーションに変更する例

GTID の利点により、従来のファイル POS ベースのレプリケーションを GTID ベースのレプリ...

Nodejs モジュール システムのソースコード分析

目次概要CommonJS 仕様Node の CommonJS 仕様の実装モジュールのエクスポートとイ...

bashコマンドの使い方の詳細な説明

Linux では、基本的に vi エディタのように「.sh」拡張子を持つテキストの処理と実行を記述す...

3次元画像配置効果を実現する純粋なCSSのサンプルコード

1. 要素の幅/高さ/パディング/マージンのパーセンテージ基準要素の幅/高さ/パディング/マージンの...

vue3 のさまざまなファイルタイプのプレビュー機能の例

目次序文1. オフィス文書の種類のプレビュー2. PDF形式のプレビュー3. 画像の種類4. ビデオ...

MySQL エンコーディング utf8 および utf8mb4 utf8mb4_unicode_ci および utf8mb4_general_ci

参考: MySQL 文字セットの概要utf8mb4 は MySQL 8.0 のデフォルトの文字セット...

MySQL の JSON 挿入の問題

MySQL 5.7.8 以降では、JSON テキストでデータを効率的に取得できるネイティブ JSON...

HTMLフォーム要素の詳しい解説(パート2)

HTML 入力属性値属性value 属性は、入力フィールドの初期値を指定します。 <フォーム...

MYSQL 5.6 スレーブレプリケーションの展開と監視

MYSQL 5.6 スレーブレプリケーションの展開と監視MYSQL 5.6 のインストールと展開 #...

初心者向けウェブサイト構築チュートリアル: 10 日間でウェブサイトの構築方法を学ぶ

10 日間のチュートリアルでは、最も理解しやすい言語を使用し、最も基本的なことから始めて、誰もが W...

Vue3 における ref と reactive の詳細な説明と拡張

目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...

UbuntuはPythonスクリプトのサンプルコードを定期的に実行する

オリジナルリンク: https://vien.tech/article/157序文この記事では、Ub...