notcome/battery.css

## battery.css
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;
}

## battery.html
<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>
	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>