javascript实现可键盘控制的抽奖系统

2023年6月11日下午12:24 • JavaScript

需要实现一个可键盘控制的抽奖系统，我们可以采用JavaScript语言编写代码。下面，我将详细介绍实现步骤：

步骤一：创建HTML页面

首先，我们需要在HTML页面中创建一个大转盘和一个按键，用户可以通过这个按钮来控制转盘的停止。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>可键盘控制的抽奖系统</title>
    <style>
        #circle {
            width: 500px;
            height: 500px;
            background-color: #CCC;
            border-radius: 50%;
            position: relative;
        }
        #startBtn {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: #F00;
            color: #FFF;
            position: absolute;
            left: 50%;
            margin-left: -50px;
            top: 50%;
            margin-top: -25px;
            z-index: 10;
            cursor: pointer;
        }
        .item {
            position: absolute;
            width: 60px;
            height: 100px;
            left: 50%;
            margin-left: -30px;
            top: 50%;
            margin-top: -50px;
            text-align: center;
            font-size: 22px;
            color: #FFF;
            line-height: 100px;
            transform-origin: center bottom;
            box-shadow: 0px 0px 10px #CCC;
        }
        .item:nth-child(1) {
            transform: rotate(0deg);
            background-color: #F00;
        }
        .item:nth-child(2) {
            transform: rotate(60deg);
            background-color: #0F0;
        }
        .item:nth-child(3) {
            transform: rotate(120deg);
            background-color: #00F;
        }
        .item:nth-child(4) {
            transform: rotate(180deg);
            background-color: #FF0;
        }
        .item:nth-child(5) {
            transform: rotate(240deg);
            background-color: #0FF;
        }
        .item:nth-child(6) {
            transform: rotate(300deg);
            background-color: #F0F;
        }
    </style>
</head>
<body>
    <div id="circle">
        <div class="item">奖品1</div>
        <div class="item">奖品2</div>
        <div class="item">奖品3</div>
        <div class="item">奖品4</div>
        <div class="item">奖品5</div>
        <div class="item">奖品6</div>
        <div id="startBtn">开始</div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

在上述代码中，我们使用了CSS样式来定义大转盘的样式和奖品的名称。同时，我们在转盘上添加了一个“开始”按钮，用户可以通过这个按钮来启动转盘的旋转。

步骤二：编写JavaScript代码

在HTML页面中引用JavaScript文件，并且在JavaScript文件中我们需要给“开始”按钮绑定一个点击事件，当用户点击该按钮时，转盘就会开始旋转。

const circle = document.querySelector('#circle');
const startBtn = document.querySelector('#startBtn');

const items = document.querySelectorAll('.item');

const rotateDeg = [0, 60, 120, 180, 240, 300];

const rotateSpeed = 5; // 转盘旋转速度

let isRunning = false; // 标识转盘是否正在旋转

function run() {
    let curIndex = parseInt(Math.random() * 6); // 随机选择一个奖项，共6个

    let deg = 0; // 当前旋转角度

    isRunning = true;
    startBtn.style.backgroundColor = '#CCC';
    startBtn.removeEventListener('click', run);

    const timer = setInterval(() => {
        deg += rotateSpeed;
        circle.style.transform = `rotate(${deg}deg)`;

        if (deg >= rotateDeg[curIndex] + 360 * 5) { // 旋转5圈以上
            clearInterval(timer);
            isRunning = false;
            startBtn.style.backgroundColor = '#F00';
            startBtn.addEventListener('click', run);
            alert(`中奖了：${items[curIndex].innerHTML}`);
        }
    }, 30);
}

startBtn.addEventListener('click', run);

// 绑定键盘事件
window.addEventListener('keydown', (event) => {
    if (event.keyCode === 32) { // space键
        if (!isRunning) {
            run();
        }
    }
})

在上述JavaScript代码中，我们首先获取页面上的大转盘和“开始”按钮。并且，我们通过querySelectorAll()方法获取到所有的奖项。

为了使每个奖项能够顺时针旋转，在代码中我们定义了一个rotateDeg数组，其中包含了每个奖项的旋转角度。

接下来，我们给“开始”按钮绑定了一个点击事件。在点击事件中，我们随机选择一个奖项，并且开始以每30毫秒5度的速度旋转转盘，直至旋转达到一定角度后再停止。此外，我们还监听了keydown事件，当用户按下空格键时，也会启动转盘的旋转。

最后，当转盘旋转结束时，我们通过alert()方法弹出提示框，提示用户中奖的奖项。

示例说明

下面是两个示例说明：

示例一：启动转盘

打开页面后，点击“开始”按钮或按下空格键，转盘就会开始旋转。

// 点击“开始”按钮
startBtn.click(); 

// 按下空格键
window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 }));

示例二：停止转盘

当转盘正在旋转时，可以再次点击“开始”按钮或按下空格键，即可停止转盘旋转。

// 点击“开始”按钮
startBtn.click(); 

// 按下空格键
window.dispatchEvent(new KeyboardEvent('keydown', { keyCode: 32 }));

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript实现可键盘控制的抽奖系统 - Python技术站