Article From:https://www.cnblogs.com/yangkaiming/p/9216970.html
  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>Chinese welfare double chromosphere < /h1> 79     </header>
 80 
 81     <div class="change">
 82         <p>Please select the number < /p> 83         <p>Red ball (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>Blue ball (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="Determine "id=" Star ">102         </p>
103         <p>The result of the lottery is: < /p>104         <p class="return"></p>
105     </div>
106 
107     <script src="./lodash.js"></script>
108     <script>
109         window.onload = function () {
110             let num = [];//Create an empty array
111             while (true) {
112                 num.push(_.random(1, 33));//Add random numbers to num
113                 num = _.uniq(num)//Duplicate removal
114                 if (num.length == 6) {
115                     break;
116                 }
117             }
118             let num1 = [];//Blue ball number
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')//Get all the input
125             console.log(input)
126             star.onclick = function () {
127                 //Red ball
128                 let play = [];
129                 _.forEach(input, function (text) {
130                     let test = text.value-0;//Get the value of the input
131                     play.push(test)
132                 })
133                 //blue ball
134                 let play1=[];
135                 play1.push(playblue.value-0);
136                 //judge
137                 //Red ball judgment
138                 restu=_.intersection(num,play);
139                 //Blue ball judgment
140                 restu1=_.intersection(num1,play1);
141                 if(restu.length==6&&restu1.length==0){
142                     end.innerHTML="Congratulations on your winning the two prize.143                 }else if(restu.length==4||(restu.length==3&&restu1.length==1)){
144                     end.innerHTML='Congratulations on your winning the five prize: 10 yuan.145                 }else if(restu.length==1&&restu1.length==1){
146                     end.innerHTML='Congratulations on your winning the six prize: 5 yuan.147                 }else if(restu.length==0){
148                     end.innerHTML='Not winning 'award'149                 }else if(restu.length==6&&restu1.length==1){
150                     end.innerHTML="Congratulations on your first prize 5 million "151                 }else if(restu.length==5&&restu1.length==1){
152                     end.innerHTML="Congratulations on your winning the three prize of 3000 yuan.153                 }
154             }
155 
156         }
157     </script>
158 </body>
159 
160 </html>

 

Leave a Reply

Your email address will not be published. Required fields are marked *