CSS3&JavaScript 电池充电
【摘要】
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<head>
<style>...
<!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 + content
scrollWidth(Height): 1*border + 2*padding + content
clientWidth(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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
- 131
- 132
- 133
文章来源: blog.csdn.net，作者：福州-司马懿，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/chy555chy/article/details/83507871
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）