豪华版点名器

2024-01-16 16:43:04
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>js随机点名豪华版-jq22.com</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        #box {
            width: 1500px;
        }

        #div1 {
            width: 200px;
            position: relative;
            margin: 0 auto;
            margin-top: 10px;
        }

        #div1 #sp {
            font-size: 20px;
        }

        #ull {
            width: 800px;
            height: 250px;
            /* background-color:#DDA0DD;
            */
            position: relative;
            margin: 0 auto;
            margin-top: 20px;
        }

        #ull li {
            list-style: none;
            width: 100px;
            height: 35px;
            border-radius: 7px;
            border: 2px solid red;
            margin: 10px 15px 0px 15px;
            float: left;
            text-align: center;
            line-height: 35px;
        }

        #div2 {
            width: 800px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            /* background-color:red;
            */
            margin-left: 30%;
        }

        #inp {
            width: 80px;
            height: 50px;
            float: left;
            margin-left: 10px;
        }

        #int {
            width: 400px;
            height: 50px;
            margin-left: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="div1">
        <span id="sp">豪华版点名器</span>
    </div>
    <ul id="ull">

    </ul>
</div>
<div id="div2">
    <input type="button" value="开始" id="inp">
    <input type="" name="" id="int">
</div>

<script>
    //获取ul
    var ull = document.getElementById('ull');
    //获取li
    var lis = ull.getElementsByTagName('li');
    //获取按钮
    var bup = document.getElementById('inp');
    //获取文本框
    var inp = document.getElementById('int');
    //获取数组
    var arr = ['肖战', '相子烨', '张艺兴', '黄子韬', '吴亦凡', '鹿晗', '李钟硕', '张翰', '张若昀', '李沁', '杨颖', '杨紫', '杨洋', '邓伦', '李易峰'];
    //定时器
    var timer = null;
    //定义变量用来存放li的长度的随机整数
    var b = 0;
    //点人名的次数
    var c = 0;
    //获取数组下标
    var index;
    //锁
    var lock = true; //true为开始点名  false为停止
    //1.实现动态点名
    //封装函数obj就是arr
    function fun() {
        //定义空字符串
        var a = '';
        //遍历
        for (var i = 0; i < arr.length; i++) {
            //将li和arr内容赋给a
            a += '<li>' + arr[i] + '</li>';
        }
        //将a赋给ul
        ull.innerHTML = a;
    }

    fun();
    //封装函数
    function fun1() {
        if (c >= 5) {
            alert('人员已满');
            //返回结束
            return;
        }
        //启动定时器
        timer = window.setInterval(function () {
            //b用来存放li的长度的随机整数
            b = Math.floor(Math.random() * lis.length);
            // console.log(b);
            //遍历
            for (var i = 0; i < lis.length; i++) {
                //li的背景颜色为默认
                lis[i].style.backgroundColor = '';
            }
            //随机获取的li标签的背景颜色为红色
            lis[b].style.backgroundColor = 'red';
        }, 100);
    }

    //输入框添加一个随机数的人名,满5个就不添加了
    function showName() {
        c++;
        if (c <= 5) {
            inp.value += lis[b].innerText + ' ';
            //从数组中删除选中的人名
            arr.splice(b, 1);
            //显示数组中的人名到页面的列表中
            fun();
        } else {
            alert('人员已满')
        }
    }

    //点击按钮
    bup.onclick = function () {
        //如果lock为true
        if (lock) {
            bup.value = '停止点名';
            //调用函数fun1
            fun1();
        } else {
            bup.value = '开始点名';
            //清除定时器
            clearInterval(timer);
            //调用
            showName();
        }
        //取反
        lock = !lock;
    }
</script>
</body>
</html>
码农公寓

相关文章
