js点击之后动态添加背景图片的问题

点击之后动态添加背景图片第一次点击的时候不显示背景图片之后的都行就是第一次不显示是什么原因
源码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>test</title>
<style type="text/css">
    * { margin:0px auto; padding:0px;}
    .white { color:white}
    .red { color:red}
     
    div#content {background: url(img/2.png) #fdde48;background-repeat:no-repeat; background-size: 100%; height:auto;} 
    div#title { height:75px; width:225px; background: url(img/3.png);background-repeat:no-repeat; background-size: 100%;s}
    div#title p { text-align:center; font-size:16px; line-height:60px}
    div#stage { height:530px; width:640px;  margin-top:20px}
    div#list { height:646px; width:583px;background: url(img/4.png);background-repeat:no-repeat; background-size: 100%; }
    
    div.card { height:250px; width:200px; float:left; margin-left:10px; margin-top:10px;
    text-align:center; line-height:250px;background: url(img/1.png);background-repeat:no-repeat; background-size: 100%;}
    div.after { animation:cordClick 1s;height:250px; width:200px; float:left; margin-left:10px; margin-top:10px;background: url(img/1.png);background-repeat:no-repeat; background-size: 100%;
    text-align:center; line-height:250px}
    @keyframes cordClick{
        to {transform: rotateY(360deg);}
    }

</style>
<script type="text/javascript" src="jquery/pageResponse.min.js"></script>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
window.onload = window.onresize = function(){
    pageResponse({
        selectors : '#content',     //模块选择器，使用querySelectorAll的方法
        mode : 'contain',     // auto || contain || cover ，默认模式为auto 
        width : '700',      //输入页面的宽度，只支持输入数值，默认宽度为320px
        height : '1700'      //输入页面的高度，只支持输入数值，默认高度为504px
    })
}
//定义次数
var count = 3;
//奖品
var rand = ['1','2','3','4','5','6'];

var imgs=['url(img/jiangpin2.png)','url(img/jiangpin2.png)','url(img/jiangpin1.png)','url(img/jiangpin2.png)','url(img/jiangpin1.png)','url(img/jiangpin2.png)']
//概率下标
var gailv=[[1000,"0"],[0,"1"],[0,"2"],[0,"3"],[0,"4"],[0,"5"]];

    //卡牌对象
    var card;
    
    $(function(){
        init();
    
    });
    
    function init(){
        $("#stage").html("");
        for(var i = 0 ; i < 6; i ++){
            //设置对象
            card = '<div class="card" ></div>';
            $('#stage').append(card);
        };
        var allarr=[];
        //...这里写概率运算
        for(var i=0;i<gailv.length;i++){
                for(var j=0;j<gailv[i][0];j++){
                    allarr.push(gailv[i][1]);
                };
        };
            var real=allarr[Math.floor(Math.random()*1000)];
        // 1 表示猜中的奖项 是rand 的下标
            console.log(real)
            cardHover(real);
            
    }
    
    //点击事件 i 是rand的下标
    function cardHover(i){
            $('div.card').click(function(){
            $('div.card').unbind('click');
            $(this).addClass("after");
            $(this).removeClass("card");
            setTimeout(function(){
                //$("div.after").text(rand[i]);
                $("div.card.after").removeClass("after");
                $("div.after").css({
                    'background':imgs[i],
                    'background-repeat':'no-repeat',
                    'background-size':'100%'
                });
                alert(rand[i]);
                count --;

                if(count >0){
                    init();
                }
                $("#chance").text(count);
                if(count<=0){
                imgs.splice(i,1);
                //打乱奖品
                var arr=[]; 
                for(var j=0;j<imgs.length;j++){ 
                        arr[j]=imgs[j]; 
                    } 
                arr.sort(function(){ return 0.5 - Math.random() }) 
                var str=arr.join(); 
                //上面随机生成的是字符串，再转一次数组
                var obj = str.split(",");
                    $('div.card').each(function(index, element) {
                   // $(this).text(obj[index]);
                    $(this).css({
                    'background':obj[index],
                    'background-repeat':'no-repeat',
                    'background-size':'100%'
                });
               });
                }
            },1000);
        });
    
    };
    
    
</script>
</head>
<body>
<!-- stage start-->
<div id="content">
    <!-- title-->
    <div id="title" style=" margin-top:280px;">
        <p><em class="white">今天还有<span id="chance" class="red">3</span>次机会哦</em></p>
    </div>
    <!-- stage-->
    <div id="stage" class=".page">
    </div>
    <!-- title-->
    <div id="title" style=" margin-top:30px;">
        <p class="white">中奖名单</p>
    </div>
    <!-- list-->
    <div id="list">
    
    </div>

</div>

<!-- stage end-->
</body>
</html>
由最代码官方编辑于2016-7-11 13:34:45
0个评论
5个牛币 javascript javascript点击 javascript动态背景 javascript图片问题
所有回答列表(0)
最热评论
最新问答