js 实现双色球
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li{
list-style: none;
width: 50px;
height: 50px;
border-radius: 50%;
text-align: center;
line-height: 50px;
color: white;
border: white solid 5px;
margin: 5px 5px;
}
.selected{
border: mediumspringgreen solid 5px;
}
li:hover{
cursor: :pointer;
}
#redbox,#bluebox,#selectBox{
display:flex;
flex-direction: row;
flex-wrap:wrap;
}
.red{
background: pink;
}
.blue{
background: skyblue;
}
</style>
</head>
<body>
<div id="redbox">
</div>
<div id="bluebox">
</div>
<div id="selectBox">
</div>
<script src="./doublecolor.js"></script>
<script>
let boll = new DoubleColorBoll();
</script>
</body>
</html>js代码
//Math.random()产生0-1之间的随机小数
//Math.ceil()向上取整
//Math.floor()向下取整
//双色球游戏类
class DoubleColorBoll {
//构造函数 allread表示当前中奖的号码 如果没有参入该参数 那么中奖号码默认是"1-2-3-4-5-6-7"
//num 产生多少注双色球
constructor(allread = "1-2-3-4-5-6-7", num) {
this.init()
}
//初始化页面
init() {
let node;
for (let i = 1; i < 34; i++) {
node = this.createBoll("red", i)
node.addEventListener("click", this.redclick(this))
//将产生的节点存入页面对应的位置
document.getElementById("redbox").append(node);
}
for (let i = 1; i < 17; i++) {
node = this.createBoll("blue", i)
node.addEventListener("click", this.blueclick(this))
document.getElementById("bluebox").append(node);
}
}
//红球的点击事件
redclick(_this) {
function redc() {
//如果当前被点击的元素没有被选中的样式
if (this.className.indexOf("selected") == -1) {
//获取所有被选中的红球个数
let len = document.querySelectorAll("#redbox>.selected").length;
//如果红球个数大于等于6 则阻断程序
if (len >= 6) { return; }
//给红球添加被选中的样式
this.className = "red selected";
_this.saveBoll(this,1);
} else {
//取消当前被点击的红球的被选中样式
this.className = "red";
_this.saveBoll(this,2);
}
}
return redc;
}
//蓝球点击事件
blueclick(_this) {
//首先说去蓝色容器中被选中的元素
function bluec() {
let node = document.querySelector("#bluebox>.selected")
if (node) node.className = "blue";
this.className = "blue selected"
//将选中球存入容器
_this.saveBoll(this,3);
}
return bluec;
}
//将选定的双色球存入选定容器中
saveBoll(obj,type){
if(type === 1){
let node = document.getElementById("selectBox");
node.prepend(obj.cloneNode(true))
let nodes =document.querySelectorAll("#selectBox>.red"),temp,newArr = [];
for(let i of nodes){
newArr.push(parseInt(i.innerText))
}
for(let i=0;i<newArr.length -1;i++){
for(let j=0;j<newArr.length -i -1;j++){
if(newArr[j] > newArr[j+1]){
temp =newArr[j];
newArr[j] =newArr[j+1];
newArr[j+1] =temp;
}
}
}
for(let i in newArr){
nodes[i].innerText =newArr[i];
}
}else if(type ===2){
let nodes =document.querySelectorAll("#selectBox>.red");
for(let n of nodes){
if(n.innerText ==obj.innerText){
n.remove();
break;
}
}
}else if(type ===3){
let node =document.querySelectorAll("#selectBox>.blue");
if(node.length>=1){
node[0].innerText =obj.innerText;
}else {
document.getElementById("selectBox").append(obj.cloneNode(true))
}
}
}
//产生双色球节点
createBoll(color, num) {
//创建一个li元素
let node = document.createElement("li");
//设置li标签的样式
node.className = color;
//设置li标签的文本
node.innerText = num;
return node;
}
//产生制1到定范围内的随机数 rand表示一个范围值
getRaodom(rand) {
return Math.ceil(Math.random() * rand)
}
//产生一个7个数字的一组号码 其中前6位不能重复 1-33 第七位可以跟前6位重复 1-16
getDoubleColor() {
let boll = []
for (let i = 0; i < 6; i++) {
while (true) {
let num = this.getRaodom(33)
if (boll.indexOf(num) == -1) {//产生随机数 当产生的随机数不是数组里面出现过的数字时将该随机数存入数组 并且退出循环
boll.push(num);
break;
}
}
}
boll.sort((v1, v2) => {
return v1 - v2;
})
boll[6] = this.getRaodom(16)
return boll;
}
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-05-03，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
