confirm后执行的问题,抽奖系统

<!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太麻烦是肯定,帮忙出个主意,谢谢.

关于旋转动画结束后才会出现 confirm提示问题解释如下：
1.你的提示是写在shuaxin方法里面；
2.你是在点击list执行。
3.点击之后，从上至下，最后执行下面的方法，所以才导致这样问题出现：

 setTimeout(function(){
                for(var i = 0 ; i < list.length;i++){
                    list[i].style.background = temp[i];
                }
                shuaxin();
            },450)

你用css3的动画，所以没有回调，你只能通过css中设置的动画时间计算好要confirm的延时时间

             setTimeout(function(){
                for(var i = 0 ; i < list.length;i++){
                    list[i].style.background = temp[i];
                }
                setTimeout(shuaxin, 650);////////
            },450)

7种中奖方式不懂你要描述什么。

setTimeout方法用的有点问题，点击之后把时间清空一下。var list = $("#list li");获取到的是所有的li，直接用list.click(function(）{});没有办法找到你是点的哪一个li，需要遍历一下。

<!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)
    shuaxin();
})

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() {
    setTimeout(function() {
        confirm("恭喜您,中奖啦!");
        location.reload();
    }, 500)

}
</script>

我调整了一下你的刷新 shuaxin()方法的调用位置，你看一下是不是你要的结果？