jsで照明スイッチを制御する

jsで照明スイッチを制御する

参考までに、jsを使用して照明スイッチを制御します。具体的な内容は次のとおりです。

トピック:

js で照明スイッチを制御する

分析:

電球要素を取得し、クリックイベントをバインドし、マウスをクリックして電球をオン/オフにします。

実施方法:

方法1:

画像要素を取得し、クリックイベントをボタンにバインドしてライトスイッチを制御します。

<!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>
</head>
<本文>
    <img src="./img/关.gif" alt="">
    <button id="open">ライトを点灯する</button>
    <button id="close">ライトを消す</button>
</本文>
<スクリプト>
    var open = document.getElementById("open");
    var close = document.getElementById("close");
    var img = document.getElementsByTagName("img")[0];
    open.onclick=関数(){
        img.src="./img/开.gif"
    }
    close.onclick=関数(){
        img.src="./img/关.gif"
    }
</スクリプト>
</html>

要約: この方法は比較的簡単で、エラーが発生しにくいです。ボタンをバインドすることで、対応するライトスイッチの画像を直接取得できます。

実行結果:

関連する方法:

  • document.getElementById(): ID名で対応する要素を取得します。
  • document.getElementsByTagName(): 要素名で対応する要素を取得し、取得したオブジェクトは配列のようなオブジェクトです。
  • onclick: マウスクリックによってトリガーされるクリックイベント

方法2:

画像要素を取得し、スイッチイベントを画像に直接バインドします。

<!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>
</head>
<本文>
    <img src="./img/关.gif" alt="">
</本文>
<スクリプト>
    var img = document.getElementsByTagName("img")[0];
    var フラグ = false;
    img.onclick=関数(){
        if(フラグ){
            img.src="./img/关.gif";
            フラグ=false;
        }それ以外{
            img.src="./img/开.gif";
            フラグ=true;
        }
    }
</スクリプト>
</html>

注:このメソッドでは、ライトの初期状態を決定するためのフラグが必要です。クリック イベントを画像に直接バインドする場合は、フラグの初期値が false であることに注意してください。

実行結果: 電球をクリックすると、ライトの明るさと暗さが切り替わります。

関連画像:

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

以下もご興味があるかもしれません:
  • jsでライトスイッチの効果を実現
  • ライトスイッチの小さな例の JavaScript 実装

<<:  Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策

>>:  Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル

推薦する

Linux LVM 論理ボリューム構成プロセス (作成、増加、削減、削除、アンインストール) の詳細な説明

Linux LVM論理ボリューム構成プロセスの詳細な説明多くの Linux ユーザーは、オペレーティ...

スタイルを書く際の背景色宣言の重要性

タイトルの通り、ページを修正すると以下のような状況が発生する可能性があります。現在、古いページを改修...

vuexプロジェクトにおけるログインステータス管理の実践プロセス

目次道具:ログインシナリオ:練習する:シナリオ1: 思考と実践シナリオ2: 思考と実践要約する道具:...

TypeScript 列挙型

目次1. 概要2. デジタル列挙2.1 逆マッピング3. 文字列の列挙4. const列挙5. まと...

Apache Tomcat と IDEA エディターの統合に関する詳細なチュートリアル

1. Apache Tomcat 公式サイトから Tomcat 圧縮パッケージをダウンロードします。...

Reactフックとzarmコンポーネントライブラリ構成に基づいてh5フォームページを開発するためのサンプルコード

最近、React Hooks を zarm コンポーネント ライブラリと組み合わせて使用​​し、js...

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

画像比較を実現するjQueryプラグイン

この記事の例では、画像比較を実現するためのjQueryプラグインの具体的なコードを参考までに共有して...

MySQL 8.0.19 のインストールと設定方法のグラフィックチュートリアル

この記事は、参考のためにMySQL 8.0.19のインストールと設定のグラフィックチュートリアルを記...

docker --privileged=true パラメータの役割についての簡単な説明

バージョン 0.6 あたりで、Docker に privileged が導入されました。このパラメー...

HTML テーブルの使い方 (Web ページの視覚効果を表示する)

NetEase Blog で HTML を使用する場合、テンプレートに直接コードを追加できることは...

JavaScript フォーム検証の例

HTML フォームは、名前、電子メール アドレス、場所、年齢などのユーザー情報を収集するためによく使...

Linux のファイル権限とグループ変更コマンドの詳細な説明

Linux では、すべてがファイルであり (ディレクトリもファイルです)、各ファイルにはユーザーに対...

ウェブデザイナーは適した人材

<br />この世に道はない。より多くの人が歩くようになると、それは道になります。最初は...

Vueのコンポーネントのprops属性について詳しく説明します

目次質問1: 小道具は具体的にどのように使用されますか?原理は何ですか?下を見る質問 2: 年齢に ...