CSS3JavaScript 电池充电

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<style>
body {padding: 1em;
}
/* 这是一种CSS3定义变量的写法 */
:root {--battery-width: 5em;--battery-height: 10em;--battery-border-width: 1em;--battery-border-color: black;
}
.battery {width: var(--battery-width);height: var(--battery-height);border: var(--battery-border-width) solid var(--battery-border-color);padding: calc(var(--battery-border-width) / 2);margin-top: var(--battery-border-width);position:relative;/* 对于linear-gradient来说，如果临近两个颜色的百分比相同，可以制作出斑马线的效果，而不是渐变 */background-image: linear-gradient(0deg, white 15%, black 15%);background-repeat: repeat-y;background-size: 100% 20%;background-clip: content-box; /* 将背景限定在内容区域 */box-sizing: content-box;transform: rotate(0deg);display: inline-block;
}
/* 伪元素（Pseudo-elements）*/
.battery::before {content: '';width: calc(2 * var(--battery-border-width));height: var(--battery-border-width);background-color: var(--battery-border-color);position: absolute;top: calc(-2 * var(--battery-border-width));left: calc(50% - var(--battery-border-width));
}
/* 伪元素的原始大小和父元素的内容区域一样 */
.battery::after {content: '';width: calc(100% - var(--battery-border-width));height: calc(100% - var(--battery-border-width));position: absolute;background-color: white;/*CSS3的动画有一个问题，就是如果重复播放，那么到达最后一帧时会立马切到第一帧（或某个值如果再加会达到上限，则返回初始值），导致最后一帧不显示解决方法就是在终止状态前复制一份终止状态。*/animation: battery-change 2s steps(5) infinite alternate;animation-play-state: paused;
}
@keyframes battery-change {from {height: calc(100% - var(--battery-border-width));}80% {height: 0px;}to {height: 0px;}
}
</style>
<style id="batteryStyle"></style>
<script>
window.onload = ()=> {const battery = document.getElementById("battery");// 伪元素不是一个实际存在于DOM的元素，因此只能用getComputedStyle拿到其计算后的属性，并且只能获取不能更改const batteryAfter = window.getComputedStyle(battery, "::after");//getPropertyValue拿到的值有可能会带转化后的单位px，这样是不能直接参与运算的const batteryHeight = parseInt(batteryAfter.getPropertyValue("height"));const batterySteps = 5;const batteryStepPercent = 100 / batterySteps;const batteryStepHeight = batteryHeight / batterySteps;const batteryTmpValue = 100 * batteryStepHeight / batteryHeight;/*状态切换的方法有：(1)动态切换class(2)CSSStyleSheet.insertRule()和deleteRule(3)使用现有的style标签，通过!import来使值生效*/const batteryStyle = document.getElementById("batteryStyle");/*offsetWidth(Height): 2*border + 2*padding + contentscrollWidth(Height): 1*border + 2*padding + contentclientWidth(Height): 0*border + 2*padding + content*/console.log(battery.offsetHeight, battery.scrollHeight, battery.clientHeight);window.setBattery = (value) => {value = 100 - value;//level这里要跟前面css的step相对应const currentHeight = parseInt(value / batteryTmpValue) * batteryStepHeight;batteryStyle.innerText = ".battery::after{height: " + currentHeight + "px !important; animation-play-state: paused;}";}let batteryIntervalId;window.batteryCharging = (type) => {switch(type) {case 'css':if(batteryIntervalId != undefined) {clearInterval(batteryIntervalId);batteryIntervalId = undefined;}batteryStyle.innerText = ".battery::after{animation-play-state: running !important;}";break;case 'js':let value = 0;if(batteryIntervalId == undefined) {//充电batteryIntervalId = setInterval(()=> {setBattery(value, type);value += batteryStepPercent;if(value > 100) {value = 0;}}, 300);}break;}        }
}
</script>
</head><body>
<div id="battery" class="battery"></div>
<button onclick="batteryCharging('css')">CSS3动画</button>
<button onclick="batteryCharging('js')">JS动画</button>
</body>
</html>

CSS3JavaScript 电池充电相关推荐

iphone电池怎么保养_苹果iPhone手机怎么开启【优化电池充电】
iPhone 的电池健康曾在 2018 年成为一个热门话题,此前苹果被发现悄悄地限制降低电池寿命的 iOS 设备的运行性能,尽可能延长电池的使用寿命. Apple 通过发布 iOS 11 的软件更新回 ...
【解答】一个电动模型，每一组电池能让其行驶8分钟，一个充电器能同时给两组电池充电，一组充满需要15分钟，至少准备（？）组电池，（？）个充电器，可以让模型每次行驶完可以立即换电池行驶不用等待。
阿里2015年实习生题目: 一个电动模型,每一组电池能让其行驶8分钟,一个充电器能同时给两组电池充电,一组充满需要15分钟,至少准备(?)组电池,(?)个充电器,可以让模型每次行驶完可以立即换电池行驶 ...
最大功率点跟踪_ADI公司推出集成最大功率点跟踪和I2C的80V降压升压电池充电控制器...
中国,北京 – Analog Devices, Inc. (ADI),今日宣布推出LT8491降压-升压电池充电控制器,该控制器具有最大功率点跟踪(MPPT).温度补偿和I2C接口等特性,适用于遥测和 ...
ibm笔记本电脑电池_笔记本电池怎么充电笔记本电脑电池充电方法【详解】
笔记本电脑以其精致小巧的外形.方便携带的特点,受到了众多人士的喜爱.在办公室没有完成的工作,可以随时带到家中去完成,它的存在就是为了我们能有便捷的办公模式.那么对于这个日夜陪伴我们的好物件大家都是 ...
色差仪软件的安装和电池充电
现在的色差仪都是用标准的色彩信息分析和功能拓展类软件,目的就是色差仪的使用和分析更加完美.不同公司生产的色差仪和色彩管理软件大多数都是不通用的,只有软件开发商公司生产的色差仪才能一起使用.所以当顾客购 ...
联想电脑计算机怎么设置十进制,如何在win10系统中设置电池充电阈值
在使用win10系统的过程中,我们经常需要为win10系统设置电池充电阈值设置方法. 我一定遇到了需要为win10系统设置电池充电阈值的情况,那么应该如何设置win10?该系统设置电池充电阈值的操作方 ...
Ubuntu系统电池管理软件TLP（Thinkpad设置电池充电阈值）
Ubuntu系统电池管理软件TLP(Thinkpad设置电池充电阈值) 说明最近给手里的Thinkpad x200s安装了Unbuntu系统,为了优化电池管理,延长电池寿命,考虑安装电池管理软件(虽 ...
PMOS双电源供电隔离电路（USB接入为电池充电电池断开供电）
项目需求最近的一个项目上需要加入外部USB电源接入时为电池充电与此同时电池电源保持断开(USB电压为5V 锂电池电压为4.2V以内) 因此需要在电池供电通路添加自动断开电路方案设计寻找资料之后 ...
电池充电IC市场现状研究分析与发展前景预测报告
2021-2027中国电池充电IC市场现状研究分析与发展前景预测报告 2021年中国电池充电IC市场销售收入达到了万元,预计2028年可以达到万元,2022-2028期间年复合增长率(CAGR)为 ...

CSS3JavaScript 电池充电

CSS3JavaScript 电池充电相关推荐

最新文章

热门文章