JavaScript抽奖【基础】

原创于 2023-06-03 21:36:49 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #开发语言 #ecmascript

本文探讨JavaScript基础在创建抽奖程序中的应用，欢迎分享优化建议。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>抽奖</title>
    <style>
        body {
            background-image: url('../1/shanghai.jpg') ;
            background-repeat: no-repeat;
        }
    </style>
</head>
<body>
    <div class="box1">一等奖：？？？</div>
    <div class="box2">二等奖：？？？</div>
    <div class="box3">三等奖：？？？</div>
    <script>
        const arr = ['小白', '小黑', '小黄', '小紫', '小兰'];
        const arr1 = [];
        function getRandom(N,M) {
            return Math.floor(Math.random() * (M - N + 1) + N);
        }
        for (let i = 0; i < 3; i++) {
            const num = getRandom(0,4-i);
            arr1.push(arr[num]);
            arr.splice(num,1);
            console.log("原数组对象："+arr);
            console.log("先数组对象"+arr1);
        }
        const box = document.querySelectorAll("div");
        for (let index = 0; index < box.length; index++) {
            if (index === 0) {
                box[index].innerHTML = `<h2>一等奖：${arr1[0]}</h2>`
            } else if (index === 1) {
                box[index].innerHTML = `<h3>二等奖：${arr1[1]}</h3>`
            } else {
                box[index].innerHTML = `<h4>三等奖：${arr1[2]}</h4>`
            }
        }
    </script>
</body>
</html>

如有更好的方法，请留言！！！