QuYunFeng-share
/
屈云峰抽奖.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>欢乐抽奖</title>
	</head>
	<style>
	    * { font-family: "微软雅黑";}
	    body { background-color: #999;}
		.main {
			position: absolute;
			top: 30%;
			left: 35%;
			width: 500px;
			height: 250px;
			border: 1px solid darkgray;
			background-color: #e4eef9;
		}
		.main-top {
			padding-left :180px;
			background-color: #e4eef9;
		}
		.main-min>input {
			width: 300px;
			height: 60px;
			font-size: 40px;
			font-weight: bolder;
			background-color: white;
			align-content: center;
		}
		.main-min {
			padding-left: 95px;
			background-color: #e4eef9;
		}
		.main-buttom>button {
			width: 100px;
			height: 40px;
			margin-right: 20px;
			margin-top: 20px;
		}
		.main-buttom { padding: 0 83px 0 95px;}
		#startBut {
			float: left;
			background-color: #1fa2d3;
			border: 0;
			color: white;
			font-size: 22px;
			cursor: pointer;
		}
		#startBut+button {
			float: right;
			border: 0;
			background-color: #ff4040;
			color: black;
			font-size: 22px;
			cursor: pointer;
		}
		#startBut:hover { background-color: blue;}
		#startBut+button:hover { background-color: red;}
	</style>
	<script>
		var arr = new Array('猫粮','狗粮','娃娃','火车','手机','电视','冰箱','火车','飞机','坦克');
		var t ,thing;
		var startBut = document.getElementById('startBut');
		function start(){
			clearTimeout(t);
			randomMath();
		}
		function randomMath(){
			var arrIndex = Math.floor(Math.random()*10);
			thing = arr[arrIndex];
			document.getElementById('messageShow').value=thing;
			t = setTimeout('randomMath()',30);
		}
		function stop(){
			clearTimeout(t);
			alert('恭喜您获得了'+thing);
		}

	</script>
	<body>
		<div class="main">
			<div class="main-top">
				<h1>欢乐抽奖</h1>
			</div>
			<div class="main-min">
				<input id="messageShow" type="text" disabled>
			</div>
			<div class="main-buttom">
				<button id="startBut" onclick="start()">开始</button>
				<button onclick="stop()">停止</button>
			</div>
		</div>
	</body>
</html>