WEB02_Day01(中)-jQery常见特效（续）、植物大战僵尸、轮播图

一、jQuery常见特效(续)

1.1 员工新增表格

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>jQuery实现表格的操作</title>
 </head>
 <body>
     <input type="text" placeholder="员工姓名">
     <input type="text" placeholder="员工工资">
     <input type="text" placeholder="员工部门">
     <input type="button" value="添加">
     <hr>
     <table>
         <tr>
             <th>姓名</th>
             <th>工资</th>
             <th>部门</th>
             <th>操作</th>
         </tr>
     </table>
     
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         //按钮动态绑定事件 $("input:last")
         $("input[type='button']").click(function () {
             //alert("真棒生效了！！！");
             //1.获取用户在三个输入框中输入的内容
             var name = $("input:eq(0)").val();
             var sal = $("input:eq(1)").val();
             var dept = $("input:eq(2)").val();
 ​
             console.log(name + " " +sal + " " +dept);
 ​
             //2.创建1个tr和4个td标签对象
             var trObj = $("<tr></tr>")
             var tdName = $("<td></td>");
             var tdSal = $("<td></td>");
             var tdDept = $("<td></td>");
             var tdDel = $("<td><input type='button' value='删除'></td>")
 ​
             //3.将接收到的输入信息添加到前三个td对象文本中
             tdName.text(name);
             tdSal.text(sal);
             tdDept.text(dept);
 ​
             //4.将4个td标签添加到tr中
             trObj.append(tdName);
             trObj.append(tdSal);
             trObj.append(tdDept);
             trObj.append(tdDel);
 ​
             //5.将tr对象添加到table表格的最后方
             $("table").append(trObj);
 ​
             //6.给按钮绑定删除事件
             tdDel.children().click(function () {
                 trObj.remove();
             });
 ​
         });
     </script>
 </body>
 </html>

1.2 多选框的控制

　　jQuery1.6以后，新添加了一个方法prop()，官方解释为在获取当前匹配的元素集中，会进行获取第一个元素的属性值。当使用attr()方法获取checked的属性值时返回的是"checked"和"",如果使用propfa()方法则属性的值统一会返回true或者false。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>jQuery操作复选框</title>
 </head>
 <body>
     <input type="checkbox">篮球<br>
     <input type="checkbox">足球<br>
     <input type="checkbox">棒球<br>
     <input type="checkbox">乒乓球<br>
     <input type="button" value="全选">
     <input type="button" value="清空">
     <input type="button" value="反选">
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         //全选按钮
         $("input:eq(4)").click(function () {
             
             //alert('全选按钮');
             //$(":checkbox").attr("checked","checked");
             //$(":checkbox").attr("checked",true);
             $(":checkbox").prop("checked",true);
             console.log($(":checkbox").attr('checked'));
             console.log($(":checkbox").prop('checked'));
         });
         //清空按钮
         $("input:eq(5)").click(function () {
             //alert('清空按钮');
             //$(":checkbox").attr("checked",false);
             //$(":checkbox").removeAttr("checked");
             $(":checkbox").prop("checked",false);
         });
         //反选按钮
         $("input:eq(6)").click(function () {
             //alert('反选按钮');
             //方案一：遍历所有的复选框，查看每个复选框的属性值是选中还是未选中
             $(":checkbox").each(function () {
                 //this表示当前的复选框对象
                 if ( $(this).prop("checked")) {
                     //选中状态->未选中状态
                     $(this).prop("checked",false);
                 } else {
                     $(this).prop("checked",true);
                 }
                
             });
 ​
         });
     </script>
 </body>
 </html>

1.3 购物车商品价格计算

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>jQuery实现对订单金额进行操作</title>
 </head>
 <body>
     <h2>订单列表</h2>
     <input type="checkbox" value="20">鼠标20元<br>
     <input type="checkbox" value="80">键盘80元<br>
     <input type="checkbox" value="5000">华为手机5000元<br>
     <input type="checkbox" value="2000">小米电视2000元<br>
     <input type="checkbox" id="all">全选
     <p>总价：0元</p>
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         //所有复选框进行绑定事件获取选中时的价格
         $(":checkbox").click(function () {
             /*当全选按钮选中以后是可以触发该事件的，
              *获取全选按钮的当前状态，
              *将全选按钮选中的状态给其他复选框的状态进行更改
              */
             //alert(this.id == 'all');
             if (this.id == 'all') {
                 var b = $(this).prop("checked");
                 $(":checkbox").prop("checked",b);
             }
             //alert('绑定成功');
 ​
             var total = 0;//商品总价格
             var count = 0;//商品数量
             //遍历所有的复选框(除去全选)，查看它们的状态
             $(":checkbox:not(#all)").each(function () {
                 //如果是选中状态获取value值
                 if ($(this).prop("checked")) {
                     count++;
 ​
                     var price = $(this).val();
                     //对选中商品进行价格累计
                     total += price*1;
                     
                 }
             });
             //获取复选框的个数
             var num = $(":checkbox").size()-1;
            
             //设置全选当上面商品都选中的情况下进行勾选，反着则不勾选
             $("#all").prop("checked",(count==num?true:false));
 ​
             //设置p标签的文本内容
             $("p").text("总价：" + total + "元");
         })
     </script>
 </body>
 </html>

二、植物大战僵尸

2.1 版本一：

　　将背景图片添加到页面中，并且设置背景图片的显示随着浏览器的可见范围进行调整，然后添加定时器，每间隔2秒钟生成一个僵尸对象。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>打僵尸_生成僵尸01</title>
     <style type="text/css">
         /* 设置背景图片 */
         body {
             background-image: url("../zombimgs/bg1.jpg");
         }
 ​
         /* 设置僵尸图片的样式,僵尸在页面任意位置显示，所以使用绝对定位 */
         img {
             position: absolute;
             width: 60px;
             height: 60px;
         }
 ​
     </style>
 </head>
 <body>
     
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         /* 
         1.获取浏览器的可见范围宽高,设置背景图片的大小和浏览器的大小是一致的
         js获取宽度：window.document.documentElement.clientWidth
         js获取高度：window.document.documentElement.clientHeight
          */
         var w = $(window).width();
         var h = $(window).height();
         $("body").css("background-size",w + "px " + h + "px");
 ​
         /* 2.在浏览器大小发生改变时，调整图片的尺寸大小 */
         onresize = function () {
             var w = $(window).width();
             var h = $(window).height();
             console.log("浏览器可见范围的宽度为:" + w + ",高度为：" + h);
             /* 将浏览器的可见宽度和高度赋值给背景图片作为尺寸大小 */
             $("body").css("background-size",w + "px " + h + "px");
             
         }
         /* 3.生成僵尸 2000毫秒出现一个僵尸*/
         var timer = setInterval(function () {
             //创建图片对象
             var imgObj = $("<img src='../zombimgs/zomb0.png'>");
             //设置僵尸出场的位置
             var left = w - 800;
             var top = parseInt(Math.random()*(h-60));
             imgObj.css("left",left + "px").css("top",top + "px");
             //给页面添加僵尸图片元素
             $("body").append(imgObj);
 ​
         },2000);
 ​
        
     </script>
     
 </body>
 </html>

注意：

通过jQuery设置background-size样式时，需要设置宽和高，这两个数值之间需要有空格间隔

2.2 版本二：

　　设置僵尸出场的位置在图片右侧，然后修改浏览器因生成僵尸对象后下面出现滑动条，添加僵尸移动的定时器对象，每100毫秒移动一次，一次移动4px

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>打僵尸_僵尸移动02</title>
     <style type="text/css">
         /* 设置背景图片 */
         body {
             background-image: url("../zombimgs/bg1.jpg");
 ​
             /* 隐藏浏览器的滑动条 */
             overflow: hidden;
         }
 ​
         /* 设置僵尸图片的样式,僵尸在页面任意位置显示，所以使用绝对定位 */
         img {
             position: absolute;
             width: 60px;
             height: 60px;
         }
 ​
     </style>
 </head>
 <body>
     
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         /* 
         1.获取浏览器的可见范围宽高,设置背景图片的大小和浏览器的大小是一致的
         js获取宽度：window.document.documentElement.clientWidth
         js获取高度：window.document.documentElement.clientHeight
          */
         var w = $(window).width();
         var h = $(window).height();
         $("body").css("background-size",w + "px " + h + "px");
 ​
         /* 2.在浏览器大小发生改变时，调整图片的尺寸大小 */
         onresize = function () {
             var w = $(window).width();
             var h = $(window).height();
             console.log("浏览器可见范围的宽度为:" + w + ",高度为：" + h);
             /* 将浏览器的可见宽度和高度赋值给背景图片作为尺寸大小 */
             $("body").css("background-size",w+"px " + h+"px");
            
         }
         /* 3.生成僵尸 2000毫秒出现一个僵尸*/
         var timer = setInterval(function () {
             //创建图片对象
             var imgObj = $("<img src='../zombimgs/zomb0.png'>");
             //设置僵尸出场的位置
             var left = w;
             var top = parseInt(Math.random()*(h-60));
             imgObj.css("left",left + "px").css("top",top + "px");
             //给页面添加僵尸图片元素
             $("body").append(imgObj);
 ​
         },2000);
 ​
         /* 
         4.僵尸移动的定时器 
         每次移动的像素值  4像素 
         间隔执行时间100毫秒
         */
         var timeMove = setInterval(function () {
             //获取所有的图片标签，然后设置距左位置
             $("img").each(function () {
                 //取出当前图片的距左位置，然后减去4像素，再将计算后的位置赋值给当前图片
                 //解析的目的是取出px单位
                 var left1 = parseInt($(this).css("left"));
                 var left2 = left1-4;
                 $(this).css("left",left2 + "px");
             });
         },100);
 ​
 ​
     </script>
     
 </body>
 </html>

2.3 版本三：

　　使用鼠标打僵尸

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>打僵尸_使用鼠标消除僵尸03</title>
     <style type="text/css">
         /* 设置背景图片 */
         body {
             background-image: url("../zombimgs/bg1.jpg");
 ​
             /* 隐藏浏览器的滑动条 */
             overflow: hidden;
         }
 ​
         /* 设置僵尸图片的样式,僵尸在页面任意位置显示，所以使用绝对定位 */
         img {
             position: absolute;
             width: 60px;
             height: 60px;
         }
         /* 设置h3标题标签的位置 */
         #clearzom {
             float: left;
             color: blue;
             background-color: rgba(255, 255, 255, 0.5);
         }
         #enterzom {
             float: right;
             color: blue;
             background-color: rgba(255, 255, 255, 0.5);
         }
     </style>
 </head>
 <body>
     <h2 id="clearzom">消灭数量：0</h2>
     <h2 id="enterzom">进屋数量：0</h2>
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         /* 定义统计进屋和消灭僵尸变量 */
         var clearzom = 0;//成功数量
         var enterzom = 0;//失败数量
 ​
         /* 
         1.获取浏览器的可见范围宽高,设置背景图片的大小和浏览器的大小是一致的
         js获取宽度：window.document.documentElement.clientWidth
         js获取高度：window.document.documentElement.clientHeight
          */
         var w = $(window).width();
         var h = $(window).height();
         $("body").css("background-size",w + "px " + h + "px");
 ​
         /* 2.在浏览器大小发生改变时，调整图片的尺寸大小 */
         onresize = function () {
             var w = $(window).width();
             var h = $(window).height();
             console.log("浏览器可见范围的宽度为:" + w + ",高度为：" + h);
             /* 将浏览器的可见宽度和高度赋值给背景图片作为尺寸大小 */
             $("body").css("background-size",w+"px " + h+"px");
            
         }
         /* 3.生成僵尸 2000毫秒出现一个僵尸*/
         var timer = setInterval(function () {
             //创建图片对象
             var imgObj = $("<img src='../zombimgs/zomb0.png'>");
             //设置僵尸出场的位置
             var left = w;
             var top = parseInt(Math.random()*(h-60));
             imgObj.css("left",left + "px").css("top",top + "px");
             //给页面添加僵尸图片元素
             $("body").append(imgObj);
 ​
             //僵尸图片添加鼠标移入事件
             imgObj.mouseover(function () {
                 //删除该僵尸图片
                 imgObj.remove();
                 clearzom++;
                 $("#clearzom").text("成功数量：" + clearzom);
             });
 ​
         },2000);
 ​
         /* 
         4.僵尸移动的定时器 
         每次移动的像素值  4像素 
         间隔执行时间100毫秒
         */
         var timeMove = setInterval(function () {
             //获取所有的图片标签，然后设置距左位置
             $("img").each(function () {
                 //取出当前图片的距左位置，然后减去4像素，再将计算后的位置赋值给当前图片
                 //解析的目的是取出px单位
                 var left1 = parseInt($(this).css("left"));
                 var left2 = left1-4;
                 $(this).css("left",left2 + "px");
 ​
                 //判断僵尸是否进屋
                 if (left1 <= 150) {
                     //移除进屋僵尸
                     $(this).remove();
                     enterzom++;
                     $("#enterzom").text("进屋数量：" + enterzom);
                 }
             });
         },100);
 ​
 ​
     </script>
     
 </body>
 </html>

2.4 版本四：

　　僵尸种类的变化以及游戏状态的改变

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>打僵尸_游戏状态04</title>
     <style type="text/css">
         /* 设置背景图片 */
         body {
             background-image: url("../zombimgs/bg1.jpg");
 ​
             /* 隐藏浏览器的滑动条 */
             overflow: hidden;
         }
 ​
         /* 设置僵尸图片的样式,僵尸在页面任意位置显示，所以使用绝对定位 */
         img {
             position: absolute;
             width: 60px;
             height: 60px;
         }
         /* 设置h3标题标签的位置 */
         #clearzom {
             float: left;
             color: blue;
             background-color: rgba(255, 255, 255, 0.5);
         }
         #enterzom {
             float: right;
             color: blue;
             background-color: rgba(255, 255, 255, 0.5);
         }
     </style>
 </head>
 <body>
     <h2 id="clearzom">消灭数量：0</h2>
     <h2 id="enterzom">进屋数量：0</h2>
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         /* 定义统计进屋和消灭僵尸变量 */
         var clearzom = 0;//成功数量
         var enterzom = 0;//失败数量
 ​
         /* 
         1.获取浏览器的可见范围宽高,设置背景图片的大小和浏览器的大小是一致的
         js获取宽度：window.document.documentElement.clientWidth
         js获取高度：window.document.documentElement.clientHeight
          */
         var w = $(window).width();
         var h = $(window).height();
         $("body").css("background-size",w + "px " + h + "px");
 ​
         /* 2.在浏览器大小发生改变时，调整图片的尺寸大小 */
         onresize = function () {
             var w = $(window).width();
             var h = $(window).height();
             console.log("浏览器可见范围的宽度为:" + w + ",高度为：" + h);
             /* 将浏览器的可见宽度和高度赋值给背景图片作为尺寸大小 */
             $("body").css("background-size",w+"px " + h+"px");
            
         }
         /* 3.生成僵尸 2000毫秒出现一个僵尸*/
         var timer = setInterval(function () {
             
             var type = parseInt(Math.random()*4);
             //创建图片对象
             var imgObj = $("<img src='../zombimgs/zomb"+ type +".png'>");
             //设置僵尸出场的位置
             var left = w;
             var top = parseInt(Math.random()*(h-60));
             imgObj.css("left",left + "px").css("top",top + "px");
             //给页面添加僵尸图片元素
             $("body").append(imgObj);
 ​
             //僵尸图片添加鼠标移入事件
             imgObj.mouseover(function () {
                 //删除该僵尸图片
                 imgObj.remove();
                 clearzom++;
                 $("#clearzom").text("成功数量：" + clearzom);
             });
 ​
         },2000);
 ​
         /* 
         4.僵尸移动的定时器 
         每次移动的像素值  4像素 
         间隔执行时间100毫秒
         */
         var timeMove = setInterval(function () {
             //获取所有的图片标签，然后设置距左位置
             $("img").each(function () {
                 //取出当前图片的距左位置，然后减去4像素，再将计算后的位置赋值给当前图片
                 //解析的目的是取出px单位
                 var left1 = parseInt($(this).css("left"));
                 var left2 = left1-40;
                 $(this).css("left",left2 + "px");
 ​
                 //判断僵尸是否进屋
                 if (left1 <= 150) {
                     //移除进屋僵尸
                     $(this).remove();
                     enterzom++;
                     $("#enterzom").text("进屋数量：" + enterzom);
 ​
                     //如果僵尸进屋数量达到30，游戏停止
                     if (enterzom >= 10) {
                         
                         if (confirm("GAME OVER")) {
                             //继续玩,刷新浏览器
                             location.reload();
                         } else {
                             //清空屏幕所有的僵尸
                             $("img").remove();
                             /*
                             停止定时器，不需要两个定时器都停止，
                             只需要停止生成僵尸的定时器即可，因为
                             没有僵尸了就不会进行移动
                             */
                            clearInterval(timer);
                         }
                     }
                 }
             });
         },100);
 ​
 ​
     </script>
     
 </body>
 </html>

三、轮播图

3.1 版本一：

　　在页面中添加三张图片，并一字展开，隐藏浏览器滑动条

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>轮播图_显示图片01</title>
     <style type="text/css">
         /* 设置div的尺寸大小和图片尺寸大小一致 */
         div,img {
             width: 1000px;
             height: 400px;
         }
         /* 设置图片以div为参照依据 */
         div {
             position: relative;
             /* 处理浏览器带滑动条问题 */
             overflow: hidden;
         }
         /* 设置图片为绝对定位 */
         img {
             position: absolute;
         }
     </style>
 </head>
 <body>
     <div>
         <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner1.png">
         <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner2.png">
         <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/itemCat_banner3.png">
     </div>
 ​
 ​
     <script type="text/javascript" src="../js/jquery-1.11.3.js"></script>
     <script type="text/javascript">
         //将三张图片在一字排开，不要互相之间遮挡
         var imgwidth = 1000;
 ​
         //for(var i = 0; i < 3 ; i++)
         $("img").each(function (i) {
            $(this).css("left", i * imgwidth + "px"); 
         });
     </script>
 </body>
 </html>

 

posted @ 2021-08-22 18:48  Coder_Cui  阅读(76)  评论(0)  编辑  收藏  举报