JS实现双色球()

【业务逻辑】: 

               1、双色球分为6个红色球和1个蓝色球,一个开始按钮和一个结束按钮。

               2、红色球1-33的随机数,蓝色球1-16的随机数,点击开始按钮随机滚动随机数,点击结束显示随机数。

 

 【面向对象】：Oriented Object  （Analysis Design分析设计）       

                  把解决问的方法和步骤中 ，涉及到的属性和方法，封装一个构造函数（对象） ，即对象的抽象。

【面向过程】：

                 把解决问的方法和步骤，一步一步写出来（JS代码）

双色球面向对象的写法 就需要将数字、按钮以及双色球分为类、每个类实例化一个对象,通过传参拿到值。

 

 1、【球类】

 先class一个函数,将属性和方法封装到calss里面,这里我们需要传两个参数(尺寸、背景色)。生成红球和篮球（个数根据new的次数）可以页面初始化话

 2、【数字类】

 同理也先class一个函数,将属性和方法封装到calss里面,数字是随机出现的,根据双色球的规则,红色球1-33的随机数,篮色球1-16的随机数,随机数可以通过XXX得到

 因为得到的是不重复的随机数,所以的通过集合去重,红球的个数是6个,可以判断集合的长度是否等于6,等于6就将它转数组拿到这6个,并通过遍历渲染红色,最后蓝色球就

 直接添加随机数渲染颜色就ok,面向对象的写法就可以通过实例化对象去添加颜色。

 3、【按钮类 】

 1、点击开始按钮调用时间函数随机滚动随机数

 2、点击结束停止时间函数显示随机数。

双色球面向对象写法 代码如下:

一、【HTML代码】：                         

                          <!-- 添加双色球 -->

                         <article></article>

                         <!-- 添加按钮 -->

                        <section></section>

二、【CSS代码】:                           

article{

    display: flex;

}

article>div{

    margin-right: 30px;

}

三、【JS代码】

//随机函数

function getRandomNum(min, max = 0) {

    min > max ? [min, max] = [max, min] : "";

    return (parseInt(Math.random() * max - min + 1)) + min;

}

// 球类

let artEle = document.getElementsByTagName("article")[0];

console.log(artEle);

class boll {

    //构造器

    constructor(width, bac, num) {

        this.width = width;

        this.height = width;

        this.bac = bac;

        this.num = num;

        //创建双色球

        this.divEle = document.createElement("div");

        this.init();

    }

    //初始化必须加this

    init() {

        this.render();

    }

    //初始化页面,添加双色起样式

    render() {

        Object.assign(this.divEle.style, {

            width: this.width + "px",

            height: this.width + "px",

            backgroundColor: this.bac,

            num: this.num,

            color: "balck",

            borderRadius: "50%",

            textAlign: "center",

            lineHeight: 100 + "px",

            fontSize: 35 + "px"

        })

        //添加到页面上

        // console.log(this.num);

        this.divEle.innerHTML = this.num;

        artEle.appendChild(this.divEle);

    }

}

//初始化页面,个数根据new的次数决定

new boll("100", "red", 0);

new boll("100", "red", 0);

new boll("100", "red", 0);

new boll("100", "red", 0);

new boll("100", "red", 0);

new boll("100", "red", 0);

new boll("100", "blue", 0);

//数字类

class number {

    //数字只需要随机,没有样式添加或者修改,就不需要constructor放属性

    suiji() {

        //清空

        artEle.innerHTML = "";

        //创建空数组接收

        let arr = [];

        //声明空集合用于去重

        let arr2 = new Set();

        //设置一个判断条件

        let temp = true;

        // console.log(temp);

        while (temp) {

            arr2.add(getRandomNum(1, 33));

            if (arr2.size == 6) {

                arr = [...arr2];

                temp = false;

            }

        }

        //将随机出来的6个球添加红色

        console.log(arr);

        for (let item of arr) {

            new boll("100", "red", item);

        }

        //将随机出来的1个球添加蓝色

        new boll("100", "blue", getRandomNum(1, 16));

    }

}

let Number = new number();

Number.suiji();、

// 按钮类

//创建时间变量,用于停止时间函数

let time = "";

let secEle = document.getElementsByTagName("section")[0];

console.log(secEle);

//创建时间变量,用于停止时间函数

class anNiu {

    //给input按钮传Vaule值

    constructor(vaule) {

        this.vaule = vaule;

        //创建input按钮

        this.inEle = document.createElement("input");

        this.init();

    }

    //初始化

    init() {

        this.render();

        this.tianJia();

    }

    //修改input类型

    render() {

        //input类型设置为button

        this.inEle.setAttribute("type", "button");

        //修改vaule值

        this.inEle.setAttribute("value", this.vaule);

        secEle.appendChild(this.inEle);

    }

    //添加事件

    tianJia() {

        //通过vaule值给开始添加点击事件

        if (this.vaule == "开始") {

            console.log(`aa`);

            this.inEle.addEventListener("click", this.kaishi);

        }

        //通过vaule值给结束添加点击事件

        if (this.vaule == "结束") {

            this.inEle.addEventListener("click", this.jieshu);

        }

    }

    kaishi() {

        //每0.1秒调用一次函数随机。

        time = setInterval(Number.suiji, 100);

        let inpEle=document.querySelectorAll("input");

        //禁用(避免调用多次时间函数)

        inpEle[0].disabled = true;

        inpEle[1].disabled = false;

    }

    jieshu() {

        //停止时间函数

        clearInterval(time);

        let inpEle=document.querySelectorAll("input");

        //禁用

        inpEle[0].disabled = false;

        inpEle[1].disabled = true;

    }

}

new anNiu("开始");

new anNiu("结束");