STUDY_html_004_E.html
<html> <meta charset="utf-8"> <link> リンク <div class="電池"> <div id="充電"></div> <span id="分量"></span> </div> <script> すくりぷと </script> </html>
<link rel="stylesheet"href="STUDY_html_004_E.css">
<script>
var 充電=document.getElementById("充電");
var 満タン=充電.style;
var 分量=document.getElementById("分量");
navigator.getBattery().then(function(電池){function 補充せよ(){給油場所();}
補充せよ();
電池.addEventListener('levelchange',
function(){setInterval(function(){給油場所()},1000);});
function 給油場所(){var numBattery=電池.level*98;
分量.textContent=Math.ceil(numBattery)+"%まで充電";
満タン.height=numBattery+"%";};});
</script>
body{margin:0;
padding:0;
background:black;
height:100vh;
width:100vw;}
.電池{width:50%;
height:50%;
top:25%;
left:25%;
position:absolute;
border-radius:0px 0px 10px 10px;
background:red;}
.電池:after{content:"";
display:block;
width:50%;
height:30px;
background:#00aaff;
position:absolute;
top:-30px;
left:25%;
border-radius:5px 5px 0 0;}
.電池 #充電{width:100%;
height:0%;
background:chartreuse;
border-radius:0 0 10px 10px;
position:absolute;
bottom:0px;
transition:all 6s;
overflow:hidden;}
.電池 #分量{display block;
width:30%;
height:15%;
background:gold;
position:relative;
top:25%;
left:25%;
border-radius:50%;
color:black;
text-align:center;
padding:15px;
font-size:30px;}
sample_STUDY_html_004_E.pdf 
/ STUDY_html_004_E.css 
サンプル・ダウンロード 
