抽奖程序

最新推荐文章于 2024-08-03 22:27:18 发布

zichuanhuo221

最新推荐文章于 2024-08-03 22:27:18 发布

阅读量328

点赞数

本文链接：https://blog.csdn.net/zichuanhuo221/article/details/53925249

版权

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>抽奖程序</title>
	<!--
	要求：
	页面上点击按钮，实现抽奖功能
	点击按钮，按钮上的文字[开始抽奖]更换为[停止抽奖]
	抽奖过程中，页面中奖信息10ms更新一次
	点击按钮，按钮上的文字[停止抽奖]更换为[开始抽奖]
	抽奖显示中奖信息。【一组~六组】
	-->
	<style>
	#show{display:block;height:300px;width:300px;border-radius:100%;background:red;
	line-height:300px;text-align:center;font-size:34px;}
	</style>

	</head>
	<body>
	<button id="btn">开始</button><br/>
	<span id="show"></span>
	<script>

	var x=new Array("一组","二组","三组","四组","五组","六组")
	var times;
	var flag=true;
	var btn=document.getElementById("btn");
	btn.οnclick=function(){
	if(flag){
	times=setInterval(function () {
	var num=Math.floor(Math.random()*x.length);
	show.textContent=x[num]
	btn.textContent="stop";
	},10)
	}else{
	clearInterval(times);
	btn.textContent="开始"
	}
	flag=!flag
	}

	</script>
	</body>
	</html>