本文介绍: 这里是制作简易版开心笑笑乐的第三种方法代码如下：<!DOCTYPE html><html> <head> <meta charset=”utf-8″ /> <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>
原文地址:https://blog.csdn.net/m0_57823924/article/details/123544617
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_32620.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
