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 サービスを監視する方法
推薦する
MySQLはSQL文を使用してテーブル名を変更します
MySQL では、SQL ステートメント rename table を使用してテーブル名を変更できま...
子コンポーネントで vue activated を使用する詳細
ページ: ベース: <テンプレート> <div class="タブコンテ...
CentOS での MySQL ログイン 1045 問題を解決する
アプリケーション全体を CentOS にデプロイする必要があるため、当然ながらデータベース操作は不可...
vue3でDOMをマウントするためのプラグインを書く際の問題について
vue2と比較して、vue3にはアプリの概念が追加され、vue3プロジェクトの作成も // メイン....
Linux trコマンドの使い方
01. コマンドの概要tr コマンドは、標準入力からの文字を置換、圧縮、削除できます。ある文字セット...
vue プロジェクトで rem を使用して px を置き換える例
目次道具プラグインをインストールするプロジェクトのルートディレクトリに.postcssrc.jsファ...
MySQLサブクエリでorder byが効かない問題の解決方法
偶然にも、SQL ステートメントを異なる MySQL インスタンスで実行すると、異なる結果が生成され...
Docker を使用した ELK7.3.0 ログ収集サービスの導入に関するベスト プラクティス
最初に書くこの記事では、ELK 7.3.0 の展開についてのみ説明します。展開環境:システムセントO...
Vue3 の emitting と attr の違いの分析
目次結論は実践分析拡張機能要約する結論は親コンポーネントでカスタム イベントが定義されている場合、子...
Dockerレジストリイメージ同期の実装アイデア
はじめに以前は、Docker イメージは Azure のコンテナー レジストリに保存されていました。...
MySQL 8.0.18 のさまざまなバージョンのインストールとインストール中に発生した問題 (要点の要約)
概要: MYSQLの問題解決記録:どのようなインストール方法 (rpm、gz、gz.xz) を使用す...
Linux プロセスが占有するポート番号を表示する 6 つの方法
Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...
Debian システムでの自動パッケージ更新の問題を解決する方法
いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...
圧縮パッケージを使用して Linux 環境に JDK 13 をインストールする方法
JDK とは何ですか?まあ、この質問がわからないのであれば、なぜこれをインストールするのか本当にわか...
閲覧時に作成されたWebページの下部にある余分な空白スペースを削除する方法
Dreamweaver または FrontPage を使用して HTML Web ページを作成する場...