JQ-- luckyOne
Posted atntention
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQ-- luckyOne相关的知识，希望对你有一定的参考价值。
这周学习了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>
以上是关于JQ-- luckyOne的主要内容，如果未能解决你的问题，请参考以下文章
jQuery---jq操作标签文本(html(),text()),jq操作文档标签(插入,删除,修改),克隆,,jq操作属性,jq操作class属性,jq操作表单value,jq操作css,jq操作盒
学习04-jq（jq的使用，jq的入口函数，jq与DOM的转换，基本选择器，层级选择器，设置样式，筛选选择器，筛选方法）