Last active
December 12, 2022 07:20
-
-
Save mouseos/551d90dfd8556c9cbfd7b951c52d286b to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" href="https://indestructibletype.com/fonts/Jost.css" type="text/css" charset="utf-8" /> | |
| </head> | |
| <body> | |
| <div id="clock"> | |
| <span id="hours">00</span> | |
| <span id="colon">:</span> | |
| <span id="minutes">00</span> | |
| </div> | |
| <script type="module"> | |
| function updateClock() { | |
| // 現在の日時を取得します | |
| var currentTime = new Date(); | |
| // 時間を取得します | |
| var hours = currentTime.getHours(); | |
| if(hours>=12){ | |
| hours-=12; | |
| } | |
| // 分を取得します | |
| var minutes = currentTime.getMinutes(); | |
| if (minutes < 10) { | |
| minutes = "0" + minutes; | |
| } | |
| let hours_elem=document.getElementById("hours"); | |
| let minutes_elem=document.getElementById("minutes"); | |
| if (hours < 10) { | |
| hours_elem.style.textIndent = "1em"; | |
| }else{ | |
| hours_elem.style.textIndent = "0em"; | |
| } | |
| hours_elem.innerHTML = hours; | |
| minutes_elem.innerHTML = minutes; | |
| } | |
| // 1秒ごとに時計を更新します | |
| setInterval(updateClock, 1000); | |
| </script> | |
| <style> | |
| span{ | |
| font-family: 'Jost', sans-serif; | |
| font-size: 100px; | |
| -webkit-text-stroke:5px black; | |
| color:white; | |
| font-weight: 500; | |
| } | |
| #colon{ | |
| vertical-align:5%; | |
| } | |
| </style> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment