<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>抽奖</title>
<style>
*{margin: 0;padding: 0;}
.content{width:80%;border: 1px solid black;margin: 0 auto;margin-top: 100px;}
ul li{list-style: none;float: left;width: 28%;height: 28%;margin:0 3%;border: 1px solid black;height: 100px;margin-top: 20px;background: url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504600617760&di=e77de88b258966729fcfb35ea910e07a&imgtype=0&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20140325%2F20140325093124-380277907.jpg");background-repeat: no-repeat;background-size:100% 100% ;}
ul li:nth-child(2){margin:20px 0 0;}
ul li:nth-child(5){margin:20px 0 0;}
ul li:nth-child(8){margin:20px 0 0;}
.animeta{animation: move 1s both;}
@keyframes move {
0% {transform: rotateY(0deg);}
100% {transform: rotateY(180deg);}
}
</style>
</head>
<body>
<div class="content" id="content1">
<ul id="list">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div style="clear: both;"></div>
</div>
</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
var zhong = 0;
var arr = ["orange","yellow","green","blue","purple","black","gray","black"];
var arr2 = ["orange","yellow","green","blue","purple","black","gray","red"];
var list = $("#list li");
var temp =[];
$("#content1").css("height",$(window).height()* 0.6);
list.click(function(){
list.addClass("animeta");
var index = $(this).index();
if(zhong == 0){
roa(arr);
temp.splice(index,0,"red");
}else{
roa(arr2);
temp.splice(index,0,"black");
}
setTimeout(function(){
for(var i = 0 ; i < list.length;i++){
list[i].style.background = temp[i];
}
shuaxin();
},450)
})
function roa(arr){
var count = arr.length;
for(i = 0; i < count; i++) {
var num = Math.floor(Math.random() * arr.length);
temp.push(arr[num]);
arr.splice(num, 1);
}
return temp;
}
function shuaxin(){
confirm("恭喜您,中奖啦!");
setTimeout(function(){
location.reload();
},5000)
}
</script>
这是代码,除了黑色以外,每个颜色代表不同的中奖结果,现在问题是,当旋转动画结束后才会出现 confirm 且并没有换颜色,需要点击确定之后才可以换,需要的是,当颜色换过后才会有confirm的出现
顺便,想问一下,如果我有7中中奖方式的话,创建7个arr太麻烦是肯定,帮忙出个主意,谢谢.
