html随机抽奖

最新推荐文章于 2023-05-22 21:10:06 发布

乔木晨子

最新推荐文章于 2023-05-22 21:10:06 发布

阅读量396

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/qq_41361162/article/details/130565350

版权

有两个地方namelist你需要修改

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>随机点名器</title>
		<style type="text/css">
			#parent {
				background-color:#fdacfa ;
				height: 500px;
				border-radius: 10px;
				width: 700px;
				margin: 100px auto;
				position: relative;
			}
	
			#box {
				margin: auto;
				width: 400px;
				font-size: 66px;
				border: 1px ;
				font-weight: bold;
				height: 94px;
				border-radius: 20px;
				text-align: center;
				background-color: antiquewhite;
				position: absolute;
				margin-top: 100px;
				margin-left: 140px;
			}
	
			#bt {
				margin: auto;
				border-radius: 10px;
				border:0;
				background-color: white;
				width: 200px;
				text-align: center;
				margin-top: 300px;
				margin-left: 100px;
				color: #070000;
				font-weight: bold;
				font-size: 25px;
				cursor: pointer;
			}
	
			#box2{ 
				margin:AUTO;
				text-align: center;
				/*background:red;*/
			}
			
			#desc {
				border-radius: 10px;
				background-color:#fdacfa ;
				width: 600px;
				text-align: center;
				margin-top: 200px;
				margin-left: 60px;
				color: #070000;
				/*font-weight: bold;*/
				font-size: 20px;
				cursor: pointer;
			}
	
			#reset1 {
				border-radius: 10px;
				background-color: white;
				width: 200px;
				text-align: center;
				border-radius: 10px;
				border: 0px ;
				font-weight: bold;
				/*margin-top: 400px;*/
				/*margin-left: 60px;*/
				color: #070000;
				/*font-weight: bold;*/
				font-size: 25px;
				cursor: pointer;
			}
		</style>
	</head>
	
	<body>
		<div id="parent">
			<div id="box">随机抽奖</div>
			<div id="box2">
				<button id="reset1" onclick="rest1()">
					重置程序
				</button>
			<button id="bt" onclick="doit()">开始</button>
		</div>
			<div id="desc">
				每次得到一个人后将移除这个人，相当于抽奖。
			</div>
		</div>
	</body>
	
	<script type="text/javascript">
		//变量池[这个地方你要修改成你自己的数据]
		var namelist = ["Kiwa Jo", "阿瑶", "晴", "Lily Xu" , "Nana Chow"];
		//计时器
		var mytime = null;
	
		function doit() {
			var bt = window.document.getElementById("bt");
			if (mytime == null) {
				bt.style.backgroundColor = "#ff0000";
				bt.innerHTML = "停止";
				show();
			} else {
				bt.style.backgroundColor = "white";
				bt.innerHTML = "开始";
				clearTimeout(mytime);
				mytime = null;
				var box = window.document.getElementById("box");
				var name = box.innerText;
				var index = namelist.indexOf(name);
				namelist.splice(index,1);
			}
		}
	
		function show() {
			//获取目标
			var box = window.document.getElementById("box");
			//产生随机数
			var num = Math.floor((Math.random() * 100000)) % namelist.length;
			if(namelist.length <= 0){
				box.innerHTML = "没有人了";
			}else {
				//将随机的名字填入对应区域
				box.innerHTML = namelist[num];
			}
			//递归，自己调用自己
			mytime = setTimeout("show()", 10);
		}
	
		// 重置
		function rest1() { 
		var bt = window.document.getElementById("bt");
		bt.style.backgroundColor = "white";
				bt.innerHTML = "开始";
				clearTimeout(mytime);
				mytime = null;
			//[这个地方你要修改成你自己的数据]
			namelist = ["Kiwa Jo", "阿瑶", "晴", "Lily Xu" , "Nana Chow"];
			var box = window.document.getElementById("box");
			box.innerHTML = "继续";
		}
	</script>
</html>