前端抽奖 JavaScript 代码实现 - HTML、CSS 和 JS 示例 - 常规

前端抽奖 JavaScript 代码实现 - HTML、CSS 和 JS 示例

抽奖是一个非常常见的活动，下面给出一个简单的前端抽奖实现。

HTML 部分

<!DOCTYPE html>
<html>
<head>
	<meta charset='utf-8'>
	<title>抽奖</title>
	<style type='text/css'>
		#lottery-container {
			width: 200px;
			height: 200px;
			border: 1px solid #ccc;
			margin: 20px auto;
			position: relative;
		}
		#lottery-pointer {
			position: absolute;
			top: 50%;
			left: 50%;
			margin-left: -10px;
			margin-top: -10px;
			width: 20px;
			height: 20px;
			background-color: red;
			border-radius: 50%;
			cursor: pointer;
			z-index: 100;
		}
		#lottery-result {
			margin-top: 20px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id='lottery-container'>
		<div id='lottery-pointer'></div>
	</div>
	<div id='lottery-result'></div>
	<script src='lottery.js'></script>
</body>
</html>

CSS 部分

#lottery-container {
    width: 200px;
    height: 200px;
    border: 1px solid #ccc;
    margin: 20px auto;
    position: relative;
}

#lottery-pointer {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -10px;
    margin-top: -10px;
    width: 20px;
    height: 20px;
    background-color: red;
    border-radius: 50%;
    cursor: pointer;
    z-index: 100;
}

#lottery-result {
    margin-top: 20px;
    text-align: center;
}

JavaScript 部分

var lottery = {
    index: -1, // 当前转动到哪个位置，起点位置
    count: 0, // 总共有多少个位置
    timer: 0, // setTimeout的ID，用clearTimeout清除
    speed: 20, // 初始转动速度
    times: 0, // 转动次数
    cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1, // 中奖位置
    init: function(id) {
        if ($('#' + id).find('.lottery-unit').length > 0) {
            $lottery = $('#' + id);
            $units = $lottery.find('.lottery-unit');
            this.obj = $lottery;
            this.count = $units.length;
            $lottery.find('.lottery-unit-' + this.index).addClass('active');
        };
    },
    roll: function() {
        var index = this.index;
        var count = this.count;
        var lottery = this.obj;
        $(lottery).find('.lottery-unit-' + index).removeClass('active');
        index += 1;
        if (index > count - 1) {
            index = 0;
        };
        $(lottery).find('.lottery-unit-' + index).addClass('active');
        this.index = index;
        return false;
    },
    stop: function(index) {
        this.prize = index;
        return false;
    }
};

function roll() {
    lottery.times += 1;
    lottery.roll();
    if (lottery.times > lottery.cycle + 10 && lottery.prize == lottery.index) {
        clearTimeout(lottery.timer);
        lottery.prize = -1;
        lottery.times = 0;
        click = false;
        $('#lottery-result').text('恭喜您获得了奖品！');
    } else {
        if (lottery.times < lottery.cycle) {
            lottery.speed -= 10;
        } else if (lottery.times == lottery.cycle) {
            var index = Math.random() * (lottery.count) | 0;
            lottery.prize = index;
        } else {
            if ((lottery.times > lottery.cycle + 10 && lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1) {
                lottery.speed += 110;
            } else {
                lottery.speed += 20;
            }
        }
        if (lottery.speed < 40) {
            lottery.speed = 40;
        };
        lottery.timer = setTimeout(roll, lottery.speed);
    }
    return false;
}

var click = false;

$(document).ready(function() {
    lottery.init('lottery-container');
    $('#lottery-pointer').click(function() {
        if (click) {
            return false;
        } else {
            lottery.speed = 100;
            roll();
            click = true;
            return false;
        }
    });
});

注释已经写得比较详细，运行效果如下图所示：

lottery

代码说明:

HTML 部分: 创建抽奖容器 lottery-container 和指针 lottery-pointer，以及用于显示结果的 lottery-result 元素。
CSS 部分: 设置抽奖容器、指针和结果区域的样式，以实现基本外观。
JavaScript 部分:
- 定义 lottery 对象，包含抽奖逻辑和相关属性。
- init 函数：初始化抽奖对象，获取抽奖容器和抽奖单位数量。
- roll 函数：控制指针旋转，每次旋转一个位置，并添加 active 类。
- stop 函数：设置中奖位置。
- roll 函数：控制抽奖过程，设置旋转速度、次数和中奖位置。
- 事件监听：当用户点击指针时触发抽奖，并控制点击事件的触发次数。

注意：

该代码示例仅实现了基本抽奖功能，可根据实际需求进行调整和扩展。
为了更直观的展示效果，代码中设置了 cycle 参数，确保抽奖过程有足够的旋转次数。
您可以根据需要调整 lottery-unit 的数量和样式，以实现不同样式的抽奖效果。
可以使用其他方法来设置中奖位置，例如随机生成，或者通过后台接口获取中奖信息。
可以根据实际需求添加其他功能，例如播放声音、动画效果等。

希望该代码示例能帮助您快速实现前端抽奖功能。