<!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编写双色球的更多相关文章

  1. 用JavaScript中jQuery编写放大镜效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. [技术翻译]在现代JavaScript中编写异步任务

    本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...

  3. javascript中的this与函数讲解

    前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...

  4. 【总结】浅谈JavaScript中的接口

    一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...

  5. JavaScript中的this陷阱的最全收集

    JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScript中,最 ...

  6. JavaScript中的匿名函数及函数的闭包

    1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种: ...

  7. 【转】JavaScript中的原型和继承

    请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...

  8. 浅显易懂的理解JavaScript中的this关键字

    在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...

  9. JavaScript中的this陷阱的最全收集 没有之一

    当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...

随机推荐

  1. css文本内容显示省略号

    文字显示省略号width: 4.5rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; 但是这个属性只支持单行文本的溢出显 ...

  2. JavaScript的进阶之路(七)客户端JavaScript知识点总结

    一.客户端JavaScript主要是BOM DOM的操作和js脚本的兼容性.互用性.可访问性.安全性的应用.以及一些框架的引用. 二.BOM:浏览器对象模型 主要介绍window对象 1.定时器:se ...

  3. git基础命令。

    创建一个新的本地仓库    git init 克隆远程服务器    git clone URL 打开一个文件夹   cd 添加文件   git add . 本地提交更改   git commit -m ...

  4. python 增加矩阵行列和维数

    python 增加矩阵行列和维数 方法1 np.r_ np.c_ import numpy as np a = np.array([[1,2,3],[4,5,6],[7,8,9]]) b = np.a ...

  5. android资源的诡异问题

    最近,新开发版本,正在处于扫BUG的阶段. 发现一个比较诡异的问题,一个控件的颜色,背景色与预先设定的值,发生不一致.其他的类型的控件有同样的设置,但是现实结果正常. 今天,专门解决这个问题. 经过各 ...

  6. 7.Java关键字和保留字

    一.概念 Java关键字(Key Word):  对Java的编译器有特殊的意义,他们用来表示一种数据类型或者表示程序的结构. 保留字(Reserve Word):即它们在Java现有版本中没有特殊含 ...

  7. PHPStorm/webstorm/PyCharm tips

    phpstorm对于使用PHP开发web的人员来说,是一个非常不错的编辑开发IDE,以前用过sublime,但是相比于storm,sublime在浏览legacy代码,类代码编辑方面明显要逊色不少.同 ...

  8. yum 安装LAMP

    一.安装 MySQL 首先来进行 MySQL 的安装.打开超级终端,输入: [root@localhost ~]# yum install mysql mysql-server 安装完毕,让 MySQ ...

  9. Docker-容器数据卷

    docker容器数据卷相当于外置的移动硬盘 docker容器数据卷主要功能是:容器的持久化.容器间继承+共享数据 特点: (1)数据卷可以容器之间共享或重用数据 (2)卷中更改可以直接生效 (3)数据 ...

  10. 关于CATransform3D矩阵变换的简单解析

    关于CATransform3D矩阵变换的简单解析 效果图: 我能能够用上的CATransform3D其实很简单,并不复杂. CATransform3D有着4种东西我们可以设置. 1. 透视效果(由m3 ...