jsでライトスイッチの効果を実現

jsでライトスイッチの効果を実現

この記事の例では、ライトスイッチ効果を実現するためのjsの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

js の学習を通じて、照明スイッチをシミュレートする小さなケースを完成させましょう。

まず、このケースを分析してみましょう。プロセスは次のとおりです。

1. 画像のプロパティを取得する

2. クリックイベントをバインドする

3. クリックすると画像が切り替わる

1. ボタンでライトのオン/オフを切り替える

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
</head>
<本文>
<img src="imgs/on.gif" alt="" id="img"> <br><!--画像-->
<input type="button" id="bt1" value="on" onclick="f1()"><!--ボタン-->
<button id="bt2" onclick="f2()">閉じる</button>
</本文>
<スクリプト>
function f1(){//開く let bt1=document.getElementById("bt1");//ボタンIDを取得する
 let img=document.getElementById("img"); //画像IDを取得する
 img.src="imgs/on.gif"; //画像を変更する}
function f2(){//閉じる let bt2=document.getElementById("bt2");
 img = document.getElementById("img"); とします。
 画像を拡大
}
</スクリプト>
</html>

実行結果:

2. クリックしてライトをオン/オフにします

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
</head>
<本文>
<img src="imgs/off.gif" alt="" id="img"> <br>
</本文>
<スクリプト>
 img = document.getElementById("img"); とします。
 クリックすると拡大表示されます
 フラグを false にします。
 関数f(){
 if (フラグ==true){
  画像を拡大
  フラグ=false;
 }それ以外 {
  画像を拡大
  フラグ=true;
 }
 }
</スクリプト>
</html>

簡略版（三項演算子を使用）

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
 <メタ文字セット="UTF-8">
 <title>タイトル</title>
</head>
<本文>
<img src="imgs/on.gif" 高さ="180" 幅="109" id="img" onclick="f()">
</本文>
<スクリプト>
 img = document.getElementById("img"); とします。
 i=0 とします。
 関数f(){
 img.src='imgs/'+(++i%2==0?'off':'on')+'.gif';
 }
</スクリプト>
</html>

運用結果

クリックしてライトをオン/オフにします

電球材質:

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

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

<<:  Mac OS 10.11 での MySQL 5.7.12 のインストールと設定のチュートリアル

>>:  jconsole を使用してリモート Tomcat サービスを監視する方法

推薦する

MySQL8 ベースの docker-compose デプロイメント プロジェクトの実装

1. まず、次のパスに従って対応するフォルダを作成します。 ローカルのdockerでmysqlを実行...

ウェブデザインのためのオンライン開発ツール10選の紹介

1. オンラインテキストジェネレーターBlindTextGenerator: デザイナーにとって、こ...

数千万データを持つMySQLテーブルを最適化する実践記録

序文まずここで説明させてください。インターネット上では、Alibaba では 500 万のデータを異...

MySQL でレプリケーション フィルターを動的に変更する方法

MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...

Vueの7つの値転送メソッドの詳細な説明

1. 父から息子へ子コンポーネントにpropsフィールドを定義し、その型は配列です (フィールド値の...

Apache、Tomcat、Nginx サーバーの詳細な理解と比較分析

質問1件会社のサーバーはApacheを使用しており、バックエンドはPHP、サーバーはLinux C/...

テーブルレイアウトの長所と短所、そして推奨されない理由

テーブルの欠点1. テーブルは他の HTML タグよりも多くのバイトを占有します。 (ダウンロード時...

16 の XHTML1.0 と HTML の互換性ガイドラインの概要

1.ページを XML タイプとして宣言しないでください。ページでは UTF-8 または UTF-16...

Webアプリケーションにおけるコンテキストパスの設定の詳細な説明

URL: http://hostname.com/contextPath/servletPath/p...

Nginx で https をアップグレードする方法

購入証明書Alibaba CloudのCloud Shield証明書サービスから購入できます。証明書...

相対幅を使用してテーブルのサイズを変更する際の問題

<tr> <th width="12%">あああ<...

MYSQLの主キー制約とユニーク制約の違いについて簡単に説明します。

目次主キー制約ユニーク制約主キー制約PRIMARY KRY 主キーは一意です。テーブルには主キーを ...

nginx サーバーでの 502 不正なゲートウェイ エラーの原因のトラブルシューティング

パブリックアカウントのファンデータを同期してバッチプッシュするときに、サーバーがエラー502を報告し...

CentOS7 で ethereum/Ethereum を最初からインストールする

目次序文sudo書き込み権限を追加するgit 2.9.0をインストールopenssl 1.1.1l ...

docker公式mysqlイメージのカスタム構成の詳細な説明

インストール時間を節約するために、公式の mysql docker イメージを使用して mysql ...