码迷,mamicode.com
首页 > 其他好文 > 详细

JQ-- luckyOne

时间:2019-09-22 23:52:37      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:div   路径   20px   开关   har   val   按钮   font   mat   

这周学习了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

标签:div   路径   20px   开关   har   val   按钮   font   mat   

原文地址:https://www.cnblogs.com/ATnTention/p/11569849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!