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


Posted in Javascript onJune 24, 2018

具体代码如下所述:

<!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 相关文章推荐
JS学习之一个简易的日历控件
Mar 24 Javascript
使用javascript实现雪花飘落的效果
Jan 13 Javascript
Javascript基础教程之while语句
Jan 18 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
微信小程序实战之登录页面制作(5)
Mar 30 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
javascript用rem来做响应式开发
Jan 13 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
Vue中mintui的field实现blur和focus事件的方法
Aug 25 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
Dec 09 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
vite2.0+vue3移动端项目实战详解
Mar 03 Vue.js
Vue中$refs的用法详解
Jun 24 #Javascript
JS实现获取word文档内容并输出显示到html页面示例
Jun 23 #Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
Jun 23 #Javascript
Vue子组件向父组件通信与父组件调用子组件中的方法
Jun 22 #Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 #Javascript
JS实现图片转换成base64的各种应用场景实例分析
Jun 22 #Javascript
使用vue-infinite-scroll实现无限滚动效果
Jun 22 #Javascript
You might like
PHP生成静态页面详解
2006/12/05 PHP
apache+php+mysql安装配置方法小结
2010/08/01 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP输出缓存ob系列函数详解
2014/03/11 PHP
thinkPHP简单实现多个子查询语句的方法
2016/12/05 PHP
JSON 编辑器实现代码
2009/12/06 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
javascript中的数字与字符串相加实例分析
2011/08/14 Javascript
node.js使用nodemailer发送邮件实例
2014/03/10 Javascript
两种方法实现在HTML页面加载完毕后运行某个js
2014/06/16 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
jQuery实现拖动剪裁图片作为头像
2016/12/28 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
angularjs定时任务的设置与清除示例
2017/06/02 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
vue动态改变背景图片demo分享
2018/09/13 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
vue的注意规范之v-if 与 v-for 一起使用教程
2019/08/04 Javascript
使用layui前端框架弹出form表单以及提交的示例
2019/10/25 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
使用vant的地域控件追加全部选项
2020/11/03 Javascript
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
python执行子进程实现进程间通信的方法
2015/06/02 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python 制作简单的音乐播放器
2020/11/25 Python
HTML5之SVG 2D入门13—svg对决canvas及长处和适用场景分析
2013/01/30 HTML / CSS
html2canvas截图空白问题的解决
2020/03/24 HTML / CSS
国贸专业的职业规划范文
2014/01/23 职场文书
导游个人求职信
2014/04/25 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
Spring Data JPA框架自定义Repository接口
2022/04/28 Java/Android
ubuntu下常用apt命令介绍
2022/06/05 Servers