原生JS实现随机点名项目

朱雀 2021-12-03 10:43 209阅读 0赞

# 核心思想 #

*  随机产生规定范围内的整数，然后再产生相同范围内的整数，两者相同时，则暂停。

# 所用知识 #

*  Math.random() \* num: 产生从0到num的随机数
 *  Math.floor(): 向下取整
 *  简单的DOM操作等

# 技术扩展 #

*  扩展人数
 *  添加停止键等

# 效果 #

![1543474-20190708153228666-325678037.png][]

# 代码如下 #

*  html:
 *      1 <div class="container">
         2         <section class="demo">
         3             <ul>
         4                 <li></li>
         5                 <li></li>
         6                 <li></li>
         7             </ul>
         8         </section>
         9         <section class="students"><ul></ul></section>
        10         <section class="buttonList">
        11             <ul>
        12                 <li><button type="button">随机选一个</button></li>
        13                 <li><button type="button">随机选两个</button></li>
        14                 <li><button type="button">随机选三个</button></li>
        15             </ul>
        16         </section>
        17     </div>
    
        1 <style type="text/css">
         2         * {
         3             margin: 0;
         4             padding: 0;
         5         }
         6         ul {
         7             list-style: none;
         8         }
         9         body {
        10             width: 100%;
        11             height: 100%;
        12             background: url("images/bg.jpg") no-repeat;
        13             background-size: cover;
        14         }
        15         button {
        16             border: none;
        17             background-color: transparent;
        18             color: #fff;
        19             font-size: 20px;
        20         }
        21         .container {
        22             width: 1200px;
        23             height: 700px;
        24             margin: 10px auto;
        25         }
        26         .container .demo, .container .buttonList {
        27             width: inherit;
        28             height: 25%;
        29         }
        30         .container .students {
        31             width: inherit;
        32             height: 50%;
        33         }
        34         .container .students li {
        35             margin-right: 50px;
        36             margin-bottom: 30px;
        37             text-align: center;
        38             border-radius: 10px;
        39             font-size: 20px;
        40             font-weight: bold;
        41         }
        42         .container .students li:nth-child(5n) {
        43             margin-right: 0;
        44         }
        45         .container .buttonList li button {
        46             float: left;
        47             width: 200px;
        48             height: 60px;
        49             background-color: #4caf5085;
        50             margin-right: 150px;
        51             text-align: center;
        52             line-height: 60px;
        53             border-radius: 10px;
        54             margin-top: 50px;
        55             font-weight: bold;
        56         }
        57         .container .buttonList li button:hover {
        58             background-color: #4caf50;
        59         }
        60         .container .buttonList li:nth-child(1) {
        61             margin-left: 150px;
        62         }
        63         .container .demo li {
        64             width: 200px;
        65             height: 150px;
        66             background-color: #4caf5085;
        67             float: left;
        68             margin-right: 150px;
        69             border-radius: 50%;
        70             margin-top: 10px;
        71             line-height: 150px;
        72             font-weight: bold;
        73             color: #fff;
        74             font-size: 60px;
        75             text-align: center;
        76         }
        77         .container .demo li:first-child {
        78             margin-left: 150px;
        79         }
        80     </style>
    
        <script type="text/javascript">
                var stuArray = ["小方", "小田", "小明", "小红", "小吕", "小于", "小美", "小绿", "李华", "小李", "小胡",
                    "小夏", "小徐", "小小", "小吴", "小陈", "小狗", "小许", "小熊", "小新"];
                var stuList = document.querySelector(".students").querySelector("ul");
                var buttonList = document.querySelectorAll("button");
                var demoList = document.querySelector(".demo").querySelectorAll("li");
                
        
                for (var i = 0; i < stuArray.length; i++) {
                    var li = document.createElement("li");
                    stuList.appendChild(li);
                    li.innerHTML = stuArray[i];
                    li.style.cssFloat = "left";
                    li.style.width = 200 + "px";
                    li.style.height = 60 + "px";
                    li.style.backgroundColor = "#4caf5085";
                    li.style.color = "#fff";
                    li.style.lineHeight = 60 + "px";
                }
        
                var stuArrayList = stuList.querySelectorAll("li");
        
                function chooseOne () {
                    for (var i = 0; i < stuArrayList.length; i++) {
                        stuArrayList[i].style.background = "#4caf5085";
                    }
                    for (var i = 0; i < demoList.length; i++) {
                        demoList[i].innerHTML = "";
                    }
                    var interId = setInterval(function () {
                        var x = Math.floor(Math.random() * stuArray.length);
                        stuArrayList[x].style.backgroundColor = "green";
                        demoList[1].innerHTML = stuArrayList[x].innerHTML;
                        var timeId = setTimeout(function () {
                            stuArrayList[x].style.backgroundColor = "#4caf5085";
                        }, 100);
                        var y = Math.floor(Math.random() * stuArray.length);
                        if (y == x) {
                            clearTimeout(timeId);
                            clearInterval(interId);
                            stuArrayList[y].style.backgroundColor = "green";
                        }
                    }, 100);
                }
        
                function chooseTwo () {
                    for (var i = 0; i < stuArrayList.length; i++) {
                        stuArrayList[i].style.background = "#4caf5085";
                    }
                    for (var i = 0; i < demoList.length; i++) {
                        demoList[i].innerHTML = "";
                    }
                    var interId = setInterval(function () {
                        do {
                            var x1 = Math.floor(Math.random() * stuArray.length);
                            var x2 = Math.floor(Math.random() * stuArray.length);
                        } while (x1 == x2);
                        stuArrayList[x1].style.backgroundColor = "green";
                        stuArrayList[x2].style.backgroundColor = "green";
                        demoList[0].innerHTML = stuArrayList[x1].innerHTML;
                        demoList[2].innerHTML = stuArrayList[x2].innerHTML;
                        var timeId = setTimeout(function () {
                            stuArrayList[x1].style.backgroundColor = "#4caf5085";
                            stuArrayList[x2].style.backgroundColor = "#4caf5085";
                        }, 100);
                        var y1 = Math.floor(Math.random() * stuArray.length);
                        var y2 = Math.floor(Math.random() * stuArray.length);
                        if ((y1 == x1 && y2 == x2) || (y1 == x2 && y2 == x1)) {
                            clearTimeout(timeId);
                            clearInterval(interId);
                            stuArrayList[x1].style.backgroundColor = "green";
                            stuArrayList[x2].style.backgroundColor = "green";
                        }
                    }, 100);
                }
        
                function chooseThree () {
                    for (var i = 0; i < stuArrayList.length; i++) {
                        stuArrayList[i].style.background = "#4caf5085";
                    }
                    for (var i = 0; i < demoList.length; i++) {
                        demoList[i].innerHTML = "";
                    }
                    var interId = setInterval(function () {
                        do {
                            var x1 = Math.floor(Math.random() * stuArray.length);
                            var x2 = Math.floor(Math.random() * stuArray.length);
                            var x3 = Math.floor(Math.random() * stuArray.length);
                        } while (x1 == x2 || x2 == x3 || x1 == x3);
                        stuArrayList[x1].style.backgroundColor = "green";
                        stuArrayList[x2].style.backgroundColor = "green";
                        stuArrayList[x3].style.backgroundColor = "green";
                        demoList[0].innerHTML = stuArrayList[x1].innerHTML;
                        demoList[1].innerHTML = stuArrayList[x2].innerHTML;
                        demoList[2].innerHTML = stuArrayList[x3].innerHTML;
                        var timeId = setTimeout(function () {
                            stuArrayList[x1].style.backgroundColor = "#4caf5085";
                            stuArrayList[x2].style.backgroundColor = "#4caf5085";
                            stuArrayList[x3].style.backgroundColor = "#4caf5085";
                        }, 100);
                        var y1 = Math.floor(Math.random() * stuArray.length);
                        var y2 = Math.floor(Math.random() * stuArray.length);
                        var y3 = Math.floor(Math.random() * stuArray.length);
                        if ((x1 == y1 && x2 == y2) || (x1 == y2 && x2 == y1)) {
                            clearTimeout(timeId);
                            clearInterval(interId);
                            stuArrayList[x1].style.backgroundColor = "green";
                            stuArrayList[x2].style.backgroundColor = "green";
                            stuArrayList[x3].style.backgroundColor = "green";
                        }
                    }, 100);
                }
        
                buttonList[0].addEventListener("click", function () {chooseOne()}, false);
                buttonList[1].addEventListener("click", function () {chooseTwo()}, false);
                buttonList[2].addEventListener("click", function () {chooseThree()}, false);

转载于:https://www.cnblogs.com/yuer20180726/p/11151561.html

[1543474-20190708153228666-325678037.png]: /images/20211203/32ef85d08bbc4490a6b00b73942a1f7f.png