プログラミング勉強日記 2021年1月9日 以前、こちらの記事でJavaScriptでの日付と時刻を取得する方法をまとめた。今回は、現在時刻をリアルタイムで表示し続ける方法を紹介する。 方法 現在時刻を格納するDateオブジェクトを作成する 作成したDateオブジェクトから時間・分数・秒数を取り出す 時計として表示する文字列を作成する 文字列を時間に書きかえる 1秒ごとに特定の処理を実行する 1. 現在時刻を格納するDateオブジェクトを作成する方法 以下のようにnew Date()で現在の日付・時刻する。 var nowDate = new Date(); console.log(nowDate); コンソール結果 Sun Sep 27 2020 09:22:20 GMT+0900 (日本標準時) 2. 作成したDateオブジェクトから時間・分数・秒数を取り出す方法 let nowTime = new Date(); // 現在日時を得る let nowHour = nowTime.getHours(); // 時間を抜き出す let nowMin = nowTime.getMinutes(); // 分数を抜き出す let nowSec = nowTime.getSeconds(); // 秒数を抜き出す 3. 時計として表示する文字列を作成する方法 let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec; 4. 文字列を時間に書きかえる方法 document.getElementById("id名").innerHTML = msg; 5. 1秒ごとに特定の処理を実行する方法 etIntervalメソッドを使う。(詳しくは後日Qiitaに乗せようと思う) // 第1引数は指定時間後に自動実行される関数 // 第2引数はミリ秒で指定時間を設定する(1000=1秒) setInterval('関数名',1000); サンプルコード 以上を踏まえてできたコードがこちら。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> </style> <script> function showClock() { let nowTime = new Date(); let nowHour = nowTime.getHours(); let nowMin = nowTime.getMinutes(); let nowSec = nowTime.getSeconds(); let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec; document.getElementById("realtime").innerHTML = msg; } setInterval('showClock()',1000); </script> </head> <body> <p id="realtime"></p> </body> </html> 実行結果 23:7:35よりは23:07:35の方が見やすく、デジタル時計としては常に2桁で表示させたい。そのコードを紹介する。 常に2桁で表示するコード <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> </style> <script> function twoDigit(num) { let ret; if( num < 10 ) ret = "0" + num; else ret = num; return ret; } function showClock() { let nowTime = new Date(); let nowHour = twoDigit( nowTime.getHours() ); let nowMin = twoDigit( nowTime.getMinutes() ); let nowSec = twoDigit( nowTime.getSeconds() ); let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec; document.getElementById("realtime").innerHTML = msg; } setInterval('showClock()',1000); </script> </head> <body> <p id="realtime"></p> </body> </html> 実行結果
2021年1月9日 以前、こちらの記事でJavaScriptでの日付と時刻を取得する方法をまとめた。今回は、現在時刻をリアルタイムで表示し続ける方法を紹介する。
以下のようにnew Date()で現在の日付・時刻する。
new Date()
var nowDate = new Date(); console.log(nowDate);
Sun Sep 27 2020 09:22:20 GMT+0900 (日本標準時)
let nowTime = new Date(); // 現在日時を得る let nowHour = nowTime.getHours(); // 時間を抜き出す let nowMin = nowTime.getMinutes(); // 分数を抜き出す let nowSec = nowTime.getSeconds(); // 秒数を抜き出す
let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec;
document.getElementById("id名").innerHTML = msg;
etIntervalメソッドを使う。(詳しくは後日Qiitaに乗せようと思う)
// 第1引数は指定時間後に自動実行される関数 // 第2引数はミリ秒で指定時間を設定する(1000=1秒) setInterval('関数名',1000);
以上を踏まえてできたコードがこちら。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> </style> <script> function showClock() { let nowTime = new Date(); let nowHour = nowTime.getHours(); let nowMin = nowTime.getMinutes(); let nowSec = nowTime.getSeconds(); let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec; document.getElementById("realtime").innerHTML = msg; } setInterval('showClock()',1000); </script> </head> <body> <p id="realtime"></p> </body> </html>
実行結果
23:7:35よりは23:07:35の方が見やすく、デジタル時計としては常に2桁で表示させたい。そのコードを紹介する。
23:7:35
23:07:35
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>sample</title> <style> </style> <script> function twoDigit(num) { let ret; if( num < 10 ) ret = "0" + num; else ret = num; return ret; } function showClock() { let nowTime = new Date(); let nowHour = twoDigit( nowTime.getHours() ); let nowMin = twoDigit( nowTime.getMinutes() ); let nowSec = twoDigit( nowTime.getSeconds() ); let msg = "現在時刻：" + nowHour + ":" + nowMin + ":" + nowSec; document.getElementById("realtime").innerHTML = msg; } setInterval('showClock()',1000); </script> </head> <body> <p id="realtime"></p> </body> </html>
どうも7noteです。hover時にだけCSSを当てる方法。 CSSは.cssファイルに書くか、<style></style>の中に書くのが一般的ですが、HTMLのタグの中に書くことも可能です。 index.html <!-- HTMLのタグに直接CSSを書く方法 --> <div style="background:#CCF;">てすとてすと</div> しかし、この方法には欠点があり:hoverなどの疑似セレクタがついた時のCSSを指定することができません。 （※ほかにも管理がしにくいなどの欠点もあります。） ですが、onMouseOutとonMouseOverの属性を使うことで:hoverと同じようにCSSを反映することができます！ hover時のCSSをhtmlのタグに直接書く方法 index.html <div style="background:#CCF;" onMouseOut="this.style.background='#CCF';" onMouseOver="this.style.background='#EEF'">てすとてすと</div> 結果 このようにボタンの上にカーソルが乗った時に色が変わります。 文字色も変えたい！複数処理をするときはセミコロン（;）で繋ぐ。 index.html <div style="background:#CCF;" onMouseOut="this.style.background='#CCF';this.style.color='#000';" onMouseOver="this.style.background='#EEF';this.style.color='#F00';">てすとてすと</div> 結果 またjavascriptで関数を動かすこともできるので以下のような書き方でも同じ処理をすることが可能です。 index.html <div id="hover-btn" style="background:#CCF;" onMouseOut="omOut();" onMouseOver="omOver();">てすとてすと</div> <script> function omOut(){ document.getElementById('hover-btn').style.background='#CCF'; document.getElementById('hover-btn').style.color='#000'; } function omOver(){ document.getElementById('hover-btn').style.background='#EEF'; document.getElementById('hover-btn').style.color='#F00'; } </script> 同じ結果になりました。 まとめ htmlだけやjsを使って:hoverの代わりの処理を入れることはできますが、可能なのであればやはりCSSファイルでちゃんと:hoverとかける方が作りやすいし管理もしやすいですね。 でもどうしてもhtmlのタグしかかけないときに使える技です！ 困ったときに使えるTipsでした。 参考：https://teratail.com/questions/151338 おそまつ！ ~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
CSSは.cssファイルに書くか、<style></style>の中に書くのが一般的ですが、HTMLのタグの中に書くことも可能です。
<style></style>
<!-- HTMLのタグに直接CSSを書く方法 --> <div style="background:#CCF;">てすとてすと</div>
しかし、この方法には欠点があり:hoverなどの疑似セレクタがついた時のCSSを指定することができません。 （※ほかにも管理がしにくいなどの欠点もあります。）
ですが、onMouseOutとonMouseOverの属性を使うことで:hoverと同じようにCSSを反映することができます！
<div style="background:#CCF;" onMouseOut="this.style.background='#CCF';" onMouseOver="this.style.background='#EEF'">てすとてすと</div>
結果
このようにボタンの上にカーソルが乗った時に色が変わります。
<div style="background:#CCF;" onMouseOut="this.style.background='#CCF';this.style.color='#000';" onMouseOver="this.style.background='#EEF';this.style.color='#F00';">てすとてすと</div>
またjavascriptで関数を動かすこともできるので以下のような書き方でも同じ処理をすることが可能です。
<div id="hover-btn" style="background:#CCF;" onMouseOut="omOut();" onMouseOver="omOver();">てすとてすと</div> <script> function omOut(){ document.getElementById('hover-btn').style.background='#CCF'; document.getElementById('hover-btn').style.color='#000'; } function omOver(){ document.getElementById('hover-btn').style.background='#EEF'; document.getElementById('hover-btn').style.color='#F00'; } </script>
同じ結果になりました。
htmlだけやjsを使って:hoverの代わりの処理を入れることはできますが、可能なのであればやはりCSSファイルでちゃんと:hoverとかける方が作りやすいし管理もしやすいですね。 でもどうしてもhtmlのタグしかかけないときに使える技です！
困ったときに使えるTipsでした。
参考：https://teratail.com/questions/151338
~ Qiitaで毎日投稿中!! ~ 【初心者向け】WEB制作のちょいテク詰め合わせ
普段HTMLとかを書いているときによく便利な拡張機能をまとめました。 Auto Rename Tag 対応したタグを自動で修正してくれる。 開始タグ、終了タグどちらを変更しても修正してくれる。 とても楽。 Bracket Pair Colorizer 開始タグと終了タグの色を合わせてくる。 意外とこれのおかげで閉じ忘れに気づける。 助かる。 Highlight Matching Tag 開始と終了の関係になってるタグをハイライトしてくれる。 閉じ忘れによるミスが大幅に減った。 助かる。 DartJS Sass Compiler and Sass Watcher Sassファイルを保存した段階でコンパイルしてくれる。 とても楽。 Path Autocomplete pathの候補を出してくれる。 いちいちディレクトリ見直して構造とか名前確認する必要がなくなった。 楽。 番外 Japanese Language Pack for Visual Studio Code 日本人だもの。
普段HTMLとかを書いているときによく便利な拡張機能をまとめました。
対応したタグを自動で修正してくれる。 開始タグ、終了タグどちらを変更しても修正してくれる。 とても楽。
開始タグと終了タグの色を合わせてくる。 意外とこれのおかげで閉じ忘れに気づける。 助かる。
開始と終了の関係になってるタグをハイライトしてくれる。 閉じ忘れによるミスが大幅に減った。 助かる。
Sassファイルを保存した段階でコンパイルしてくれる。 とても楽。
pathの候補を出してくれる。 いちいちディレクトリ見直して構造とか名前確認する必要がなくなった。 楽。
Japanese Language Pack for Visual Studio Code 日本人だもの。
