前端代码

<!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>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 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.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.

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;
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 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.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
  • 86.
  • 87.
  • 88.
  • 89.
  • 90.
  • 91.
  • 92.
  • 93.
  • 94.
  • 95.
  • 96.
  • 97.
  • 98.
  • 99.
  • 100.
  • 101.
  • 102.
  • 103.
  • 104.
  • 105.
  • 106.
  • 107.
  • 108.
  • 109.
  • 110.
  • 111.
  • 112.
  • 113.
  • 114.
  • 115.
  • 116.
  • 117.
  • 118.
  • 119.
  • 120.
  • 121.
  • 122.
  • 123.
  • 124.
  • 125.
  • 126.
  • 127.
  • 128.
  • 129.
  • 130.
  • 131.
  • 132.
  • 133.
  • 134.
  • 135.