JS实战练习

最新推荐文章于 2023-11-13 10:11:05 发布

郭郭郭憨憨

最新推荐文章于 2023-11-13 10:11:05 发布

阅读量518

点赞数 3

本文链接：https://blog.csdn.net/qq_59494319/article/details/125435652

版权

JavaScript DOM操作本地存储事件监听尺寸变换

关键词由CSDN通过智能技术生成

每点击一下使方块的宽度增加，当增加到一定宽度时再点击会减少，并储存在本地数据库中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="wrapper"></div>
		<script>
			var sizeChange = document.querySelector("#wrapper");
			sizeChange.style.width = localStorage.getItem("width") || "300px";
			sizeChange.style.height = localStorage.getItem("height") || "300px";
			sizeChange.style.border = localStorage.getItem("border") || "5px solid lightgreen";
			var flag = sizeChange.style.width < '600px' ? true : false;
			sizeChange.onclick = function() {
				if (flag) {
					var num1 = parseInt(sizeChange.style.width) + 30;
					sizeChange.style.width = num1 + "px";
					sizeChange.style.height = num1 + "px";
					localStorage.setItem("width", sizeChange.style.width);
					localStorage.setItem("height", sizeChange.style.height);
					if (num1 >= 600) {
						flag = false;
					}
				} else {
					var num2 = parseInt(sizeChange.style.width) - 30;
					sizeChange.style.width = num2 + "px";
					sizeChange.style.height = num2 + "px";
					localStorage.setItem("width", sizeChange.style.width);
					localStorage.setItem("height", sizeChange.style.height);
					if (num2 <= 300) {
						flag = true;
					}
				}
			}
		</script>
	</body>
</html>