一个方法用js生成随机双色球、大乐透

 代码如下:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#crateNum {display: flex;justify-content: center;}#ssqStyle,#dltStyle {border: 1px solid #ccc;padding: 10px;background: rgba(0, 0, 0, .5);}#ssqStyle>p,#dltStyle>p {font-size: 30px;text-align: center;font-weight: bold;}#ssqLIst,#dltList{height: 300px;padding: 50px;box-sizing: border-box;text-align: center;color: #fff;}</style>
</head><body><div id="crateNum"><div id="ssqStyle"><p>双色球</p><button onclick="creatNum('ssq',1)">随机生成1组</button><button onclick="creatNum('ssq',5)">随机生成5组</button><button onclick="creatNum('ssq',10)">随机生成10组</button><hr><ul id="ssqLIst"></ul></div><div id="dltStyle"><p>大乐透</p><button onclick="creatNum('dlt',1)">随机生成1组</button><button onclick="creatNum('dlt',5)">随机生成5组</button><button onclick="creatNum('dlt',10)">随机生成10组</button><hr><ul id="dltList"></ul></div></div>
</body>
<script>//定义红篮球数组let ssqArr = [], dltArr = [];//参数说明// classify:要产生双色球数据还是大乐透数据,因为用的一个方法,所以要区分一下//          ssq:双色球;//          dlt:大乐透// num:产生多少组function creatNum(classify, num) {// 定义前后区个数let qq = 0, //前区个数--红球数量hq = 0, //后区个数--篮球数量qqScope = 0, //前区每个球的数值范围---双色球是1-33,大乐透是1-35hqScope = 0; //后区每个球的数值范围---双色球是1-16,大乐透是1-12// 判断时ssq还是dltif (classify == 'ssq') {this.ssqArr = []; //将双色球数据列表清空(避免多次点击数据叠加)qq = 6; //双色球的前区(红球)个数为6个hq = 1; //双色球的后区(蓝球)个数为1个qqScope = 33; //双色球前区(红球)数值范围是1-33hqScope = 16; //双色球后区(蓝球)数值范围是1-16} else if (classify == 'dlt') {this.dltArr = []//将大乐透数据列表清空(避免多次点击数据叠加)qq = 5; //大乐透的前区(红球)个数为5个hq = 2; //大乐透的后区(蓝球)个数为2个qqScope = 35; //大乐透前区(红球)数值范围是1-35hqScope = 12; //大乐透后区(蓝球)数值范围是1-12}// 外层循环表示需要产生多少组随机数字for (let i = 0; i < num; i++) {//定义前后区(红蓝球)数组let redBall = [];let blueBall = [];let blueBallNum = '';//获取一组前区(红球)数据for (let j = 0; j < qq; j++) {let redBallNum = this.random(1, qqScope);//位数补齐--0-9不足两位的在前面补“0”redBallNum = redBallNum.toString().padStart(2, "0");//判重添加//如果不存在(false),就添加if (redBall.indexOf(redBallNum) == -1) {redBall.push(redBallNum);} else {//反之j--重新循环j--;}}//前区数字从大到小排序redBall.sort((a, b) => {return a - b})//获取一组后区(蓝球)数据for (let k = 0; k < hq; k++) {let blueBallNum = this.random(1, hqScope);//位数补齐--0-9不足两位的在前面补“0”blueBallNum = blueBallNum.toString().padStart(2, "0");//判重添加//如果不存在(false),就添加if (blueBall.indexOf(blueBallNum) == -1) {blueBall.push(blueBallNum);} else {//反之k--重新循环k--;}}//后区数字从大到小排序blueBall.sort((a, b) => {return a - b})if (classify == 'ssq') {//合并添加到ssqArr(双色球数据列表)中this.ssqArr[i] = (redBall.toString() + "-----" + blueBall.toString());} else if (classify == 'dlt') {//合并添加到dltArr(大乐透数据列表)中this.dltArr[i] = (redBall.toString() + "-----" + blueBall.toString());}}//操作标签部分// 获取ul标签,方便后面往里填数据let ssqLIst = document.querySelector('#ssqLIst')let dltList = document.querySelector('#dltList')// 判断选的随机产生双色球数据还是大乐透数据if (classify == 'ssq') {// 清空原先的内容ssqLIst.innerHTML = ''//将数据循环添加到dom中for (let s = 0; s < this.ssqArr.length; s++) {var li = document.createElement("li");li.innerText = this.ssqArr[s];ssqLIst.appendChild(li);}} else if (classify == 'dlt') {// 清空原先的内容dltList.innerHTML = ''for (let d = 0; d < this.dltArr.length; d++) {var li = document.createElement("li");li.innerText = this.dltArr[d];dltList.appendChild(li);}}}//获取随机数function random(min, max) {//Math.random()获取0-1中的随机数//随机数需要取整parseInt(),向下取整 Math.floor()return parseInt(Math.random() * (max - min) + min);}
</script></html>

效果如下:

没咋写过原生,可能里面的方法有待优化。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/82014.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

网络安全深入学习第六课——热门框架漏洞(RCE— Weblogic反序列化漏洞)

文章目录 一、Weblogic介绍二、Weblogic反序列化漏洞历史三、Weblogic框架特征1、404界面2、登录界面 四、weblogic常用弱口令账号密码五、Weblogic漏洞介绍六、Weblogic漏洞手工复现1、获取账号密码&#xff0c;这是一个任意文件读取的漏洞1&#xff09;读取SerializedSystemI…

MySQL性能优化——MYSQL执行流程

MySQL 执行流程1-5如下图。 MySQL 的架构共分为两层&#xff1a;Server 层和存储引擎层&#xff0c; Server 层负责建立连接、分析和执行 SQL。MySQL 大多数的核心功能模块都在这实现&#xff0c;主要包括连接器&#xff0c;查询缓存、解析器、预处理器、优化器、执行器等。…

【C刷题训练营】第四讲(打好基础很重要)

前言: 大家好&#xff0c;这是c语言刷题训练营的第四讲&#xff0c;打好基础便于对c语言语法与算法思维的提高&#xff0c;感谢你的来访与支持&#xff01; &#x1f4a5;&#x1f388;个人主页:​​​​​​Dream_Chaser&#xff5e; &#x1f388;&#x1f4a5; ✨✨刷题专栏…

操作系统基本概念

目录 一、基本概述 二、操作系统的特点 &#xff08;一&#xff09;并发性&#xff08;实质是微观的串行、宏观的并行&#xff09; 1. 对比看&#xff1a;并行性 2. 单核CPU和多核CPU &#xff08;二&#xff09;共享性 &#xff08;三&#xff09;虚拟性 &#xff08;…

升级OpenSSL并进行编译安装

Packaging (OpenSSL)组件存在安全漏洞的原因是由于当前爆出的Openssl漏洞。 这个漏洞可能会导致泄露隐私信息&#xff0c;并且涉及的机器和环境也有所不同&#xff0c;因此修复方案也会有所不同。 目前&#xff0c;一些服务器使用的Nginx是静态编译OpenSSL&#xff0c;直接将Op…

2023陇剑杯

2023陇剑杯初赛WP HW hard_web_1 ​ 首先判断哪个是服务器地址 ​ 从响应包看&#xff0c;给客户端返回数据包的就是服务器 所以确定服务器地址是192.168.162.188​ 再从开放端口来看&#xff0c;长期开放的端口 客户端发送一个TCP SYN包&#xff08;同步请求&#xff…

记一次线上BUG排查过程

1. 线上遇到一个非常奇怪的bug&#xff0c;为一个用户分配业务线类型后&#xff0c;该用户登录时&#xff0c;提示502&#xff0c;但其它的用户登录完全是正常的 2. 问题现象 3. 排查思路 先去看线上日志&#xff0c;看是否有error&#xff0c;但日志里边这个接口200正常返回…

Django系列:Django的项目结构与配置解析

Django系列 Django的项目结构与配置解析 作者&#xff1a;李俊才 &#xff08;jcLee95&#xff09;&#xff1a;https://blog.csdn.net/qq_28550263 邮箱 &#xff1a;291148484163.com 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/132893616 【介…

Nginx配置最佳实践

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

2023/9/18 -- C++/QT

作业 完善登录框 点击登录按钮后&#xff0c;判断账号&#xff08;admin&#xff09;和密码&#xff08;123456&#xff09;是否一致&#xff0c;如果匹配失败&#xff0c;则弹出错误对话框&#xff0c;文本内容“账号密码不匹配&#xff0c;是否重新登录”&#xff0c;给定两…

【论文阅读 05】图像异常检测研究现状综述

1 图像异常检测任务 图像异常检测任务根据异常的形态可以分为定性异常的分类和定量异常的定位两个类别. 定性异常的分类&#xff1a;整体地给出是否异常的判断&#xff0c;无需准确定位异常的位置。 如图2左上图所示, 左侧代表正常图像, 右侧代表异常图像, 在第1行中,模…

企业电子招投标采购系统源码——功能模块功能描述+数字化采购管理 采购招投标

功能描述 1、门户管理&#xff1a;所有用户可在门户页面查看所有的公告信息及相关的通知信息。主要板块包含&#xff1a;招标公告、非招标公告、系统通知、政策法规。 2、立项管理&#xff1a;企业用户可对需要采购的项目进行立项申请&#xff0c;并提交审批&#xff0c;查看所…

国家高新技术企业认定六个必要条件详细解读!

相信很多企业都想认定高新技术企业&#xff0c;因为认定成功的高新技术企业&#xff0c;可以享受很多政府资助政策&#xff0c;为公司创造很多便利条件。 但是&#xff0c;很多企业对于高企认定的条件却比较迷糊&#xff0c;今天至善科技为大家解读一下国家高新技术企业认定的六…

Maven 安装配置

Maven 安装配置 文章目录 Maven 安装配置一、下载 Maven二、解压Maven核心程序三、指定本地仓库四、配置阿里云镜像仓库4.1 将原有的例子配置注释掉4.2 加入新的配置 五、配置 Maven 工程的基础 JDK 版本六、配置环境变量6.1 检查 JAVAHOME 配置是否正确6.2 配置 MAVENHOME6.3 …

node 之 express 框架(初级)

一、express 热更新 1、安装扩展 npm install node-dev -D2、在根目录下的 package.json 文件中进行配置 3、之后的启动执行下面的命令即可 npm run dev二、mvc中的 模板引擎 1、ejs模板引擎的安装 npm install ejs -s2、在根目录下的app.js文件中配置 app.set(view engin…

第21章_瑞萨MCU零基础入门系列教程之事件链接控制器ELC

本教程基于韦东山百问网出的 DShanMCU-RA6M5开发板 进行编写&#xff0c;需要的同学可以在这里获取&#xff1a; https://item.taobao.com/item.htm?id728461040949 配套资料获取&#xff1a;https://renesas-docs.100ask.net 瑞萨MCU零基础入门系列教程汇总&#xff1a; ht…

腾讯mini项目-【指标监控服务重构】2023-08-16

今日已办 v1 验证 StageHandler 在处理消息时是否为单例&#xff0c;【错误尝试】 type StageHandler struct { }func (s StageHandler) Middleware1(h message.HandlerFunc) message.HandlerFunc {return func(msg *message.Message) ([]*message.Message, error) {log.Log…

沈阳建筑大学《乡村振兴战略下传统村落文化旅游设计》 许少辉八一著作

沈阳建筑大学《乡村振兴战略下传统村落文化旅游设计》 许少辉八一著作

怎么推广自己抖店的商品?最适合0经验新手操作的办法,来看看

我是王路飞。 抖店开通后&#xff0c;想要把自己店铺的商品卖出去&#xff0c;就需要进行推广了。 但是怎么推广呢&#xff1f; 要么利用抖音的搜索和推荐流量&#xff0c;获取曝光&#xff0c;实现点击和转化。 不过这种玩法有个弊端&#xff0c;就是需要你有一定的电商经…

农民朋友有福利啦!建行江门市分行“裕农通+农资结算”平台正式上线

随着广东广圣农业发展有限公司办公室内的裕农通“智慧眼”结算机“叮”的一声到账提醒&#xff0c;标志着全国首个“裕农通农资结算“平台的成功上线&#xff0c;也标志着建行广东省江门市分行的裕农通业务又迈上了一个新的台阶。 广东广圣农业发展有限公司&#xff08;以下简…