大乐透号码随机生成与排序

        前面两篇介绍了两个非常简单的排序算法,本篇介绍排序算法的一个简单应用——对大乐透随机号码进行排序。

        由于工作中涉及很多前端的开发,所以对前端技术有一定了解,前端的一个好处是可以直观地看到页面的布局。每次下班回家的路上总会路过一家彩票代售点,偶尔和同事一起去买几注机选的,所谓机选,其实就是机器随机生成的号码,而且是已经排序好的随机号码。于是就萌生了写一个大乐透号码生成器的小工具,下面对这个小工具简单介绍。

        这个“大乐透号码生成器”纯前端开发,涉及HTML、JS、CSS。为了简单起见,把所有代码写到了一个html文件中,这样的好处就是可以直接用浏览器打开这个文件,当然实际工作中最好把他们放在不同的文件。整个区域放在一个大的div标签中,表现为一个矩形区域,并通过JS控制显示的位置;设置一个下拉列表,可以选择生成1-5组随机号码,当点击按钮后,就能生成相应组数的号码;号码区域分两部分,上面部分是随机生成的无序的号码,下面部分是对这些无序号码进行排序后的号码,生成组数受上面下拉列表控制。这个工具的核心是生成随机号码和对随机号码进行排序,这两步都是通过JS代码实现的。下面介绍一些重要的JS代码。

        生成随机号码:大乐透分前区号码和后区号码,前区号码是从01-35中无重复地取5个号码,后区号码是从01-12中无重复地取2个号码,组成一组7位的号码。这里定义了两个数组:arr35存放前区的01-35号码,arr12存放后区的01-12号码。通过“temp = Math.floor(Math.random()*arr35.length)”方法从0-arr35.length取一个随机数作为索引,通过arr35[temp]即可获取数组中该索引位置的值,也就是随机号码,然后通过获取id动态添加到排序前的span中。取完以后通过“arr35.splice(temp,1);”即可删除数组中该随机数,同时使数组长度减一。循环5次即可从01-35中无重复地取5个随机号码,后面两位同样如此。

var arr35 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"];
var arr12 = ["01","02","03","04","05","06","07","08","09","10","11","12"];
var span = "";
var temp = "";
for(var i=1;i<6;i++){span = "span" + x + i;temp = Math.floor(Math.random()*arr35.length);//随机取一个数document.getElementById(span).innerText = arr35[temp];document.getElementById(span).style.backgroundColor = "red";arr35.splice(temp,1);//删除该位置的值
}

        随机号码排序:这里用到了插入排序算法,只是对每组号码的前五位进行排序,数据量很小,排序完之后通过获取id动态添加到排序后的span中。有关插入排序算法,请见:http://www.cnblogs.com/Y-oung/p/7745197.html。

//插入排序
function bubbleSort(array){var len = array.length;for (var i = 0; i < len; i++) {for (var j = i; j > 0 && array[j]<array[j-1]; j--) {var swap = array[j];  //第二个for循环使元素比较并移动到合适位置array[j] = array[j-1];array[j-1] = swap;}}return array;
}

其余的JS以及HTML、CSS技术不再详细介绍。

        完整代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>大乐透号码生成器</title>
<style type="text/css">
#table
{width:800px; height:500px;margin:10px;border:2px solid #000000;box-shadow: 10px 10px 5px;border-radius:50px;}
.buttonStyle
{height:40px;margin:20px;font-size:20px;background-color:#6495ED;color:white;border-radius:10px;}
.oneStyle
{margin-left:200px;margin-top:10px;font-family:sans-serif;font-size:20px;}
span
{border-radius: 50%;color: #FFFFFF;padding:3px;font-size:13px;}
</style>
</head>
<body><div id="table"><div><h1 style="text-align:center">大乐透号码生成器</h1></div><div class="oneStyle">生成组数:<select id="zushu" style="width:150px;height:30px;margin:10px;" onchange="select()"><option value="1">生成 1 组号码</option><option value="2">生成 2 组号码</option><option value="3">生成 3 组号码</option><option value="4">生成 4 组号码</option><option value="5">生成 5 组号码</option></select></div><div class="oneStyle">随机号码1:<span id="span11"></span>&nbsp;<span id="span12"></span>&nbsp;<span id="span13"></span>&nbsp;<span id="span14"></span>&nbsp;<span id="span15"></span>&nbsp;&nbsp;&nbsp;<span id="span16"></span>&nbsp;<span id="span17"></span><br>随机号码2:<span id="span21"></span>&nbsp;<span id="span22"></span>&nbsp;<span id="span23"></span>&nbsp;<span id="span24"></span>&nbsp;<span id="span25"></span>&nbsp;&nbsp;&nbsp;<span id="span26"></span>&nbsp;<span id="span27"></span><br>随机号码3:<span id="span31"></span>&nbsp;<span id="span32"></span>&nbsp;<span id="span33"></span>&nbsp;<span id="span34"></span>&nbsp;<span id="span35"></span>&nbsp;&nbsp;&nbsp;<span id="span36"></span>&nbsp;<span id="span37"></span><br>随机号码4:<span id="span41"></span>&nbsp;<span id="span42"></span>&nbsp;<span id="span43"></span>&nbsp;<span id="span44"></span>&nbsp;<span id="span45"></span>&nbsp;&nbsp;&nbsp;<span id="span46"></span>&nbsp;<span id="span47"></span><br>随机号码5:<span id="span51"></span>&nbsp;<span id="span52"></span>&nbsp;<span id="span53"></span>&nbsp;<span id="span54"></span>&nbsp;<span id="span55"></span>&nbsp;&nbsp;&nbsp;<span id="span56"></span>&nbsp;<span id="span57"></span><br></div><div class="oneStyle">排序后码1:<span id="span61"></span>&nbsp;<span id="span62"></span>&nbsp;<span id="span63"></span>&nbsp;<span id="span64"></span>&nbsp;<span id="span65"></span>&nbsp;&nbsp;&nbsp;<span id="span66"></span>&nbsp;<span id="span67"></span><br>排序后码2:<span id="span71"></span>&nbsp;<span id="span72"></span>&nbsp;<span id="span73"></span>&nbsp;<span id="span74"></span>&nbsp;<span id="span75"></span>&nbsp;&nbsp;&nbsp;<span id="span76"></span>&nbsp;<span id="span77"></span><br>排序后码3:<span id="span81"></span>&nbsp;<span id="span82"></span>&nbsp;<span id="span83"></span>&nbsp;<span id="span84"></span>&nbsp;<span id="span85"></span>&nbsp;&nbsp;&nbsp;<span id="span86"></span>&nbsp;<span id="span87"></span><br>排序后码4:<span id="span91"></span>&nbsp;<span id="span92"></span>&nbsp;<span id="span93"></span>&nbsp;<span id="span94"></span>&nbsp;<span id="span95"></span>&nbsp;&nbsp;&nbsp;<span id="span96"></span>&nbsp;<span id="span97"></span><br>排序后码5:<span id="span101"></span>&nbsp;<span id="span102"></span>&nbsp;<span id="span103"></span>&nbsp;<span id="span104"></span>&nbsp;<span id="span105"></span>&nbsp;&nbsp;&nbsp;<span id="span106"></span>&nbsp;<span id="span107"></span><br></div><div style="text-align:center"><input class="buttonStyle" id="fiveNumber" type="button" onclick="number()"></div></div><script type="text/javascript">var table = document.getElementById("table");var width = document.documentElement.clientWidth;  //浏览器可见区域宽var height = document.documentElement.clientHeight;  //浏览器可见区域高
        table.style.marginLeft = ((width-800)/2)+"px";
        table.style.marginTop = ((height-700)/2)+"px";var val = "1";document.getElementById("fiveNumber").setAttribute("title","生成 1 组号码");document.getElementById("fiveNumber").setAttribute("value","生成 1 组号码");//随机生成五组号码function select(){val = document.getElementById("zushu").value;var des = "生成 " + val + " 组号码";document.getElementById("fiveNumber").setAttribute("title",des);document.getElementById("fiveNumber").setAttribute("value",des);}//随机生成五组号码function number(){for(var n=1;n<11;n++){for(var m=1;m<8;m++){var a = "span" + n + m;document.getElementById(a).innerText = "";//每次点击按钮先清空上一次数据
                    document.getElementById(a).style.backgroundColor = "white";}}for(var x=1;x<(parseInt(val)+1);x++){//从35个号码里面无放回地取5位var arr35 = ["01","02","03","04","05","06","07","08","09","10","11","12","13","14","15","16","17","18","19","20","21","22","23","24","25","26","27","28","29","30","31","32","33","34","35"];//从12个号码里面无放回地取2位var arr12 = ["01","02","03","04","05","06","07","08","09","10","11","12"];var span = "";var temp = "";for(var i=1;i<6;i++){span = "span" + x + i;temp = Math.floor(Math.random()*arr35.length);//随机取一个数
                    document.getElementById(span).innerText = arr35[temp];document.getElementById(span).style.backgroundColor = "red";arr35.splice(temp,1);//删除该位置的值
                }for(var j=6;j<8;j++){span = "span" + x + j;temp = Math.floor(Math.random()*arr12.length);//随机取一个数
                    document.getElementById(span).innerText = arr12[temp];document.getElementById(span).style.backgroundColor = "blue";arr12.splice(temp,1);//删除该位置的值
                }}for(var x=1;x<(parseInt(val)+1);x++){var span = "";//前五位排序var arr = new Array(5);for(var y=0;y<5;y++){span = "span" + x + (y+1);arr[y] = document.getElementById(span).lastChild.nodeValue;}var a = bubbleSort(arr);for(var l=0;l<5;l++){span = "span" + (x+5) + (l+1);document.getElementById(span).innerText = a[l];document.getElementById(span).style.backgroundColor = "red";}//后两位排序var spann6 = "span" + x + "6";var spann7 = "span" + x + "7";var spanm6 = "span" + (x+5) + "6";var spanm7 = "span" + (x+5) + "7";var span6 = document.getElementById(spann6).lastChild.nodeValue;var span7 = document.getElementById(spann7).lastChild.nodeValue;if(parseInt(span6) > parseInt(span7)){document.getElementById(spanm6).innerText = span7;document.getElementById(spanm7).innerText = span6;}else{document.getElementById(spanm6).innerText = span6;document.getElementById(spanm7).innerText = span7;}document.getElementById(spanm6).style.backgroundColor = "blue";document.getElementById(spanm7).style.backgroundColor = "blue";}}//插入排序function bubbleSort(array){var len = array.length;for (var i = 0; i < len; i++) {for (var j = i; j > 0 && array[j]<array[j-1]; j--) {var swap = array[j];  //第二个for循环使元素比较并移动到合适位置
                       array[j] = array[j-1];array[j-1] = swap;}}return array;}</script>
</body>
</html>

        浏览器打开效果:

        转载请注明出处 http://www.cnblogs.com/Y-oung/p/7756851.html

        工作、学习、交流或有任何疑问,请联系邮箱:yy1340128046@163.com

 

转载于:https://www.cnblogs.com/Y-oung/p/7756851.html

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

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

相关文章

简单的彩票大乐透选号工具

彩票大乐透由前区和后区组成&#xff0c;前区是5位数&#xff0c;后区是2位数。前区的位数数字是1-35从中任意选择5个数&#xff0c;后区是1-12&#xff0c;从中任选2个数。根据规律&#xff0c;我们可以简单编辑彩票选号工具&#xff1a; import random wint(input(输入你需要…

python爬取分析超级大乐透历史开奖数据!你中奖了吗?

爬取网站&#xff1a;http://datachart.500.com/dlt/history/history.shtml —500彩票网 &#xff08;分析后发现网站源代码并非是通过页面跳转来查找不同的数据&#xff0c;故可通过F12查找network栏找到真正储存所有历史开奖结果的网页&#xff09; 如图&#xff1a; 爬虫部…

ChatGPT的发展给我们带来了什么?

1.智能对话&#xff1a; ChatGPT可以进行自然语言对话&#xff0c;理解用户的问题并提供相应的回答。这为用户提供了一种直接、便捷的方式来获取信息、寻求帮助或进行交流。它可以应用于在线客服、虚拟助手、智能聊天机器人等领域&#xff0c;为用户提供个性化的支持和解答。 2…

chatgpt的原理 第三部分

对话 我们是如何学会中文的&#xff1f;从0岁开始&#xff0c;听、说&#xff0c;也就是对话。 我们是如何学外语的&#xff1f;看教材&#xff0c;听广播&#xff0c;背单词。唯独缺少了对话&#xff01;正是因为缺少了对话这个高效的语言学习方式&#xff0c;所以我们的英语…

原创程序#模拟书本世界#Ai角色互动#ChatGPT学外语#Ai模拟人生#Ai虚拟世界#ChatGPT文字冒险游戏

今天和大家介绍我这个程序&#xff0c;这个平台叫做「模拟书本世界-外语训练营」&#xff0c;介绍它之前&#xff0c;大家可以先体验一下&#xff1a;www.chatlangue.com 目前支持安卓系统。 接下来介绍一下它的实现方法&#xff1a; 它的核心其实是通过调用ChatGPT的API实现&…

对比应用ChatGPT3.5和4,和4比起来,3.5略显清澈且愚蠢

你有没有想过&#xff0c;拥有一位贴心的智能助手&#xff0c;让你在工作、生活、学习等方面都得心应手&#xff1f;这不再是科幻电影的场景&#xff0c;而是已经成为现实的科技奇迹。今天&#xff0c;就让我来为大家揭秘这位让无数用户为之倾倒的“聊天天才”——ChatGPT&…

chatgpt赋能Python-pythonpip报错

Python pip报错解决方案 介绍 Python是一门功能强大、易学易用、支持多种编程范式的开发语言。它有着丰富的标准库和第三方库&#xff0c;可以用于多种开发场景&#xff0c;从数据分析、机器学习、Web开发到网络编程等。而Python pip是Python的一个包管理工具&#xff0c;可以…

四段论提问让ChatGPT更懂你心!

用户故事是描述客户需求的方法&#xff0c;通常记为四段论的格式&#xff1a; 角色&#xff0d;功能&#xff0d;目的&#xff0d;验收标准。 如&#xff1a; 作为一个家庭主妇&#xff0c;我需要一个30平方米的餐厅&#xff0c;用以招待10位客人聚餐。 我希望这个餐厅&…

产品经理如何与G端领导沟通

从事G端产品已经一年有余&#xff0c;之前都是做的B端产品&#xff0c;自从接触G端产品后&#xff0c;发现做事的方式有了一些变化。 下面谈谈自己的一些沟通技巧&#xff0c;主要从以下几方面进行探讨。 选择合适的时间 如果找政府人员进行产品需求的调研或者产品规划确认&a…

产品经理(Product Manager)

1.产品经理 产品经理是进行产品设计和需求分析的一个职位.产品经理工作内容包含需求收集&#xff0c; 需求分析&#xff0c;需求落地&#xff0c;项目跟踪&#xff0c;项目上线&#xff0c;数据跟踪以及对业务人员进行培训&#xff0c;协助 运营、销售、客服等开展工作。如果非…

ChatGPT现在正式交给了一位华人产品经理

当人们都在讨论ChatGPT会不会让产品经理失业时&#xff0c;它却新招聘了一位产品总监或者称极客负责人。 6月1日&#xff0c;ChatGPT新任产品总监Peter Deng在Linkedin发布动态&#xff0c;宣布自己正式以“消费者产品副总裁”的身份加入了OpenAI。 他写道&#xff0c;“我很高…

产品经理用Chatgpt——(一)事前准备

用Chatgpt来设计一款产品——&#xff08;一&#xff09;事前准备 开始前先bb会 人之所以区别于其他动物&#xff0c;就在于会使用工具。工具出现的时候&#xff0c;下定决心来使用它&#xff0c;你就变成了人。说实话&#xff0c;Chatgpt刚出来的时候&#xff0c;我和朋友吐…

产品经理会被ChatGPT取代吗?

ChatGPT的信息已经铺天盖地了&#xff0c;科普类的我就不写了。 今天思考一个点&#xff0c;那就是ChatGPT会取代产品经理么&#xff1f; 最近谷歌一位工程主管认为&#xff0c;由于 ChatGPT 等技术的出现&#xff0c;编程正处于从人类工作转变为机器人工作的转折点。 在他看来…

1个Prompt框架+4个公式,讲清产品经理如何用ChatGPT让工作效率翻倍

ChatGPT的出现&#xff0c;有些人感觉害怕&#xff0c;觉得科技会代替人力&#xff1b;而有些人觉得兴奋&#xff0c;想要AI帮助提升人类的工作效率。作为产品经理&#xff0c;ChatGPT能够帮助我们做什么&#xff1f;本文作者用1个Prompt框架和4个公式&#xff0c;讲述ChatGPT是…

IntelliJ IDEA 2023.1 最新变化 【附带ChatGPT教程】

ChatGPT开源公众号&#xff1a;https://gitee.com/wy521a/astar-weixin-mp最新变化 2023.1主要更新用户体验编辑器JavaScala分析器版本控制系统构建工具运行/调试框架和技术DockerKubernetes远程开发和协作Web 开发其他 在浏览器中打开 IntelliJ IDEA 2023.1 最新变化 主要更…

AIGC:IntelliJ IDEA 神级插件( ChatGPT 团队开发)

文章目录 [toc]**一、Bito简介****二、Bito能力****三、安装Bito插件**1、打开IntelliJ IDEA编辑器&#xff0c;在菜单栏中选择“File” -> “Settings”。2、在“Settings”窗口中&#xff0c;选择“Plugins”选项卡&#xff0c;然后点击“Marketplace”按钮。3、在搜索框中…

推荐一款 IntelliJ IDEA 神级插件,由 ChatGPT 团队开发,免费使用,堪称辅助神器!

来源&#xff1a;https://blog.csdn.net/m0_64880608/article/details/130201349 什么是Bito&#xff1f; Bito是一款在IntelliJ IDEA编辑器中的插件&#xff0c;Bito插件是由ChatGPT团队开发的&#xff0c;它是ChatGPT团队为了提高开发效率而开发的一款工具。 ChatGPT团队是…

Idea的神级辅助插件-Bito-ChatGPT

最近被一款Idea的辅助神器协助Coding&#xff0c;让我都开始害怕我的程序员的活会不会就这样被替代了。现在给大家介绍这款神器Bito-ChatGPT&#xff0c;它能让开发人员轻松编写代码、理解语法、编写测试用例、解释代码、注释代码、检查安全性&#xff0c;甚至解释高级概念。 1…

介绍一款idea神级插件【Bito-ChatGPT】而且免费!

什么是Bito&#xff1f; Bito是一款在IntelliJ IDEA编辑器中的插件&#xff0c;Bito插件是由ChatGPT团队开发的&#xff0c;它是ChatGPT团队为了提高开发效率而开发的一款工具。ChatGPT团队是一支专注于自然语言处理技术的团队&#xff0c;他们开发了一款基于GPT的自然语言处理…

由 ChatGPT 团队开发,堪称辅助神器!IntelliJ IDEA 神级插件

什么是Bito&#xff1f; 为什么要使用Bito&#xff1f; 如何安装Bito插件 如何使用Bito插件 什么是Bito&#xff1f; Bito是一款由ChatGPT团队开发的IntelliJ IDEA编辑器插件&#xff0c;旨在提高开发人员的工作效率。此插件强大之处在于它不仅可以帮助开发人员更快地提交…