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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mac OS 10.11 での MySQL 5.7.12 のインストールと設定のチュートリアル
>>: jconsole を使用してリモート Tomcat サービスを監視する方法
推薦する
Linux 3.X/4.x/5.x でパゴダ パネルのパスワードを忘れた場合の解決方法
ssh に入り、次のコマンドを入力してパスワードをリセットします (コマンドの末尾の「testpas...
Dockerイメージの読み込み原理
目次Docker イメージ鏡とは何ですか？ Dockerイメージの読み込み原理コミットミラーDock...
Vueはログインジャンプを実装する
この記事では、ログインジャンプを実装するためのVueの具体的なコードを例として紹介します。具体的な内...
CSS3 の transition、transform、translate の違いと機能の簡単な分析
変換して翻訳するTransform は、変換と変形を意味します。他の幅属性や高さ属性と同様に、CSS...
MySQLがウィンドウ関数で合計関数を実行するときに発生する可能性のあるバグ
MySql のウィンドウ関数を使用して統計データを収集する際に、小さな問題が見つかったので、それにつ...
Dockerデータボリューム操作の実装
データボリュームの使用開始先ほどのケースでは、ホストからコンテナにデータをコピーする必要がある場合、...
MySQL 5.7 zip版（zip版）のインストールと設定手順の詳細
はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...
nginx がアップストリーム アドレスにジャンプしない問題の解決方法
序文今日、nginx で非常に奇妙な問題に遭遇しました。フロントエンドの tomcat がページにジ...
MySQL における exists、in、any の基本的な使い方
【1】存在するループを使用して外部テーブルを 1 つずつクエリし、各クエリの存在する条件ステートメン...
2018 年にリリースされる Apache Spark 2.4 の新機能は何ですか?
この記事は、2018 年 9 月 19 日に Adobe Systems Inc で開催された ...
Linux で Tomcat を実行するいくつかの方法の説明
Linux での Tomcat の起動とシャットダウンLinux システムでは、コマンド操作を使用し...
MySQL プロンプト「通信パケットの読み取り中にタイムアウトになりました」の解決方法
エラーメッセージ:ユーザー: 'root' ホスト: `localhost'...
Linux での MongoDB のインストールと設定のチュートリアル
MongoDBインストールYumを使用してインストールすることを選択する1. repoファイルを作成...
シームレスなトークンリフレッシュを実現する方法
目次1. 需要方法1方法2方法3 2. 実装3. 問題解決質問1: トークンの複数回の更新を防ぐ方法...
Dockerビルドキットを使用して、Raspberry Piで使用できるDockerイメージを構築します。
Dockerのインストール カール -fsSL https://get.docker.com -o...