这周学习了JQ
通过引入 JQ文件 可以减少寻找DOM节点的代码量
而且有一些操作能够代替 for循环
但是要注意 jq路径 以及 代码加载顺序
模拟抽奖 可以开启暗门
所以 哈哈哈哈
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>年会抽奖</title> 9 <script src="./jquery-3.4.1.min.js"></script> 10 </head> 11 <style> 12 .container { 13 width: 970px; 14 margin: 0 auto; 15 } 16 17 header { 18 text-align: center; 19 width: 150px; 20 height: 130px; 21 margin: 0 auto; 22 font-size: 45px; 23 line-height: 130px; 24 } 25 26 .luckyPeople { 27 height: 150px; 28 border: solid red; 29 text-align: center; 30 line-height: 150px; 31 font-size: 128px; 32 } 33 34 .btn, 35 .common, 36 .winner { 37 width: 150px; 38 margin: 10px auto; 39 text-align: center; 40 font-size: 20px; 41 } 42 43 button { 44 cursor: pointer; 45 } 46 47 .winner { 48 font-size: 32px; 49 } 50 </style> 51 52 <body> 53 <div class="container"> 54 <header id="header"> 55 中奖人 56 </header> 57 <div class="luckyPeople" id="luckyPeople"></div> 58 <div class="btn"> 59 <button id="start">开始</button> 60 <button id="end">停止</button> 61 </div> 62 <div class="common">一等奖（1名）</div> 63 <div class="winner"></div> 64 <div class="common">二等奖（1名）</div> 65 <div class="winner"></div> 66 <div class="common">三等奖（1名）</div> 67 <div class="winner"></div> 68 </div> 69 <script> 70 let userName = ["kong", "dejavu", "key", "l", "asd", "asfghfd", "wqrasd", "retasd", "ascvbasvd", "11as21d"]; 71 let trueName = ["1", "2", "3"]; //内部名单 72 let isClick = false; //默认暗门没有开启 73 74 //随机获取人名 75 let getRandName = function () { 76 let max = userName.length; 77 let rand = Math.floor(Math.random() * max); 78 return userName[rand]; 79 } 80 81 //一开始停止按钮无法点击 82 $("#end").attr("disabled", "true"); 83 //暗门开关 header 84 $("#header").click(function () { 85 isClick = true; 86 }) 87 88 let stopTimer; 89 $("#start").click(function () { 90 //点击开始按钮之后 开始按钮就应该不能再点击了 结束按钮变得可以点击 91 $("#start").attr("disabled", true); 92 $("#end").attr("disabled", false); 93 stopTimer = setInterval(function () { 94 $(".luckyPeople").text(getRandName()); 95 }, 10); 96 }) 97 98 //点击结束按钮要做的事 1 停止计时器 2，获取大div的数据填写到winner里面？ 99 $("#end").click(function () { 100 clearInterval(stopTimer); 101 $("#start").attr("disabled", false); 102 $("#end").attr("disabled", true); 103 if (isClick) { 104 if ($(".winner:eq(2)").text() == "") { 105 $(".winner:eq(2)").text(`${trueName[2]}`); 106 $("#luckyPeople").text(`${trueName[2]}`) ; 107 } else if ($(".winner:eq(1)").text() == "") { 108 $(".winner:eq(1)").text(`${trueName[1]}`); 109 $("#luckyPeople").text(`${trueName[1]}`); 110 } else { 111 $(".winner:eq(0)").text(`${trueName[0]}`) ; 112 $("#luckyPeople").text(`${trueName[0]}`) ; 113 $("#start").attr("disabled", "true"); 114 } 115 } else { 116 if ($(".winner:eq(2)").html() == "") { 117 $(".winner:eq(2)").html($(".luckyPeople").text()) 118 } else if ($(".winner:eq(1)").html() == "") { 119 $(".winner:eq(1)").html($(".luckyPeople").text()) 120 } else { 121 $(".winner:eq(0)").html($(".luckyPeople").text()) 122 $("#start").attr("disabled", "true"); 123 } 124 } 125 }) 126 127 </script> 128 </body> 129 130 </html>