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

2024-05-06 16:45:01

字体：大中小

来源：转载

供稿：网友

具体代码如下所述：

<!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编写双色球效果，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：JS实现获取word文档内容并输出显示到html页面示例

下一篇：JavaScript中var、let、const区别浅析