开心消消乐方法2

Ctrl_CV攻城狮

已于 2022-04-28 14:07:41 修改

阅读量1.1k

点赞数 1

分类专栏：前端基础文章标签： javascript html css

于 2022-03-17 10:40:19 首次发布

本文链接：https://blog.csdn.net/m0_57823924/article/details/123543553

版权

前端基础专栏收录该内容

27 篇文章 2 订阅

订阅专栏

这里是第二种开心消消乐的效果

1.这种方法方便维护

2.刷新一下就可以改变图形的位置

代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
		<style>
			body {
				background-image: url('img/0.png');
				background-repeat: no-repeat;
				background-size: 600px 520px;
			}

			table,
			table * {
				border: 0px;
				width: auto;
				height: auto;
			}

			table {
				display: block;
				margin-top: 54px;
				margin-left: 45px;
			}

			table td {
				width: 64px;
				height: 64px;
				margin: 16px;
				background-repeat: no-repeat;
				background-position: center center;
				background-size:100%;
			}
		</style>
	</head>
	<body>
		<table id="mytable"></table>

		<script type="text/javascript">
			var arr_pic_path = [
				'img/1.png',
				'img/2.png',
				'img/3.png',
				'img/4.png',
			];
        // 定义二维数组 有行有列才不多就是二维数组了
		// 根据想要的心形效果定义数组 
		
			var arr_icon = [
				[1, 2, 4, 5],
				[0, 1, 2, 3, 4, 5, 6],
				[0, 1, 2, 3, 4, 5, 6,],
				[1, 2, 3, 4, 5],
				[2, 3, 4],
				[3,],
				
				
			];

			$(function() {
				//6行，7列
				// 把r改为<arr_icon.length的话，增加var arr_icon = []里面数组的里面的 行，列就有用
				for (let r = 0; r < 6; r++) {
					var $row = $('<tr>');
					for (let c = 0; c < 7; c++) {
						var $cell = $('<td>');
				// 可以去搜索数组indexOf的用法  C代表值

						if (arr_icon[r].indexOf(c) > -1) {
							setIconImag($cell);
						}
						// .append追加  .appentTo
						$row.append($cell);
					}
					$('#mytable').append($row);
				}
			})

			function setIconImag(obj) {
			 let path_index = Math.floor(Math.random() * 4);
				obj.css({
					
					// 
					'background-image': 'url("' + arr_pic_path[path_index] + '")'
				});
			}

			/*
			var pp = $('.p');
			
			$.each(pp, function(i, n) {				
				let path_index = Math.floor(Math.random() * 4);
				let $n=$(n);
				let $img=$('<img>');
				$img.attr('src', arr_pic_path[path_index]);
				$n.html($img);
			})
            */
		</script>
	</body>
</html>

Ctrl_CV攻城狮

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
开心消消乐方法2

这里是第二种开心消消乐的效果1.这种方法方便维护2.刷新一下就可以改变图形的位置代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script&gt
复制链接

扫一扫