QQ登录
微博登录
GitHub登录点击代码右上角
查看演示。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 300px;
height: 330px;
border: 5px solid #c9c9c9;
margin: 10px auto;
}
.title {
width: 100%;
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
font-weight: bold;
}
.content {
width: 300px;
height: 300px;
}
span {
position: relative;
display: inline-block;
width: 90px;
height: 90px;
line-height: 90px;
text-align: center;
color: #666;
border: 1px solid #c9c9c9;
border-radius: 5px;
}
span:nth-of-type(1) {
top:5px;
left: 8px;
}
span:nth-of-type(2) {
top:5px;
left: 8px;
}
span:nth-of-type(3) {
top:5px;
left: 8px;
}
span:nth-of-type(4) {
top:11px;
left: 201px;
}
span:nth-of-type(5) {
top:110px;
left: 105px;
}
span:nth-of-type(6) {
top:110px;
right: 90px;
}
span:nth-of-type(7) {
top:18px;
left: 7px;
}
span:nth-of-type(8) {
bottom: 81px;
right: 88px;
}
button {
position: relative;
bottom:82px;
right:82px;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
background: red;
border: none;
font-weight: bold;
color: #fff;
cursor: pointer;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="box">
<div class="title">公平抽奖系统</div>
<div class="concent">
<span>一等奖</span>
<span>二等奖</span>
<span>三等奖</span>
<span>四等奖</span>
<span>五等奖</span>
<span>幸运奖</span>
<span>鼓励奖</span>
<span>谢谢参与</span>
<button>点击抽奖</button>
</div>
</div>
<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
var arr = ["#c9c9c9", "#CD6600", "#2E8B57", "#009ACD", "yellow", "#FF00FF", "pink", "skyblue", "#8B3626"];
$("button").click(function () {
var time = setInterval(function () {
var n = Math.floor(Math.random() * 8 + 1);
$("span").eq(n - 1).css("background", arr[n]).siblings().css("background", "");
}, 200);
setTimeout(function () {
clearInterval(time);
setTimeout(function () {
alert($("span[style*=background]").html());
}, 100);
}, 3000);
});
});
</script>
</body>
</html>参考：https://yaw.ee/1343.html
本站文章除注明转载/出处外，均为原创，若要转载请务必注明出处。转载后请将转载链接通过邮件告知我站，谢谢合作。本站邮箱：admin@only4.work
尊重他人劳动成果，共创和谐网络环境。点击版权声明查看本站相关条款。
