用JavaScript中lodash編寫雙色球

YKmaster發表於2018-06-23
JavaScript
  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>

 

相關文章