php大乐透,JavaScript实现大乐透号码生成的实例分析
这个“大乐透号码生成器”纯前端开发,涉及HTML、JS、CSS。为了简单起见,把所有代码写到了一个html文件中,这样的好处就是可以直接用浏览器打开这个文件,当然实际工作中最好把他们放在不同的文件。整个区域放在一个大的p标签中,表现为一个矩形区域,并通过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中。//插入排序
function bubbleSort(array){
var len = array.length;
for (var i = 0; i < len; i++) {
for (var j = i; j > 0 && array[j]
var swap = array[j]; //第二个for循环使元素比较并移动到合适位置
array[j] = array[j-1];
array[j-1] = swap;
}
} return array;
}
其余的JS以及HTML、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;}
大乐透号码生成器
生成组数:
生成 1 组号码
生成 2 组号码
生成 3 组号码
生成 4 组号码
生成 5 组号码
随机号码1:
随机号码2:
随机号码3:
随机号码4:
随机号码5:
排序后码1:
排序后码2:
排序后码3:
排序后码4:
排序后码5:
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
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
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]
var swap = array[j]; //第二个for循环使元素比较并移动到合适位置
array[j] = array[j-1];
array[j-1] = swap;
}
} return array;
}
浏览器打开效果:
php大乐透,JavaScript实现大乐透号码生成的实例分析相关推荐
- html在线encode,javascript另类方法实现htmlencode()与htmldecode()函数实例分析
本文实例讲述了javascript另类方法实现htmlencode()与htmldecode()函数.分享给大家供大家参考,具体如下: 最常见的做法是采用正则表达式替换的方法,将特殊字符如 < ...
- 优朋普乐大数据_优朋普乐邵以丁:用大数据全面洞察需求
优朋普乐创始人.董事长兼CEO邵以丁回顾优朋普乐十二年发展历程,数次强调是多年来积累的大数据给优朋普乐的业务拓展指明了方向,有的放矢的决策让企业对未来发展充满信心. 大数据为及时发现甚至准确预测消费需 ...
- 北京大学工业工程系主任侍乐媛:工业大数据支撑企业智能决策
5月5日,"2017中国工业大数据大会·钱塘峰会"在杭州国际博览中心举办.本届峰会以"数据驱动创新 融合引领变革"为主题,围绕工业大数据展开分享与交流.北京大学 ...
- JavaScript 下载大文件解决方案(Blob+OjbectURL)
JavaScript 下载大文件解决方案(Blob+OjbectURL) 参考文章: (1)JavaScript 下载大文件解决方案(Blob+OjbectURL) (2)https://www.cn ...
- 原生态纯JavaScript 100大技巧大收集---你值得拥有
原生态纯JavaScript 100大技巧大收集---你值得拥有 1.原生JavaScript实现字符串长度截取 function cutstr(str, len) {var temp;var ico ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析(幸运大转盘抽奖) javascript中的typeof和类型判断...
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.25. ...
- DIV布局——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 文章目录 HTML5期末大作业:化妆品商城网站设计--化妆品 ...
- HTML5期末大作业:化妆品商城网站设计——化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:化妆品商城网站设计--化妆品商城-功能齐全(43页) HTML+CSS+JavaScript web大作业 静态网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...
- HTML5期末大作业:棋牌游戏网站设计——棋牌游戏(8页) HTML+CSS+JavaScript web大作业 静态网页
HTML5期末大作业:棋牌游戏网站设计--棋牌游戏(8页) HTML+CSS+JavaScript web大作业 静态网页 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游. 电商. 宠物 ...
最新文章
- 不是我吹,这个idea插件你真没用过!
- 使用git进行源代码管理
- Java基础知识强化之IO流笔记32:转换流之OutputStreamWriter的使用
- 从草根到百万年薪程序员的十年风雨之路,吊打面试官系列!
- 7. Deep Learning From Scratch
- 左室短轴切面_【图】短轴超声切面 - 心脏解剖学 - 天山医学院
- 剪纸风格的美妆海报设计,你试过吗?
- nlogn求最长不上升子序列
- 【HBase学习】Apache HBase项目简介
- 运动会管理系统的需求调研会纪要
- 与班尼特·胡迪一起攻破浮空城 (HZNU-2264)
- android 闪屏动态界面,Android实现闪屏欢迎界面
- 同时安装 TensorflowPytorch
- 八、血条的制作和boss敌人的产生(雷霆战机)
- 从键盘上输入两个字符串,将两个字符串首尾相连接后,再输出新的字符串(c语言)
- Apache中RewriteRule和RewriteCond规则参数的详细介绍
- centos7中kubeadm方式搭建k8s集群(crio+calico)(k8s v1.21.0)
- 消费互联网、产业互联网、工业互联网、能源互联网的关键区别是什么?智慧城市、智慧园区、智慧交通、智慧水务、智能电网、智慧工厂中都需要的关键技术是什么?
- R语言二手车汽车销售数据可视化探索:预处理、平滑密度图、地理空间可视化(带自测题)
- android用户苹果手表,Android分析苹果手表成功原因