欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

用JavaScript中lodash编写双色球

程序员文章站 2022-06-18 16:25:49
1 2 3 4 5 6 7 8 Document 9 73 74 75 76 77 78 中国福利双色球 79 80 81 82 请选择号码 83 红球(1~33) 84 8... ......
  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>

 

上一篇： PHP扩展程序实现守护进程

下一篇： 如何将图文并茂的网页快速转换为WPS或word文档

推荐阅读