Created
August 16, 2024 12:44
-
-
Save seieric/205c135bc8ed3f30bf5fdc2bf9caa49f 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 lang="ja"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>LIFE TIMER</title> | |
| </head> | |
| <body> | |
| <div> | |
| <h1>Life Timer</h1> | |
| <!-- setup panel --> | |
| <div id="setup"> | |
| <p>誕生日を入力してください。</p> | |
| <input type="date" id="dateOfBirthInput" /> | |
| <button onclick="setup()">Setup Timer</button> | |
| </div> | |
| <!-- main panel --> | |
| <div id="main" style="display: none;"> | |
| <p>あなたの人生の残り時間</p> | |
| <div> | |
| <ul style="list-style: none; padding: 0;"> | |
| <li><span id="timeLeft"></span></li> | |
| <li><span id="timeLeftPercentage"></span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const LIFE_TIME = 80; | |
| const setupPanel = document.getElementById('setup'); | |
| const mainPanel = document.getElementById('main'); | |
| let dateOfBirth = null; | |
| window.onload = init(); | |
| // 誕生日を入力したときに実行される関数 | |
| function setup(){ | |
| const dateOfBirthInput = document.getElementById('dateOfBirthInput'); | |
| dateOfBirth = new Date(dateOfBirthInput.value); | |
| localStorage.setItem('dateOfBirth', dateOfBirth); | |
| displayTimer(); | |
| } | |
| // タイマーを表示する関数 | |
| function displayTimer(){ | |
| setupPanel.style.display = 'none'; | |
| mainPanel.style.display = 'block'; | |
| setInterval(updateTimer, 100); | |
| } | |
| // タイマーを更新する関数 | |
| function updateTimer(){ | |
| dateOfDie = new Date(dateOfBirth.getTime() + LIFE_TIME * 365 * 24 * 60 * 60 * 1000); | |
| timeLeft = Math.floor((dateOfDie - new Date()) / 1000) / 60 / 60 / 24 / 365; | |
| const timeLeftSpan = document.getElementById('timeLeft'); | |
| timeLeftSpan.innerText = timeLeft + "年"; | |
| const timeLeftPercentageSpan = document.getElementById('timeLeftPercentage'); | |
| timeLeftPercentageSpan.innerText = `${(timeLeft / LIFE_TIME) * 100}%`; | |
| } | |
| // ページが読み込まれたときに実行される関数 | |
| function init(){ | |
| dateOfBirth = localStorage.getItem('dateOfBirth'); | |
| if(dateOfBirth){ | |
| dateOfBirth = new Date(dateOfBirth); | |
| displayTimer(); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment