JavaScript

超轻量级php框架startmvc

使用JavaScript中的lodash编写双色球效果

更新时间:2020-07-13 23:42:01 作者:startmvc
具体代码如下所述:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname=

具体代码如下所述:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>Document</title>
 <style>
 header {
 width: 500px;
 height: 100px;
 margin: 0 auto;
 background-color: red;
 border-radius: 10px;
 }
 header>h1 {
 color: orange;
 text-align: center;
 line-height: 100px;
 }
 li {
 list-style: none;
 }
 input {
 width: 40px;
 height: 30px;
 }
 .change {
 width: 500px;
 height: 400px;
 background-color: burlywood;
 margin: 0 auto;
 }
 .change>p:first-child {
 text-align: center;
 font-size: 24px;
 }
 .change>p:nth-child(2) {
 color: red;
 }
 .change>p:nth-child(4) {
 color: blue;
 }
 #red {
 display: flex;
 }
 #red input {
 margin-right: 20px;
 }
 #star {
 width: 100px;
 height: 50px;
 margin-left: 190px;
 }
 .return {
 color: red;
 font-size: 20px;
 text-align: center;
 }
 </style>
</head>
<body>
 <header>
 <h1>中国福利双色球</h1>
 </header>
 <div class="change">
 <p>请选择号码</p>
 <p>红球(1~33)</p>
 <ul id="red">
 <li id="red1">
 <input type="text" value="">
 <input type="text" value="">
 <input type="text" value="">
 <input type="text" value="">
 <input type="text" value="">
 <input type="text" value=""> 
 </li>
 </ul>
 <p>蓝球(1~16)</p>
 <ul id="blue">
 <li>
 <input type="text" value="" id="playblue">
 </li>
 </ul>
 <p>
 <input type="button" value="确定" id="star">
 </p>
 <p>彩票结果为:</p>
 <p class="return"></p>
 </div>
 <script src="./lodash.js"></script>
 <script>
 window.onload = function () {
 let num = [];//创建空数组
 while (true) {
 num.push(_.random(1, 33));//将随机数添加到num中
 num = _.uniq(num)//去重
 if (num.length == 6) {
 break;
 }
 }
 let num1 = [];//蓝球数
 num1.push(_.random(1, 16));
 console.log(num, num1)
 let star = document.getElementById('star');
 let playblue = document.getElementById('playblue');
 let end =document.querySelector('.return'); 
 let input = document.querySelectorAll('#red1>input')//得到所有的input
 console.log(input)
 star.onclick = function () {
 //红球
 let play = [];
 _.forEach(input, function (text) {
 let test = text.value-0;//获取输入的值
 play.push(test)
 })
 //蓝球
 let play1=[];
 play1.push(playblue.value-0);
 //判断
 //红球判断
 restu=_.intersection(num,play);
 //蓝球判断
 restu1=_.intersection(num1,play1);
 if(restu.length==6&&restu1.length==0){
 end.innerHTML="恭喜你获得二等奖"
 }else if(restu.length==4||(restu.length==3&&restu1.length==1)){
 end.innerHTML='恭喜你获得五等奖:10元'
 }else if(restu.length==1&&restu1.length==1){
 end.innerHTML='恭喜你获得六等奖:5元'
 }else if(restu.length==0){
 end.innerHTML='未中奖'
 }else if(restu.length==6&&restu1.length==1){
 end.innerHTML="恭喜你获得一等奖500万"
 }else if(restu.length==5&&restu1.length==1){
 end.innerHTML="恭喜你获得三等奖3000元"
 }
 }
 }
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的使用JavaScript中的lodash编写双色球效果,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

js 双色球 js lodash