Skip to content

Instantly share code, notes, and snippets.

@notcome
Last active Jan 4, 2017
Embed
What would you like to do?
Time Battery: show the time left for the current day, in the form of remaining percentage of a battery.
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;
}
<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