Last active
January 4, 2017 04:47
-
-
Save notcome/098e244a6b3ca65d6a726145b4f234f3 to your computer and use it in GitHub Desktop.
Time Battery: show the time left for the current day, in the form of remaining percentage of a battery.
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
| body { | |
| background-color: #1A1A1A; | |
| font-family: -webkit-system-font, sans-serif; | |
| } | |
| main { | |
| width: 300px; | |
| margin-top: calc(40vh - 82px); | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| #battery { | |
| margin: 0; | |
| height: 100px; | |
| width: 100%; | |
| position: relative; | |
| } | |
| #battery-border { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| height: 96px; | |
| width: 288px; | |
| border-radius: 15px; | |
| border: 2px solid #00FF00; | |
| overflow: hidden; | |
| } | |
| #battery-left { | |
| height: 96px; | |
| background-color: #00FF00; | |
| } | |
| #battery-head { | |
| position: absolute; | |
| top: 30px; | |
| left: 294px; | |
| height: 40px; | |
| width: 6px; | |
| border-radius: 0 6px 6px 0; | |
| background-color: #00FF00; | |
| } | |
| #caption { | |
| font-weight: lighter; | |
| color: white; | |
| width: 100%; | |
| text-align: center; | |
| font-size: 32px; | |
| margin: 1em auto 0; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| } | |
| #caption.time #caption-percentage { | |
| display: none; | |
| } | |
| #caption.percentage #caption-time { | |
| display: none; | |
| } |
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
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui"> | |
| <!-- 时间：time；电池：battery。--> | |
| <title>时间电池</title> | |
| <link rel="stylesheet" href="battery.css"> | |
| </head> | |
| <body> | |
| <main id="main"> | |
| <figure id="battery"> | |
| <div id="battery-border"> | |
| <div id="battery-left" style="width: 35%"> | |
| </div> | |
| </div> | |
| <div id="battery-head"> | |
| </div> | |
| </figure> | |
| <!-- 剩余：remain；小时：hour；分：minute。--> | |
| <h1 id="caption" class="percentage"> | |
| <span id="caption-percentage">剩余 35%</span> | |
| <span id="caption-time">剩余 8 小时 24 分</span> | |
| </h1> | |
| </main> | |
| <script> | |
| var main = document.getElementById('main'); | |
| var batteryLeft = document.getElementById('battery-left'); | |
| var caption = document.getElementById('caption'); | |
| var captionPerc = document.getElementById('caption-percentage'); | |
| var captionTime = document.getElementById('caption-time'); | |
| caption.addEventListener('click', function () { | |
| if (caption.className == 'percentage') | |
| caption.className = 'time'; | |
| else | |
| caption.className = 'percentage'; | |
| }); | |
| function nextDay (date) { | |
| var year = date.getFullYear(); | |
| var month = date.getMonth(); | |
| var day = date.getDate(); | |
| // Overflow handled by JS Runtime | |
| return new Date(year, month, day + 1); | |
| } | |
| function printSeconds (seconds) { | |
| function print (num) { | |
| if (num < 10) | |
| return `0${num}`; | |
| else | |
| return `${num}`; | |
| } | |
| var hours = seconds / 3600 | 0; | |
| seconds -= hours * 3600; | |
| var minutes = seconds / 60 | 0; | |
| seconds -= minutes * 60; | |
| //return `${hours} 时 ${minutes} 分` | |
| var content = `${print(hours)}:${print(minutes)}:${print(seconds)}`; | |
| return `<span style="-webkit-font-feature-settings: 'tnum'; font-family: 'SF UI Display'">${content}</span>`; | |
| //return hours + ' 时 ' + minutes + ' 分'; | |
| } | |
| function updateView (percentage, seconds) { | |
| //batteryLeft.style.width = `${percentage}%`; | |
| batteryLeft.style.width = percentage + '%'; | |
| //captionPerc.innerText = `剩余 ${percentage}%`; | |
| captionPerc.innerText = '剩余 ' + percentage + '%'; | |
| //captionTime.innerText = `剩余 ${printSeconds(seconds)}`; | |
| captionTime.innerHTML = '剩余 ' + printSeconds(seconds); | |
| } | |
| function calculate () { | |
| var now = new Date(); | |
| var tomorrow = nextDay(now); | |
| var seconds = (tomorrow - now) / 1000 | 0; | |
| var percentage = seconds / 864 | 0; | |
| updateView(percentage, seconds); | |
| setTimeout(calculate, 1000); | |
| } | |
| calculate(); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment