デジタル時計 📖

実行するとデジタル時計（時間と日付）が表示されます。Googleフォントにより、おしゃれに仕上げました。刻々と色が変わります。#卓上時計 #デジタル時計なでしこ #ブラウザ時計 #日時処理 #DOM操作 #Googleフォント #JS実行

プログラム: (→大)
#デジタル時計 #日時処理 #DOM操作 #2021/03/05 ＃表示に必要な情報を設定する：日数、曜日名、時刻 /*日数を設定して、余分な0を消す*/日数は(今日の2文字右部分)×1です。 曜日名は今日の曜日です。 /*時刻設定*/今を「:」で区切ります。時数に「{それ[0]}」を代入して、分数に「{それ[1]}」を代入して、秒数に「{それ[2]}」を代入します。 時間表示内容は「{時数}:{分数}:{秒数}」です。 日付表示内容は「{今年}年 {今月}月{日数}日 {曜日名}曜日」です。 ＃────────────────────────────────────────────────────────────── ＃文字の視覚効果を設定する：フォント、文字色、文字サイズ /*フォントを設定する*/DOM親要素に『<link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@300;400;700&display=swap" rel="stylesheet">』をHTML設定します。 フォントは「'M PLUS Rounded 1c', sans-serif」です。 文字色は「{(255×時数/24を整数変換)と(255×分数/60を整数変換)と(255×秒数/60を整数変換)のRGB}」です。透明度は0.6です。 表示幅に「document.documentElement.clientWidth」をJS実行して代入します。 時間文字サイズは「{表示幅÷(時間表示内容の文字数)×1.2を整数変換}px」です。 日付文字サイズは「{表示幅÷(日付表示内容の文字数)×0.6を整数変換}px」です。 ＃────────────────────────────────────────────────────────────── ＃時間と今日の日付を表示する 時間ラベル＝時間表示内容のラベル作成します。改行作成します。 日付ラベル＝日付表示内容のラベル作成します。 時間ラベルに｛ /*フォント*/「font-family」：フォント、文字サイズ：時間文字サイズ、色：文字色、「opacity」：透明度、 /*配置*/「行揃え」：「中央」、/*字下げ*/「text-indent」：「0px」、/*要素の前後を改行*/「display」:「block」、 /*背景*/高さ：時間文字サイズ、背景色：「なし」、/*角の丸み*/「border-radius」：「16px」、 /*余白*//*余白(上)*/「padding-top」：時間文字サイズ、/*行間*/「line-height」：時間文字サイズ、 /*最前面*/「重なり」：1｝をDOMスタイル一括設定します。 日付ラベルに｛ /*フォント*/「font-family」：フォント、文字サイズ：日付文字サイズ、色：文字色、「opacity」：「{透明度×2/3}」、 /*段落*/「行揃え」:「中央」、「display」:「block」、高さ：「0px」、 /*余白*//*余白(下)*/「padding-bottom」：時間文字サイズ、 /*最前面*/「重なり」：2｝をDOMスタイル一括設定します。 ＃────────────────────────────────────────────────────────────── ＃ボタンの設定 ボタン影設定に「0px 8px 8px 0px {銀色}」を代入します。 ボタン詳細設定に｛ /*フォント*/「font-family」：フォント、文字サイズ：「24px」、/*太字*/「font-weight」:「bold」、色：文字色、「opacity」：「{透明度×2/3}」、 /*段落*/「行揃え」:「右」、/*Display*/ボックス表示：「block」、///*ボタンのサイズ。表示位置ではない*/高さ：「0px」、 /*ボタンの書式*/余白：「{0.3×60}px」/*(縦px 横px) */、背景色：白色、/*角の丸み*/「border-radius」：「100vh」、/*影*/「box-shadow」：ボタン影設定、/*枠線の太さ*/「border-width」：/*細い*/「thin」、/*枠線の色*/「border-color」：銀色｝を代入します。 ボタンもどし設定に｛/*影*/「box-shadow」:ボタン影設定、背景色：白色｝を代入します。 ＃ボタンの設定：押した後 /*薄い灰色をつくる*/濃さに「{255×0.95}」を代入して薄い灰色に「rgba({濃さ},{濃さ},{濃さ},0.5)」を代入します。 /*影をしぼる*/ボタン押し設定に｛「box-shadow」:「0px 2px 4px 0px {銀色}」、背景色：薄い灰色｝を代入します。 /*ボタンを作成する*/ボタンに/*表示名*/「□」のボタン作成を代入して、ボタンにボタン詳細設定をDOMスタイル一括設定します。 ＃────────────────────────────────────────────────────────────── ＃日時を更新する 1/60秒毎には 　/*時刻設定*/今を「:」で区切ります。時数に「{それ[0]}」を代入して、分数に「{それ[1]}」を代入して、秒数に「{それ[2]}」を代入します。 　時間ラベルに「{時数}:{分数}:{秒数}」をテキスト設定します。 　日付ラベルに「{今年}年 {今月}月{日数}日 {曜日名}曜日」をテキスト設定します。 　文字色は「{(時数/24×255を整数変換)と(分数/60×255を整数変換)と(秒数/60×255を整数変換)のRGB}」です。 　時間ラベルに｛色：文字色｝をDOMスタイル一括設定します。 　日付ラベルに｛色：文字色｝をDOMスタイル一括設定します。 　ボタンに｛色：文字色｝をDOMスタイル一括設定します。 ここまで。 ＃────────────────────────────────────────────────────────────── ＃全画面で表示する機能 ＃2021/05/31 ＃クリック 全画面状態は0。 ボタンをマウス押した時には 　ボタンにボタン押し設定をDOMスタイル一括設定します。 　//「{時間ラベル}.requestFullscreen()」をJS実行します。 　全画面状態で条件分岐 　　0ならば、/*全画面あり*/「document.documentElement.requestFullscreen();」をJS実行して、全画面状態は1です。ここまで。 　　1ならば、/*全画面なし*/「document.documentElement.exitFullscreen();」をJS実行して、全画面状態は0です。ここまで。 　　※注記：全画面解除が動作しません。 　ここまで。 ここまで。 ボタンをマウス離した時には 　ボタンにボタンもどし設定をDOMスタイル一括設定してここまで。 ＃タッチ ボタンをタッチ開始した時には 　ボタンにボタン押し設定をDOMスタイル一括設定します。ここまで。 ボタンをタッチ終了した時には 　ボタンにボタンもどし設定をDOMスタイル一括設定してここまで。 ＃────────────────────────────────────────────────────────────── /*メモ ・今日は「YYYY/MM/DD」形式、今は「HH:MM:SS」形式で返されます。 ・Googleフォント 　https://fonts.google.com ・ラベル作成では、Textの値を持つSpan要素のラベルが作成されます。 　https://nadesi.com/v3/doc/index.php?plugin_browser%2F%E3%83%A9%E3%83%99%E3%83%AB%E4%BD%9C%E6%88%90&show ・Span要素をセンタリングする３つの方法 　https://webwork-plus.com/content/design/center-span.html 　一番単純な方法は、「display:block」と「text-align: center;」の２つだけを使う方法です。 　「display」は要素の表示形式を指定します。 ・The Colour Clock 　http://thecolourclock.com/ ・デカ時計(Big Clock) 　https://kujirahand.com/web-tools/Clock.php ・設定項目の控え 　余白：「10px」、高さ：「5px」 ・およそ80px=1cmです。 ・デジタル時計・大 ホワイト／型番：ＭＪ‐ＤＣＬＷ１ 　https://www.muji.com/jp/ja/store/cmdty/detail/4547315831975 ・2021/03/08、文字色変更機能を追加しました。The Colour Clockを参考にしました。 ・画面サイズを取得 　https://nadesi.com/v3/storage//id.php?205 ・2021/03/08、文字サイズをブラウザの表示幅から指定するように変更しました。 　これにより、ブラウザを小さくした場合、再び実行することにより見切れた字の大きさが再調整されます。 ・余白の設定方法 　http://open.shonan.bunkyo.ac.jp/~ohtan/kouza/css-margin.html ・モダンで見やすい時計です。刻々と色が変わります。卓上時計として使えます。 ・検索結果に日付を表示する：<time>2021-05-28</time> */