文章目录

一、效果展示

在这里插入图片描述

二、完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#box {
				position: relative;
				width: 300px;
				height: 300px;
				border: 1px solid red;
				margin: 0 auto;
				box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
			}
			
			#box div {
				position: absolute;
				width: 98px;
				height: 98px;
				line-height: 98px;
				border: 1px solid red;
				font-size: 25px;
				text-align: center;
			}
			
			#box div:nth-child(2) {
				left: 100px;
			}
			#box div:nth-child(3) {
				left: 200px;
			}
			#box div:nth-child(4) {
				left: 200px;
				top: 100px;
			}
			#box div:nth-child(5) {
				left: 200px;
				top: 200px;
			}
			#box div:nth-child(6) {
				left: 100px;
				top: 200px;
			}
			#box div:nth-child(7) {
				top: 200px;
			}
			#box div:nth-child(8) {
				top: 100px;
			}
			
			#box input {
				position: absolute;
				width: 98px;
				height: 98px;
				/* border: 1px solid blue; */
				left: 101px;
				top: 101px;
			}
			
			.toRed {
				background-color: red;
			}
			
			h2 {
				text-align: center;
			}
		</style>
	</head>
	
	<body>
		<div id="box">
			<div>一等奖</div>
			<div>二等奖</div>
			<div>三等奖</div>
			<div>四等奖</div>
			<div>五等奖</div>
			<div>六等奖</div>
			<div>七等奖</div>
			<div>八等奖</div>
			<input type="button" id="startBtn" value="开始">
		</div>
		
		<h2></h2>
	</body>
	
	<script type="text/javascript">
		var box = document.getElementById("box");
		var allDiv = box.getElementsByTagName("div");
		var startBtn = document.getElementById("startBtn");
		var score = document.getElementsByTagName("h2")[0];
		
		// 表示定时器是否在运行
		var flag = false;
		
		startBtn.onclick = function() {
			// 如果定时器在运行则不能进行下次抽奖
			if (flag) return;
			
			// 定时器开始运行
			flag = true
			
			// 生成 17~32 的随机数，中奖编号为 idx%8? idx%8: 8
			// 保证转盘至少转两圈不超过四圈
			var idx = Math.ceil(Math.random() * 16) + 16;
			
			var k = 0;
			var timer = setInterval(function() {
				for (var i = 0; i < allDiv.length; i++) {
					allDiv[i].className = ";"
				}
				allDiv[k%8].className = "toRed";
				if (k == idx-1) { 
					// 抽奖结束，清除定时器
					clearTimeout(timer);
					//标记定时器不在运行
					flag = false;
					
					// 中奖信息
					score.innerText = "恭喜您中了" + (idx%8? idx%8: 8) + "等奖";
				}
				k++;
			}, 100)
		}
	</script>
</html>
# 前端 # javascript # css
Logo
魔乐社区

魔乐社区（Modelers.cn) 是一个中立、公益的人工智能社区，提供人工智能工具、模型、数据的托管、展示与应用协同服务，为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作，由全产业链共同建设、共同运营、共同享有，推动国产AI生态繁荣发展。

更多推荐

cover

全家桶集齐！Qwen3.5四款小模型上线魔乐社区，附昇腾全套实践教程

avatar 魔乐社区

Pont - 搭建前后端之桥：高效、灵活的接口管理工具

Pont 是一款强大的数据服务层解决方案，它能够帮助开发者快速搭建前后端之间的桥梁，实现接口的高效管理和代码自动生成。无论是新手还是有经验的开发者，都能通过 Pont 轻松处理接口文档、生成类型安全的 API 代码，从而显著提升开发效率。[![Pont 工具标志](https://raw.gitcode.com/gh_mirrors/po/pont/raw/3f1b7d4bbba3fd2dda

avatar 魔乐社区

如何快速上手 hvac：HashiCorp Vault Python 客户端零基础入门指南

**hvac** 是 HashiCorp Vault 的 Python 3.X 客户端库，专为开发者提供简单高效的 Vault 交互方式。无论你是需要管理密钥、配置身份验证，还是实现安全的秘密数据存储，hvac 都能帮助你轻松搞定 Vault 的各项操作。本文将带你零基础快速入门，从安装到基础操作，让你在几分钟内即可上手使用这个强大的工具。[![hvac 客户端 Logo](https://r

avatar 魔乐社区