在JS中如何实现双色球功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了在JS中如何实现双色球功能,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含2809字,纯文字阅读大概需要5分钟。
内容图文
![在JS中如何实现双色球功能](/upload/InfoBanner/zyjiaocheng/288/93c611af6831402aadb012bae1a7e13c.jpg)
本文实例讲述了原生JS实现的双色球功能。分享给大家供大家参考,具体如下:
先来看看运行效果:
具体代码如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.gxlcms.com - JS双色球</title> <style> #datePicker { width: 100px; height: 30px; line-height: 30px;; border-radius: 10px; border: 1px solid #5098a5; text-align: center; cursor: pointer; } #number { height: 100px; float: left; margin-top: 20px; } #number span { display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 30px; border: 2px solid red; color: red; font-weight: bold; float: left; margin-top: 15px; margin-right: 10px; } #buleBall { height: 100px; margin-top: 21px; float: left; } #buleBall span { display: block; width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 30px; background-color: blue; color: white; font-weight: bold; float: left; margin-top: 15px; margin-right: 10px; } </style> </head> <body> <p class="container"> <p style="overflow:hidden;"> <p id="number"></p> <p id="buleBall"></p> </p> <p id="datePicker">点击按钮</p> </p> <script> //循环产生1-36数字 var arr = []; function num() { for (var i = 1; i < 34; i++) { arr.push(i); } confusion(); } var arrty= new Array(arr); //伪随机方法 function confusion(){ for(var i=1;i<34;i++){ arrty[i]=i; } arrty.sort(function(){ return 0.5 - Math.random() }); // var str=arrty.join(); arrAy() } // 将随机获取的数据添加到页面上去 function arrAy() { var array = getRandomArrayElements(arrty, 6); array.sort(function (a, b) {//数组排序 return a > b ? 1 : -1; }); var htm = ""; for (var i = 0; i < array.length; i++) { htm += '<span>' + array[i] + '</span>'; } document.getElementById('number').innerHTML = htm; } // 从1-36中随机取出其中6个参数 function getRandomArrayElements(arr, count) { var shuffled = arr.slice(0), i = arr.length, min = i - count, temp, index; while (i-- > min) { index = Math.floor((i + 1) * Math.random()); temp = shuffled[index]; shuffled[index] = shuffled[i]; shuffled[i] = temp; } return shuffled.slice(min); } //随机获取一个蓝球的方法 function blueBall() { var html = ""; var array = []; for (var k = 1; k < 17; k++) { array.push(k); } //随机生成蓝色球的算法 var n = Math.floor(Math.random() * array.length); if (n != "0") {//去除获取到的篮球数为0的 html += '<span>' + n + '</span>'; } document.getElementById('buleBall').innerHTML = html; } window.onload = function () { var datePicker = document.getElementById("datePicker"); datePicker.onclick = function () { num();//点击按钮生成1-33的数字方法 blueBall();//点击后获取随机蓝球的方法 }; } </script> </body> </html>
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
在webpack中如何使用ECharts?
JavaScript中Object基础内部方法图(图文教程)
使用axios封装fetch方法和调用
以上就是在JS中如何实现双色球功能的详细内容,更多请关注Gxl网其它相关文章!
内容总结
以上是互联网集市为您收集整理的在JS中如何实现双色球功能全部内容,希望文章能够帮你解决在JS中如何实现双色球功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。