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 のインストールと構成のグラフィック チュートリアル

推薦する

CentOS7 は rpm を使用して MySQL 5.7 をインストールするチュートリアル図

1. 4つのrpmパッケージをダウンロードする mysql-コミュニティクライアント-5.7.26-...

デザイナーはコーディングを学ぶ必要がありますか?

多くの場合、 Web デザインが完成した後でデザイナーの無知が露呈し、批判されることがあります。彼ら...

Dockerはjenkins+mavenコード構築および展開プラットフォームを構築します

目次Docker の基本概念Docker インストール プロセス (Centos6.9)カーネルのア...

JSON.stringify の簡易版の実装とその 6 つの主要機能の詳細な説明

目次序文JSON.stringify の 6 つの機能特集1特集2特集3特集4特集5特集6手動で文字...

Presto をインストールし、Docker で Hive を接続する詳細なプロセス

1. はじめにPresto は、ギガバイトからペタバイトに及ぶデータ ソースに対してインタラクティブ...

JavaScript は自由に移動するウィンドウのマウス制御を実装します

この記事では、フリーウィンドウのマウス制御を実現するためのJavaScriptの具体的なコードを参考...

クロスブラウザ開発体験のまとめ(I)HTMLタグ

ページにDOCTYPEを追加するブラウザによってタグやスタイルシートの解釈が異なるため、さまざまなブ...

CentOS7 systemdにカスタムシステムサービスを追加する方法

システムド: CentOS 7のサービスsystemctlスクリプトは、/usr/lib/syste...

ウォーターフォールフローレイアウトを実装する3つの方法

序文今日、Xianyuを閲覧していたとき、各行の高さが同じではないことに気付きました。調べてみると、...

CSS 標準: vertical-align プロパティ

<br />原文: http://www.mikkolee.com/13私は最近、ver...

ES6スプレッド演算子の使用例

目次スプレッド演算子とレスト演算子とは何ですか?配列スプレッド演算子残り演算子(コレクション関数)ス...

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明

MySQL ストアド プロシージャ、カーソル、トランザクションの例の詳細な説明以下は私が作成した M...

Element-UIの10の驚くべきトリックのまとめ

目次el-scrollbar スクロールバーel-uploadはクリックをシミュレートしますel-s...

Hadoop を使用せずに Linux 環境に Spark のスタンドアロン バージョンをインストールする方法

ビッグデータはますます注目を集めており、ビッグデータのいくつかの構成要素に精通していないと、自慢でき...

MySQL 8.0.18 安定版がリリースされました! 予想通りハッシュ結合が実装されました

MySQL 8.0.18 安定版 (GA) が昨日正式にリリースされ、Hash Join も期待通り...