html-黑白点击变色

最新推荐文章于 2023-01-27 17:20:05 发布

前端路上取经人

最新推荐文章于 2023-01-27 17:20:05 发布

阅读量491

点赞数

分类专栏：测试文章标签： html css3 css javascript

本文链接：https://blog.csdn.net/weixin_43889418/article/details/122389442

版权

测试专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>黑白块</title>
	<style type="text/css">
		.div1{
			width:500px;
			height:500px;
			background:red;
		}
		.div2{
			width:98px;
			height:98px;
			border:1px solid #fff;
			float: left
		}
		.black{
			width:98px;
			height:98px;
			border:1px solid #fff;
			float: left;
			background:#000;
		}
		.white{
			width:98px;
			height:98px;
			border:1px solid #000;
			float: left;
			background:#fff;
		}

	</style>
</head>
<body>
	<div id="div1" class="div1">
	</div>
	<script type="text/javascript">
		var div11 = document.getElementById("div1")
		for(let y = 0;y<5;y++){
			for(let x = 0;x<5;x++){
				let div2 = document.createElement("div")
				div2.id = y+""+ x
				div2.className = "black"
				div2.addEventListener("click",function(e){
					let eId = e.target || e.currentTarget

					cAA(eId)

					classN(eId)
				})
				div11.appendChild(div2)
			}

		}
		function cAA(vid){

			let top = parseInt(vid.id)-10
			let bottom = parseInt(vid.id)+10
			let left = parseInt(vid.id)-1
			let right = parseInt(vid.id)+1
			if(top>=0){
				top = top<5? "0"+top:top
				classN(document.getElementById(top))
			}
			if(bottom<45){
				classN(document.getElementById(bottom))
			}
			if((left>=0 && left<4)||(left>9 && left<14)||(left>19 && left<24)||(left>29 && left<34)||(left>39 && left<44)){

				left = left>=0 && left<10 ? "0"+left : left
				classN(document.getElementById(left))
			}
			if((right>0 && right<5)||(right>10 && right<15)||(right>20 && right<25)||(right>30 && right<35)||(right>40 && right<45)){

				right = right>0 && right<10 ? "0"+right : right
				classN(document.getElementById(right))
			}

			//console.log(right)
		}

		function classN(id){
			if(id.className == "black"){
				id.className = "white"
			}else if(id.className == "white"){
				id.className = "black"
			}
		}
	</script>
</body>
</html>

前端路上取经人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-黑白点击变色

<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>黑白块</title> <style type="text/css"> .div1{ width:500px; height:500px; background:red; } .di
复制链接

扫一扫