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 サービスを監視する方法
推薦する
RHEL8 で静的 IP アドレスを設定するさまざまな方法の簡単な分析
Linux サーバーで作業している場合、ネットワーク カード/イーサネット カードに静的 IP アド...
CSS3 ボタン境界アニメーションの実装
まず効果を見てみましょう: html <a href="#"> &l...
Centos7 から Centos8 へのアップグレードに関するチュートリアル (画像とテキスト付き)
正式な環境でアップグレードする場合は、データと重要な設定をバックアップしてください。アップグレードに...
選択ドロップダウンボックスの値をIDに渡してコードを実装する方法
完全なコードは次のとおりです。 HTMLコード:コードをコピーコードは次のとおりです。 <!-...
nginx で HSTS を有効にしてブラウザを HTTPS アクセスにリダイレクトする方法の詳細な説明
前回の記事では、https を使用したローカルノードサービスアクセスを実装しました。前回の記事の効果...
HTMLとリソースがどのように読み込まれるかを理解します
このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。...
メニューのホバー効果を実現するCSS3
結果： html <nav id="nav-1"> <a cl...
Linux でプロセスを効果的に管理するための 8 つのコマンド
序文プロセス管理の役割:サーバーの健全性状態を判定する: プロセスの状態 (メモリ、CPU 占有率な...
MongoDBのパフォーマンスを向上させる方法
MongoDB は高性能なデータベースですが、使用していくうちにパフォーマンスの問題が発生することが...
Linuxカーネルで中国語の文字を出力する方法
次のように、Windows/MacOS からログインした Linux の SSH ターミナルで簡単に...
雨滴効果を実現する JavaScript キャンバス
この記事では、雨滴効果を実現するためのJavaScriptキャンバスの具体的なコードを参考までに紹介...
Hadoop 3.2.0 クラスターの構築に関する一般的な考慮事項
1つのポートの変更バージョン 3.2.0 では、ネームノード ページ ポートは 9870、データノー...
html、xhtml、xmlの違い
開発動向: html (ハイパーテキスト マークアップ言語) - xhtml (拡張ハイパーテキスト...
CSS で美しい時計アニメーション効果を実装するためのサンプルコード
仕事を探しています!!!事前準備:まず、このアニメーションは、以前のローディングアニメーションとクー...
VPSサーバーでよく使われるパフォーマンステストスクリプトの概要
これは、VPS サーバー用の一般的なワンクリック パフォーマンス テスト スクリプトです。マシンの構...