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>Document</title>
9 <style>
10 header {
11 width: 500px;
12 height: 100px;
13 margin: 0 auto;
14 background-color: red;
15 border-radius: 10px;
16 }
17
18 header>h1 {
19 color: orange;
20 text-align: center;
21 line-height: 100px;
22 }
23
24 li {
25 list-style: none;
26 }
27
28 input {
29 width: 40px;
30 height: 30px;
31 }
32
33 .change {
34 width: 500px;
35 height: 400px;
36 background-color: burlywood;
37 margin: 0 auto;
38 }
39
40 .change>p:first-child {
41 text-align: center;
42 font-size: 24px;
43 }
44
45 .change>p:nth-child(2) {
46 color: red;
47 }
48
49 .change>p:nth-child(4) {
50 color: blue;
51 }
52
53 #red {
54 display: flex;
55 }
56
57 #red input {
58 margin-right: 20px;
59 }
60
61 #star {
62 width: 100px;
63 height: 50px;
64 margin-left: 190px;
65 }
66
67 .return {
68 color: red;
69 font-size: 20px;
70 text-align: center;
71 }
72 </style>
73 </head>
74
75 <body>
76
77 <header>
78 <h1>中国福利双色球</h1>
79 </header>
80
81 <div class="change">
82 <p>请选择号码</p>
83 <p>红球(1~33)</p>
84 <ul id="red">
85 <li id="red1">
86 <input type="text" value="">
87 <input type="text" value="">
88 <input type="text" value="">
89 <input type="text" value="">
90 <input type="text" value="">
91 <input type="text" value="">
92 </li>
93 </ul>
94 <p>蓝球(1~16)</p>
95 <ul id="blue">
96 <li>
97 <input type="text" value="" id="playblue">
98 </li>
99 </ul>
100 <p>
101 <input type="button" value="确定" id="star">
102 </p>
103 <p>彩票结果为：</p>
104 <p class="return"></p>
105 </div>
106
107 <script src="./lodash.js"></script>
108 <script>
109 window.onload = function () {
110 let num = [];//创建空数组
111 while (true) {
112 num.push(_.random(1, 33));//将随机数添加到num中
113 num = _.uniq(num)//去重
114 if (num.length == 6) {
115 break;
116 }
117 }
118 let num1 = [];//蓝球数
119 num1.push(_.random(1, 16));
120 console.log(num, num1)
121 let star = document.getElementById('star');
122 let playblue = document.getElementById('playblue');
123 let end =document.querySelector('.return');
124 let input = document.querySelectorAll('#red1>input')//得到所有的input
125 console.log(input)
126 star.onclick = function () {
127 //红球
128 let play = [];
129 _.forEach(input, function (text) {
130 let test = text.value-0;//获取输入的值
131 play.push(test)
132 })
133 //蓝球
134 let play1=[];
135 play1.push(playblue.value-0);
136 //判断
137 //红球判断
138 restu=_.intersection(num,play);
139 //蓝球判断
140 restu1=_.intersection(num1,play1);
141 if(restu.length==6&&restu1.length==0){
142 end.innerHTML="恭喜你获得二等奖"
143 }else if(restu.length==4||(restu.length==3&&restu1.length==1)){
144 end.innerHTML='恭喜你获得五等奖：10元'
145 }else if(restu.length==1&&restu1.length==1){
146 end.innerHTML='恭喜你获得六等奖：5元'
147 }else if(restu.length==0){
148 end.innerHTML='未中奖'
149 }else if(restu.length==6&&restu1.length==1){
150 end.innerHTML="恭喜你获得一等奖500万"
151 }else if(restu.length==5&&restu1.length==1){
152 end.innerHTML="恭喜你获得三等奖3000元"
153 }
154 }
155
156 }
157 </script>
158 </body>
159
160 </html>
