简单的均等概率抽奖源代码 | JS

2023/11/08

## 简介本文用于记录使用`HTML + CSS + JS`实现的非常简单的抽奖功能。非常非常非

月上老狗

@dingdangdog

渲染中...

## 简介

本文用于记录使用`HTML + CSS + JS`实现的非常简单的抽奖功能。

非常非常非常简单的功能，大概率没啥用，但也说不定哪天可能会需要借鉴，所以还是记录以下。

<!-- more -->

## 代码

**提示：可以自己新建个html文件，将下方代码复制填写到该文件中，浏览器打开该文件即可查看代码效果。**

```html
<!DOCTYPE html>
<html>
<head>
    <title>抽奖</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin-top: 100px;
        }
        h1 {
            color: #333;
        }
        #result {
            font-size: 24px;
            font-weight: bold;
            color: #E74C3C;
            margin-top: 20px;
        }
        #spinBtn {
            margin-top: 20px;
            padding: 10px 20px;
            font-size: 18px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>抽奖活动</h1>
    <p>点击下面的按钮抽奖：</p>
    <button id="spinBtn">抽奖</button>
    <div id="result"></div>

    <script>
        const prizes = ["一等奖", "二等奖", "三等奖", "幸运奖", "谢谢参与"];
        const spinBtn = document.getElementById("spinBtn");
        const resultDiv = document.getElementById("result");

        spinBtn.addEventListener("click", () => {
            const randomIndex = Math.floor(Math.random() * prizes.length);
            const randomPrize = prizes[randomIndex];
            resultDiv.innerText = "恭喜您抽中了：" + randomPrize;
        });
    </script>
</body>
</html>
```

END

登录后查看和发表评论

前往登录