前端js经典小抽奖*点名demo

被公司点名？迟到啦？

高大上抽奖？

请看下面:

效果图

 代码来了：

html5

<div class="bigBox">
    <ul class="box">
        <!-- 根据人数渲染 <li> </li>  -->
        </ul>
        <!-- 设置开始 停止 中奖者 -->
        <div class="btn">
            <button class="start">开始</button>
            <button class="stop">停止</button>
            <div class="choose">
                <p class="ni">恭喜你中将了！！！</p>
                <span class="name"></span>
            </div>
        </div >
</div>

css部分

<style>
        
        ul>li{list-style:none;}
        .bigBox{
            width: 1000px;
            height: 500px;
            margin: 20px auto ;
            position: relative;
        }
        .bigBox>ul{
            width: 100%;
            height: 500px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            flex-wrap: wrap;
            border-bottom: 1px solid black;
            padding: 12px;
            box-sizing: border-box;
        }
          /* 设置人员所在元素样式 */  
        .bigBox>ul>li{
            width: 80px;
            height: 40px;
            border-radius: 15px;
            border: 1px solid orange;
            background-color: white;
            font-size: 20px;
            text-align: center;
            line-height: 40px;
        }
            /* 为了实现炫一点儿的效果 */
        .bigBox>ul>li.active{
            background-color: red;
            font-weight: bolder;
        }
        .btn{
            width: 250px;
            height: 200px;
            margin: 10px auto;
            border: 1px solid burlywood;
            background-color: pink;
        }
        button{
        width: 100px;
        border-radius: 15px;
        cursor: pointer;
        margin-top: 10px;
        margin-left: 70px;
        font-size: 20px;
        }
        .choose{
            width: 248px;
            height: 90px;
            border-top: 1px solid burlywood;
            text-align: center;
            margin-top: 10px;
            position: relative;
        }
        .ni{
            font-size: 25px;
            margin-top: 10px;
            margin-bottom: 5px;
        }
        /* 这里是中奖者呦 */
        .name{
            font-size: 40px;
            color: red;
            font-weight: bolder;
            width: 200px;
            height: 50px;
            position: absolute;
            left: 25px;
        }
    </style>

js部分：

<script>
    // 获取元素
    let box=document.querySelector('.box')
    let start=document.querySelector('.start')
    let stop=document.querySelector('.stop')
    let li=document.getElementsByTagName('li')
    // 这里是参与者
    let arr=[
        'a','b','c','d','e','f','g','我','你','他'
    ]
    // 将数组插入li里
    let str=''
    for (let i=0;i<arr.length;i++) {
        str+="<li>" + arr[i] + "</li>";
    }
    // 放到box里
    box.innerHTML=str;
    //开始喽
    let timer=null
    // 点击事件
    start.onclick=function(){
        // 简单封装一个随机数，为了找中奖者
        function randomNum(min, max) {
        var a = Math.min(min, max)
        var b = Math.max(min, max)
        var res = Math.floor(Math.random() * (b - a + 1)) + a
        return res
        }
        // 封装一个随机颜色，为了实现炫酷效果
        function randomColor() {
            var color = '#'
            for (var i = 0; i < 6; i++) {
                color += randomNum(0, 15).toString(16)
            }
            return color
        }
        // 每次点击前 清除定时器
        clearInterval(timer)
        timer=setInterval(function(){
            // 循环
            let i=Math.floor(Math.random()*arr.length)
            for(let j=0;j<li.length;j++){
                li[j].className=""
            }
            li[i].className="active"
            // 边框变色
            box.style.border= `20px solid ${randomColor()}`
        },0.00001)
    }
    //停止
    stop.onclick=function(){
        clearInterval(timer)
        // 找到那个幸运者
        let you=document.querySelector('.active')
        let name=you.innerText
        let lucky=document.querySelector('.name')
        lucky.innerText=name
    }
</script>