摘要:本篇文章探讨了jQuery教程之用jQuery编写简单九宫格抽奖,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章探讨了jQuery教程之用jQuery编写简单九宫格抽奖,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
<
1 <!DOCTYPE html>
2 <html>
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>Document</title>
9 <style>
10 table {
11 width: 600px;
12 height: 600px;
13 border: 2px solid black;
14 margin: 0 auto;
15 border: 2px solid black;
16
17 }
18
19 table td {
20 border: 2px solid black;
21 width: 200px;
22 text-align: center;
23 }
24
25 p {
26 text-align: center;
27 height: 10px;
28 }
29
30 span {
31 color: red;
32 }
33
34 #star {
35 /* background: gray; */
36 font-size: 20px;
37 }
38
39 .cj.back {
40 background: orange;
41 }
42
43 div {
44 height: 20px;
45 text-align: center;
46 }
47 </style>
48
49 </head>
50
51 <body>
52 <div>
53 <p></p>
54 <div id="last"></div>
55 <table>
56 <tr>
57 <td id="c1">奖5元</td>
58 <td id="c2">谢谢惠顾</td>
59 <td id="c3">奖100元</td>
60 </tr>
61 <tr>
62 <td id="c8">再抽一次</td>
63 <td id="star">开始抽奖</td>
64 <td id="c4">奖50元</td>
65 </tr>
66 <tr>
67 <td id="c7">奖20元</td>
68 <td id="c6">奖500元</td>
69 <td id="c5">奖200元</td>
70 </tr>
71 </table>
72 </div>
73
74 <script src="./js/jquery-1.12.4.min.js"></script>
75 <script>
76 let s = 5;
77 let time = setInterval(function () {
78 $('p').html(`抽奖倒计时,还有<span>${s}</span>秒`);
79 s--;
80 if (s < 0) {
81 clearInterval(time)
82 $("#star").css({
83 background: "grey",
84 "font-size": "24px"
85 })
86 }
87 }, 1000)
88 $('#star').on('click', function () {
89 let i = 0;
90 let t = 0;
91 let num = parseInt(Math.random() * 8 + 1)
92 console.log(num)
93 change = setInterval(function () {
94 i++;
95 if (i > 8) {
96 i = 1;
97 t++;
98 }
99 $('.cj').removeClass('back')
100 $('#c' + i).addClass('back')
101 if (t == 4) {
102 if (i == num) {
103 clearInterval(change)
104 $('#last').html(`恭喜你中奖:${$('#c' + i).text()}`)
105 }
106 }
107 }, 200)
108
109 })
110
111 </script>
112 </body>
113
114 </html>
本文由职坐标整理发布,学习更多的相关知识,请关注职坐标IT知识库!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号