html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 800px;
height: 800px;
border: 1px dashed red;
position: absolute;
left: 50%;
margin-left: -400px;
text-align: center;
line-height: 100px;
}
.container .box, .box2 {
width: 300px;
height: 300px;
background: red;
border-radius: 50%;
margin: auto;
margin-top: 50px;
text-align: center;
line-height: 300px;
}
.box2 {
background: deepskyblue;
}
#show {
font-size: 30px;
color: white;
font-weight: bold;
}
#start {
width: 300px;
height: 50px;
background: palevioletred;
}
</style>
</head>
<body>
<div class="container">
<div class="box" id="box">
<span id="show">
奖品
</span>
</div>
<button id="start" onclick="start()">开始抽奖</button>
</div>
<script type="text/javascript">
var flag = false;
var goods = ["香蕉", "地狱火", "八宝粥", "宝马五元代金券", "联想电脑",
"iPhoneX", "1QB", "黄钻",'练习册','谢谢惠顾'];
var show = document.getElementById("show");
var _start = document.getElementById("start");
var _box = document.getElementById("box")
var timer;
function start() {
if (!flag) {
flag = true;
_start.innerHTML = "停止抽奖"
timer = setInterval(function() {
var index = Math.floor(Math.random()*goods.length);
var good = goods[index]
show.innerText = good;
_box.className = "box2";
}, 10)
} else {
flag = false;
_start.innerHTML = "开始抽奖";
clearInterval(timer);
// _box["className"] = "box";
_box.setAttribute("class", "box");
}
}
</script>
</body>
</html>可以根据自己的喜好设计抽奖内容，或者修改颜色。