简单实现概率抽奖问题

简单实现概率抽奖问题

主要思路：

1、随机生成一个100内的随机数
2、根据100区间来划分百分比（例如百分之五概率：是随机数为0——5的时候满足）
3、构造对象来定义奖品数量，设置一个变量count，当count == 0时，就不再执行该段代码。

代码

css

body

<div id="lottery">
        <button id="on">点击抽奖</button>
        <ul id="prize">
            <li>冰箱</li>
            <li>洗衣机</li>
            <li>空调</li>
            <li>电饭煲</li>
            <li>高压锅</li>
            <li>电视</li>
            <li>饮水机</li>
            <li>砧板</li>
            <li>洗衣液</li>
            <li>谢谢惠顾</li>
        </ul>
        <p id="text"></p>
    </div>

js

  <script>
        function Pirzes(name, qty, pr) {
            this.name = name;
            this.qty = qty;
            this.pr = pr;
        }
        var pirze1 = new Pirzes("冰箱", 10, 0.1);
        var pirze2 = new Pirzes("洗衣机", 20, 0.2);
        var pirze3 = new Pirzes("空调", 5, 0.05);
        var pirze4 = new Pirzes("电饭煲", 30, 0.3);
        var pirze5 = new Pirzes("高压锅", 10, 0.1);
        var pirze6 = new Pirzes("电视", 5, 0.05);
        var pirze7 = new Pirzes("饮水机", 4, 0.04);
        var pirze8 = new Pirzes("砧板", 6, 0.06);
        var pirze9 = new Pirzes("洗衣液", 5, 0.05);
        console.log(pirze1)

        // let item = document.getElementsByClassName("item");
        let list = document.getElementsByTagName("li");
        console.log(list);
        document.getElementById("on").onclick = function () {
            //清除之前获奖样式属性
            // for(var i in list){
            //     list[i].style.background = "darkgray";
            //     list[i].style.color = "rgb(68, 65, 65)";
            // }
            //获取100之内的任意一个整数；
            var n1 = Math.round(Math.random() * 100);
            var count = 1;
            if (n1 >= 0 && n1 < 10) {
                // 抽中冰箱
                if(count)
                {
                    if (pirze1.qty > 0) {
                    list[0].style.background = "brown";
                    list[0].style.color = "rgb(221, 175, 49)";
                    pirze1.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze1.pr + "的" + pirze1.name + ",还有" +
                        pirze1.qty + "台";
                } else {
                    count = 0;
                }

                }
                
            } else if (n1 >= 10 && n1 < 30) {
                // 抽中洗衣机
                if(count)
                {
                    if (pirze2.qty > 0) {
                    list[1].style.background = "brown";
                    list[1].style.color = "rgb(221, 175, 49)";
                    pirze2.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze2.pr + "的" + pirze2.name + ",还有" +
                        pirze2.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else if (n1 >= 30 && n1 < 35) {
                // 抽中空调
                if(count)
                {
                    if (pirze3.qty > 0) {
                    list[2].style.background = "brown";
                    list[2].style.color = "rgb(221, 175, 49)";
                    pirze3.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze3.pr + "的" + pirze3.name + ",还有" +
                        pirze3.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else if (n1 >= 35 && n1 < 65) {
                // 抽中电饭煲
                if(count)
                {
                    if (pirze4.qty > 0) {
                    list[3].style.background = "brown";
                    list[3].style.color = "rgb(221, 175, 49)";
                    pirze4.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze4.pr + "的" + pirze4.name + ",还有" +
                        pirze4.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else if (n1 >= 65 && n1 < 75) {
                // 抽中高压锅
                if(count)
                {
                    if (pirze5.qty > 0) {
                    list[4].style.background = "brown";
                    list[4].style.color = "rgb(221, 175, 49)";
                    pirze5.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze5.pr + "的" + pirze5.name + ",还有" +
                        pirze5.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else if (n1 >= 75 && n1 < 80) {
                // 抽中电视
                if(count)
                {
                    if (pirze6.qty >0) {
                    list[5].style.background = "brown";
                    list[5].style.color = "rgb(221, 175, 49)";
                    pirze6.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze6.pr + "的" + pirze6.name + ",还有" +
                        pirze6.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else if (n1 >= 80 && n1 < 84) {
                // 饮水机
                if(count)
                {
                    if (pirze7.qty > 0) {
                    list[6].style.background = "brown";
                    list[6].style.color = "rgb(221, 175, 49)";
                    pirze7.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze7.pr + "的" + pirze7.name + ",还有" +
                        pirze7.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else if (n1 >= 84 && n1 < 90) {
                // 抽中砧板
                if(count)
                {
                    if (pirze8.qty > 0) {
                    list[7].style.background = "brown";
                    list[7].style.color = "rgb(221, 175, 49)";
                    pirze8.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze8.pr + "的" + pirze8.name + ",还有" +
                        pirze8.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else if (n1 >= 90 && n1 < 95) {
                // 抽中洗衣液
                if(count)
                {
                    if (pirze9.qty > 0) {
                    list[8].style.background = "brown";
                    list[8].style.color = "rgb(221, 175, 49)";
                    pirze9.qty--;
                    document.getElementById("text").innerHTML = "恭喜抽中几率为" + pirze9.pr + "的" + pirze9.name + ",还有" +
                        pirze9.qty + "台";
                } else {
                    count = 0;
                }
                }
                
            } else {
                // 谢谢惠顾
                list[9].style.background = "brown";
                list[9].style.color = "rgb(221, 175, 49)";
                document.getElementById("text").innerHTML = "抱歉没有中奖";
            }

        }
    </script>`   

(以上js中部分对css属性修改的部分属于样式布局部分，由于每次点击抽奖后，之前抽中样式属性清除问题没能解决，就没放代码。目前代码能实现无样式简单抽奖)

运行结果