这是一个使用HTML、CSS和JavaScript编写的简单抽奖程序。用户点击‘开始’按钮后，页面上会随机显示预先设定的奖品内容，点击‘停止’按钮则结束抽奖。样式设置包括按钮的外观和交互效果，JavaScript部分负责生成随机奖项并控制抽奖流程。
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#isyou {
font-size: 80px;
text-align: center;
margin: 100px auto;
}
#btn {
width: 180px;
height: 60px;
border: none;
background: dodgerblue;
display: block;
margin: 0 auto;
color: #fff;
font-size: 30px;
border-radius: 6px;
text-align: center;
line-height: 60px;
cursor: pointer;
}
#btn:active {
background: slateblue;
}
</style>
</head>
<body>
<div id="isyou">请点击下面的按钮，开始抽奖</div>
<span id="btn">点击开始</span>
</body>
<script type="text/javascript">
var str = '内容,内容';
var arr = str.split(",")
var oIsyou = document.getElementById("isyou")
var obtn = document.getElementById("btn")
var onOff = true;
var timer;
obtn.onclick = function () {
if (onOff) {
timer = setInterval(function () {
var i = Math.round(Math.random() * (arr.length - 1))
oIsyou.innerHTML = arr[i]
}, 30)
obtn.innerHTML = "点击停止";
onOff = false
} else {
obtn.innerHTML = "点击开始";
clearInterval(timer);
onOff = true
}
}
</script>
扫一扫
16万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
