参考までに、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> 要約: この方法は比較的簡単で、エラーが発生しにくいです。ボタンをバインドすることで、対応するライトスイッチの画像を直接取得できます。 実行結果: 関連する方法:
方法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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Linux/Mac に MySQL をインストールするときにパスワードを忘れた場合の解決策
>>: Ubuntu 16.04 64 ビット版の VMware Tools のインストールと構成のグラフィック チュートリアル
一部の Web ページは大きく見えなくても開くのに非常に時間がかかる場合があります。一方、他の We...
私たちの日常的な開発作業では、テキストのオーバーフロー、切り捨て、省略は、考慮する必要がある非常に一...
この機能を実装するにあたり、本家ブロガーさんから拝借した方法では色の切り替えが実現できず、長い間考え...
目次1. appIDの申請と設定1. appidの取得方法2. AppIDの設定2. 基本的なユーザ...
序文馬を書いていたとき、水平方向と垂直方向の中央揃えの方法について、誰もあまり知らなかったと思います...
目次序文🌟 1. APIの紹介2. 複数のデータソースの監視3. リスニングアレイ4. 監視対象5....
目次1. 基本概念1.1 2種類のピクセル1.2 3つのビューポート2. ビューポート設定3. 1回...
目次序文Lua スクリプトnignx.conf の設定Dockerfileの設定序文データベースやそ...
目次概要データ URL の使用を開始するデータURL構文複数言語の文字列のBase64エンコードとデ...
GTIDベースのレプリケーション導入GTID ベースのレプリケーションは、MySQL 5.6 以降に...
Nginxのproxy_cacheを使用してキャッシュサーバーを構築する1: ngx_cache_...
目次プレゼンテーション層ビジネスレイヤーコアプラグイン xlsx ExcelインポートExcelエク...
<br />原文: http://andymao.com/andy/post/80.ht...
Vueでは、ローカルコンポーネントを自分で定義(登録)することができます。コンポーネント名を定義する...
目次CentOS7をインストールする静的IPの設定viを使用してファイルを編集するCentOS7をイ...