web前端案例之抽奖

news2024/10/5 15:37:24

使用HTML+Javascript完成抽奖案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
		</style>
	</head>
	<body>
		<div id="container" onclick="div_click(this)"></div>
		<script>
			function div_click(event){
				console.log(event)
			}
			let div = document.querySelector("#container")
			div.style.width = 400 + "px"
			div.style.height = 400 + "px"
			div.style.border = "1px solid red"
			div.style.margin = "auto"
			div.style.textAlign = "center"
			
			let circle = document.createElement("div")
			circle.style.width = 280 + "px"
			circle.style.height = 280 + "px"
			circle.style.borderRadius = '50%'
			circle.style.backgroundColor = "red"
			circle.style.margin = "auto"
			circle.textContent = "一等奖"
			circle.style.fontSize = '30px'
			circle.style.color = "white"
			circle.style.lineHeight = 280 + "px"
			circle.style.textAlign = "center"
			div.appendChild(circle)
			
			let button = document.createElement("button")
			button.style.width = '280px'
			button.style.height = '40px'
			button.style.textAlign = "center"
			button.style.margin = "auto"
			button.style.marginTop = "30px"
			button.innerText = "开始抽奖"
			
			let btn_status = "开始抽奖"			
			button.onclick = function(){
				if (btn_status == "开始抽奖"){	
					btn_status = "停止"
					id = setInterval(random_check, 100)
				}else{
					btn_status = "开始抽奖"
					button.innerText = btn_status
					clearInterval(id)
				}
			}
			div.appendChild(button)
			
			let arr = ['一等奖', '二等奖', '三等奖', '安慰奖']			
			
			function random_check(){
				let index = Math.round(Math.random()*3)
				circle.innerHTML = arr[index]
				button.innerText = btn_status
			}
		</script>
	</body>
</html>

实现图片：

开始时：