デジタル時計

実行するとデジタル時計（時間と日付）が表示されます。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>
*/

実行結果

保存

プログラムを保存

表示ページ

直前に実行または一時保存した内容を復元

実行環境

なでしこバージョン

素材

画像・音声・データ

ログインすると素材をアップロードできます。

🍯 プログラム貯蔵庫

プログラム

プログラムを保存

なでしこバージョン

画像・音声・データ