CSS3&JavaScript 电池充电

举报
福州司马懿 发表于 2021/11/19 01:49:08 2021/11/19
【摘要】 <!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

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。