▶ 実 行
▶ 実行
クリア
デジタル時計
by くれあ
#デジタル時計 #日時処理 #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要素をセンタリングする3つの方法 https://webwork-plus.com/content/design/center-span.html 一番単純な方法は、「display:block」と「text-align: center;」の2つだけを使う方法です。 「display」は要素の表示形式を指定します。 ・The Colour Clock http://thecolourclock.com/ ・デカ時計(Big Clock) https://kujirahand.com/web-tools/Clock.php ・設定項目の控え 余白:「10px」、高さ:「5px」 ・およそ80px=1cmです。 ・デジタル時計・大 ホワイト/型番:MJ‐DCLW1 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> */