当前位置：
  1. 首页
  2. 互联网
  3. 正文
本文介绍: 这里是制作简易版开心笑笑乐的第三种方法代码如下：&lt;!DOCTYPE html&gt;<html&gt; <head&gt; <meta charset=”utf-8″ /&gt; <title>开心消消乐</title> <script src=”js/jQuery.js“></script> <style> table { /* 调居中偏移 */ widt

这里是制作简易版开心消消乐的方法3

代码如下：


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>开心消消乐</title>
		<script src="js/jQuery.js"></script>
				<style>
					table {
						/* 调居中偏移 */
						width: 986px;
						height: 862px;
						margin: 0 auto;
						padding: 95px 105px 95px 89px;
					}
		
					table td {
						width: 10px;
						height: 10px;
					}
		
					.p {
						/* border: 1px solid #000; */
		
					}
				</style>
			</head>
			<body>
				<!-- 1. table tr td
				 2.把图片放到框里面
				 3.
				 -->
				<table background="img/0.png">
					<tr id="row0">
						<td></td>
						<td class="p"></td>
						<td class="p"></td>
						<td></td>
						<td class="p"></td>
						<td class="p"></td>
						<td></td>
					</tr>
					</tr>
					<tr id="row1">
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
					</tr>
					<tr id="row2">
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
					</tr>
					<tr id="row3">
						<td></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td></td>
					</tr>
					<tr id="row4">
						<td></td>
						<td></td>
						<td class="p"></td>
						<td class="p"></td>
						<td class="p"></td>
						<td></td>
						<td></td>
					</tr>
					<tr id="row5">
						<td></td>
						<td></td>
						<td></td>
						<td class="p"></td>
						<td></td>
						<td></td>
						<td></td>
					</tr>
				</table>
				<script type="text/javascript">
				// 定义一个数组（存放图片地址）
				// 把图片存放的地址全部写下来
				//方便用变量名下标去调用这个图片
				//搜集图片路径放在数组里面
				//利用数组下标获取图片路径
							var arr_pic_path=[
								'img/1.png',
								'img/2.png',
								'img/3.png',
								'img/4.png',
							];
							// 选中所有为p的标签赋值给pp
							//遍历循环
							//console.log
							var pp = $('.p');
							//遍历pp'
							$.each(pp, function(i, n) {	//i代表传递的arr的数组索引，n代表值	
									//console.log(n);
									//js中let和var定义变量的区别
									// let，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。
									// 与var 区别；let不像var那样会发生“变量提升”现象
									// "let声明的范围是块作用域，而var声明的范围是函数作用域"
									//定义一个图片路径下标 获取随机数
									// 用js产生一个随机数，这样我们就可以得到当前随机产生的图片
								let path_index = Math.floor(Math.random() * 4);
								//转换为jquery对象
								//空（）的是取值 （）里面有东西是赋值
								//把n转化为jquery对象，可以用html调用
								let $n=$(n);
								//生成新的对象用<> 创建一个新的img标签
								// 1.Image 对象 
								// Image 对象代表嵌入的图像。 
								// <img> 标签每出现一次，一个 Image 对象就会被创建。 
								// 同理 , 创建一个Image对象，就会生成一个<img>标签
								let $img=$('<img>');
								//前面随机数作为下标
								//attr jquery对象方法
								// 首先取出每个img的src，再给img设置拼接后的路径。
								// jquery中用attr()方法来获取和设置元素属性
								$img.attr('src', arr_pic_path[path_index]);
								//jquery对象有的
								// 通过attr()方法可以方便地获取元素中指定属性名称的内容，
								//并将获取的内容通过html()方法显示在页面中。
								$n.html($img);
							})
						</script>			
							<!-- 
							//想思路：涉及那些知识点 函数
							//定义图片的数组
							//先有想法 想思路
							//数组可以用来干什么 解决什么问题 用在什么场景
							 -->
	</body>
</html>

显示所有内容
上一篇 WordPress子比主题【夜/日】间模式切换小提示[WP教程]
下一篇 已解决Traceback (most recent call last): File “E:\Anaconda3\lib\site-packages\pip_vendor\urllib3\respon

相关文章

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

插入图片
浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。