用JavaScript中lodash编写双色球
<!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中jQuery编写放大镜效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- [技术翻译]在现代JavaScript中编写异步任务
本周再来翻译一些技术文章,本次预计翻译三篇文章如下: 04.[译]使用Nuxt生成静态网站(Generate Static Websites with Nuxt) 05.[译]Web网页内容是如何影响 ...
- javascript中的this与函数讲解
前言 javascript中没有块级作用域(es6以前),javascript中作用域分为函数作用域和全局作用域.并且,大家可以认为全局作用域其实就是Window函数的函数作用域,我们编写的js代码, ...
- 【总结】浅谈JavaScript中的接口
一.什么是接口 接口是面向对象JavaScript程序员的工具箱中最有用的工具之一.在设计模式中提出的可重用的面向对象设计的原则之一就是“针对接口编程而不是实现编程”,即我们所说的面向接口编程,这个概 ...
- JavaScript中的this陷阱的最全收集
JavaScript来自一门健全的语言,所以你可能觉得JavaScript中的this和其他面向对象的语言如java的this一样,是指存储在实例属性中的值.事实并非如此,在JavaScript中,最 ...
- JavaScript中的匿名函数及函数的闭包
1.匿名函数 函数是JavaScript中最灵活的一种对象,这里只是讲解其匿名函数的用途.匿名函数:就是没有函数名的函数. 1.1 函数的定义,首先简单介绍一下函数的定义,大致可分为三种方式 第一种: ...
- 【转】JavaScript中的原型和继承
请在此暂时忘记之前学到的面向对象的一切知识.这里只需要考虑赛车的情况.是的,就是赛车. 最近我正在观看 24 Hours of Le Mans ,这是法国流行的一项赛事.最快的车被称为 Le Mans ...
- 浅显易懂的理解JavaScript中的this关键字
在JavaScript中this变量是一个令人难以摸清的关键字,this可谓是非常强大,充分了解this的相关知识有助于我们在编写面向对象的JavaScript程序时能够游刃有余. 1. 一般用处 对 ...
- JavaScript中的this陷阱的最全收集 没有之一
当有人问起你JavaScript有什么特点的时候,你可能立马就想到了单线程.事件驱动.面向对象等一堆词语,但是如果真的让你解释一下这些概 念,可能真解释不清楚.有句话这么说:如果你不能向一个6岁小孩解 ...
随机推荐
- 理解bind函数
前言:之前一直不懂这个函数是干嘛的,最近慢慢有点懂了,说一说自己的理解~ 本文按以下3个方面来谈谈bind函数 1)对bind函数的理解: 2)如何使用bind函数 3)自定义bind函数 (http ...
- 常用SEO优化
- web第一章(html)
HTML介绍 HyperText(超文本) Markup(标记) Language(语音) 类似于XML都是由标签组成 xml:是可扩展标记语言,标签可以任意自定义 HTML:不可以使用任意标签,学习 ...
- Spring Data MongoDB 模糊查询
Pattern pattern = Pattern.compile("^.*" + value + ".*$"); Query query = new Quer ...
- zookeeper安装和配置(单机+伪集群+集群)
#单机模式 解压到合适目录. 进入zookeeper目录下的conf子目录, 复制zoo_sample.cfg-->zoo.cfg(如果没有data和logs就新建):tickTime=2000 ...
- Android 性能优化的方面方面都在这儿
又到周六了,鸿洋的不定期的周六放送又来了~~这次来谈谈性能优化吧.大家在工作中或多或少都会拿自家的应用和竞品app做比对,不可避免的需要做一些app性能优化的活.很多时候可能是策略上的调整,不过还是有 ...
- The memory graph Shared by the method
Phone类 package com.itheima_03; /* * 手机类 */ public class Phone { String brand; int price; String colo ...
- OmniGraffle教程（二）
原文链接:简书网 创建一个树形结构图是任何一个作图软件最常用的功能之一了,而OmniGraffle画树形图的快速方便是其他软件无法比拟的,花1分钟即可学会,受益无穷. 方法一:用Diagram工具快速 ...
- “小小科技女神”与微软DigiGirlz Day的约会
上周五在微软中国上海科技园举行的微软科技女生夏令营终于在一天“忙碌的轻松中”,伴随着师生和工程师们的欢笑结束了. 本次的微软科技女生夏令营一共有来自上海闵行区七宝中学.莘庄中学和闵行中学的共50名高中 ...
- 【Oracle】等待事件详细内容
一.等待事件的相关知识 1.1 等待事件主要可以分为两类,即空闲(IDLE)等待事件和非空闲(NON-IDLE)等待事件.1). 空闲等待事件指ORACLE正等待某种工作,在诊断和优化数据库的时候,不 ...