js 实现双色球

最新推荐文章于 2023-11-13 22:14:19 发布

姜姜姜姜179

最新推荐文章于 2023-11-13 22:14:19 发布

阅读量1.9k

点赞数 2

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_63649124/article/details/124562577

版权

前端代码

<!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;
    }
}

姜姜姜姜179

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
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:
复制链接

扫一扫

js 实现双色球

“相关推荐”对你有帮助么？