简单抽奖活动js代码

最新推荐文章于 2025-03-02 15:56:31 发布

仰望星空的包子

最新推荐文章于 2025-03-02 15:56:31 发布

阅读量3.2k

点赞数

分类专栏： JavaScript学习文章标签：抽奖活动 js代码

本文链接：https://blog.youkuaiyun.com/sinat_21206105/article/details/52619015

版权

JavaScript学习专栏收录该内容

22 篇文章

订阅专栏

这是一个简单的抽奖活动代码示例，使用JavaScript实现。当点击'开始'按钮时，会随机显示奖品，如'iphone7'、'mackbook'等，并在按下键盘回车键时也能启动或停止抽奖。代码兼容Firefox和ie浏览器。

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

代码如下：（兼容Firefox和ie）
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.wrapper{width:600px;margin:0 auto;text-align: center;}
		.start {padding: 30px; font:36px '微软雅黑';color:#f00;}
		.btns span{display: inline-block;width: 220px;height: 30px;line-height: 30px;background-color: #e6e6e6;cursor: pointer;margin:0 10px;}
	</style>
</head>
<body>
<div class="wrapper">
	<!-- 开始抽奖 -->
	<div class="start" id="name">礼品随机挑选!</div>
	<!-- 开始结束按钮 -->
	<div class="btns">
		<span id="start">开始</span>
		<span id="end">结束</span>
	</div>
</div>	
<script type="text/javascript">
	var giftlist=['iphone7','mackbook','马尔代夫三日游','美迪拉克','bmw','自行车'],
		timer=null,
		flag=0;
	var name=document.getElementById('name'),
		startplay=document.getElementById('start'),
		endplay=document.getElementById('end');		
		window.οnlοad=function(){
			
			// 开始事件
			startplay.οnclick=playfun;
			// 停止结束事件
			endplay.οnclick=stopfun;
			// 键盘事件
			document.οnkeyup=function(event){
				event=event||window.event;
				if(event.keyCode==13){
					if(flag==0){
						playfun();
						flag=1;
					}
					else{
						stopfun();
						flag=0;
					}
				}
			}
		}
		function playfun(){
			var name=document.getElementById('name'),
		startplay=document.getElementById('start');

			clearInterval(timer);
			timer=setInterval(function(){
				var ran=Math.floor(Math.random()*giftlist.length);
				// console.log(giftlist[ran]);
				name.innerHTML=giftlist[ran];
			},50)
			startplay.style.backgroundColor='#f00';
		}
		function stopfun(){
			clearInterval(timer);
			startplay.style.backgroundColor='#e6e6e6';
		}
</script>
</body>
</html>