master

分支 (1)

管理

管理

master

js-learning-process
/
抽奖案例.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .wrp{
           width: 840px;
           height: 420px;
           background: url(./image/02.jpg) no-repeat center / cover;
           padding: 100px 250px;
           box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="wrp">
        <strong>年会抽奖</strong>
        <h1>一等奖：<span id="one">???</span></h1>
        <h2>二等奖：<span id="two">???</span></h2>
        <h3>三等奖：<span id="three">???</span></h3>
    </div>
    <script>
        const personArr=['周杰伦','刘德华','Pink','张学友','周星驰']
        //一等奖
        const random1=Math.floor(Math.random()*personArr.length)
        // console.log(personArr[random])  //随机获取一个名字
        //获取one元素
        const one =document.querySelector('#one')
        one.innerHTML=personArr[random1]
        personArr.splice(random1,1)    //删除随机获取的名字
        console.log(personArr);
        //二等奖
        const random2=Math.floor(Math.random()*personArr.length)
        // console.log(personArr[random])  //随机获取一个名字
        //获取one元素
        const two =document.querySelector('#two')
        two.innerHTML=personArr[random2]
        personArr.splice(random2,1)    //删除随机获取的名字
        console.log(personArr);
        //三等奖
        const random3=Math.floor(Math.random()*personArr.length)
        // console.log(personArr[random])  //随机获取一个名字
        //获取one元素
        const three =document.querySelector('#three')
        three.innerHTML=personArr[random3]
        personArr.splice(random3,1)    //删除随机获取的名字
        console.log(personArr);
    </script>
</body>
</html>