js实现简单抽奖功能

最新推荐文章于 2024-08-16 08:19:24 发布

前端切图仔Zz

最新推荐文章于 2024-08-16 08:19:24 发布

阅读量3.6k

点赞数 4

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Amouzy/article/details/120336823

版权

JavaScript 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

本文介绍了一个使用JavaScript编写的简单抽奖程序。通过点击开始和停止按钮，程序会在预设的奖项列表中随机选取一个奖品显示。奖项包括实物奖品和未中奖提示'谢谢'。点击停止按钮时，会弹出恭喜信息并从列表中移除当前奖项，确保不会重复抽到同一个奖品。

摘要由CSDN通过智能技术生成

1.场景：

点击按钮开始随机抽取奖品，当停止那刻停留在大屏幕的是抽中的奖品（“谢谢”即为没奖）。

2.思路：

众所周知，抽奖主要讲究的就是随机性，并且是在一堆奖项中抽取。那么可以锁定方向：用数组放奖项名，用Math.random()来返回介于 0(包含) ~ 1(不包含) 之间的一个随机数。只要能随机选中数组的下标，便能随机选中奖项。
话不多说，附上代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	
	</head>
	<body>
		<button id="start">开始</button>
		<button id="end">停止</button>
		<h1 id="txt">请开始吧</h1>
		<script>
			var ostart=document.getElementById('start');
			var oend=document.getElementById('end');
			var otxt=document.getElementById('txt');
			var timer;
			var m;
			var list=['手机','pad','pad','购物卡','购物卡','购物卡','音响','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢','谢谢']
			// 开始
			ostart.onclick=function(){
				timer=setInterval(function(){
					// 产生随机数
					m=parseInt(Math.random()*list.length);
					// 修改html
					otxt.innerHTML=list[m]
					// 修改图片 .setAttribute('src',list[m])

				},1000)
			}
			// 停止
			oend.onclick=function(){
				
				clearInterval(timer);
				alert('恭喜抽中'+list[m]);
				list.splice(m,1,'谢谢');
			}
		</script>
	</body>
</html>