js做抽奖

最新推荐文章于 2025-04-07 13:20:53 发布

_xixi_nn

最新推荐文章于 2025-04-07 13:20:53 发布

阅读量898

点赞数 1

分类专栏： html css js 文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/weixin_56674431/article/details/130884826

版权

html css js 专栏收录该内容

7 篇文章

订阅专栏

文章介绍了一个用JavaScript编写的简单抽奖游戏。通过点击按钮，利用Math.random生成随机数来决定奖品，并从奖品数组中移除已中奖的项目，直至奖品全部抽完。当没有奖品时，显示提示信息。代码示例展示了事件监听和数组操作的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做一个简单的抽奖游戏。

定义一个简单的按钮，来控制。div标签显示抽奖结果。

<div id="box" class="a"></div>
<button type="button" id="btn" class="btn">点击开始抽奖</button>

逻辑是：抽到一个奖品，奖品少一个，也就是数组长度就减一，直到数组长度为0，显示没有奖品了。

把奖品写在一个数组里面。写一个button点击事件，（math.random获取一个随机的小数，math.round取整）随机生成一个整数，也就是数组中的某个值，获取到后，就可以删除这个值了，因为已经中奖了。把数组中的值写入div中，显示出来

let jiangpin = [
				"iPhone14",
				"电影票一张",
				"纸巾一包",
				"零食大礼包",
				"按摩椅",
				"书一本",
				"衣服一件",
			];
			// 找标签
			let btn = document.querySelector("#btn");
			let box = document.querySelector("#box");
			
			console.info(jiangpin);
			// 事件
			function doChoujiang(){
				// 判断有无奖品:如果没有，就停止抽奖，并输出"没有奖品了"
				if( jiangpin.length === 0 ){
					box.innerHTML = "没有奖品了";
					return false;
				}
				let  gailv = Math.random();  // 0-1 随机小数
				if( gailv < 0.5) { 
					let suiji =Math.round( Math.random()*(jiangpin.length-1) );
					// 从数组中，删除对应的元素
					let jieguo = jiangpin[suiji];
					jiangpin.splice( suiji,1 );
					box.innerHTML = jieguo ;
					console.info(jiangpin);
				}else{
					box.innerHTML = "谢谢参与!再来一次！";
				}
			}
			btn.addEventListener("click", doChoujiang);