web前端案例之抽奖

使用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_statusclearInterval(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>

实现图片：

开始时：