使用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 相关文章推荐
键盘控制事件应用教程大全
Nov 24 Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
Jun 19 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
JS实现新浪博客左侧的Blog管理菜单效果代码
Oct 22 Javascript
jquery实现触发时更新下拉列表内容的方法
Dec 02 Javascript
Vuejs 单文件组件实例详解
Feb 09 Javascript
使用vue制作探探滑动堆叠组件的实例代码
Mar 07 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
vue动态注册组件实例代码详解
May 30 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
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控制网页过期时间的代码
2008/09/28 PHP
PHP 信号管理知识整理汇总
2017/02/19 PHP
通过PHP设置BugFree获取邮箱通知
2019/04/25 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
jqGrid读取选择的多行的某个属性代码
2014/05/18 Javascript
JavaScript匿名函数与委托使用示例
2014/07/22 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
js实现iframe自动自适应高度的方法
2015/02/17 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
详解javascript中的事件处理
2015/11/06 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
JavaScript中双符号的运算详解
2017/03/12 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
2018/01/26 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
python 异常处理总结
2016/10/18 Python
python 计算两个日期相差多少个月实例代码
2017/05/24 Python
python3 面向对象__类的内置属性与方法的实例代码
2018/11/09 Python
浅谈Python中函数的定义及其调用方法
2019/07/19 Python
pygame实现贪吃蛇游戏(下)
2019/10/29 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
澳大利亚冲浪和时尚服装网上购物:SurfStitch
2017/07/29 全球购物
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
实习鉴定范文
2013/12/19 职场文书
建筑安全员岗位职责
2014/03/13 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
企业安全生产月活动总结
2014/07/05 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Window server中安装Redis的超详细教程
2021/11/17 Redis
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
python 单机五子棋对战游戏
2022/04/28 Python