原生JS实现随机点名项目

核心思想

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

所用知识

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

技术扩展

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

效果

 

代码如下

• html:

 

    <div class="container">
        <section class="demo">
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
        <section class="students"><ul></ul></section>
        <section class="buttonlist">
            <ul>
                <li><button type="button">随机选一个</button></li>
                <li><button type="button">随机选两个</button></li>
                <li><button type="button">随机选三个</button></li>
            </ul>
        </section>
    </div>

• css:

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        body {
            width: 100%;
            height: 100%;
            background: url("images/bg.jpg") no-repeat;
            background-size: cover;
        }
        button {
            border: none;
            background-color: transparent;
            color: #fff;
            font-size: 20px;
        }
        .container {
            width: 1200px;
            height: 700px;
            margin: 10px auto;
        }
        .container .demo, .container .buttonlist {
            width: inherit;
            height: 25%;
        }
        .container .students {
            width: inherit;
            height: 50%;
        }
        .container .students li {
            margin-right: 50px;
            margin-bottom: 30px;
            text-align: center;
            border-radius: 10px;
            font-size: 20px;
            font-weight: bold;
        }
        .container .students li:nth-child(5n) {
            margin-right: 0;
        }
        .container .buttonlist li button {
            float: left;
            width: 200px;
            height: 60px;
            background-color: #4caf5085;
            margin-right: 150px;
            text-align: center;
            line-height: 60px;
            border-radius: 10px;
            margin-top: 50px;
            font-weight: bold;
        }
        .container .buttonlist li button:hover {
            background-color: #4caf50;
        }
        .container .buttonlist li:nth-child(1) {
            margin-left: 150px;
        }
        .container .demo li {
            width: 200px;
            height: 150px;
            background-color: #4caf5085;
            float: left;
            margin-right: 150px;
            border-radius: 50%;
            margin-top: 10px;
            line-height: 150px;
            font-weight: bold;
            color: #fff;
            font-size: 60px;
            text-align: center;
        }
        .container .demo li:first-child {
            margin-left: 150px;
        }
    </style>

• javascript:

<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);