首页 > 代码库 > 抽奖软件

抽奖软件

2024-07-02 15:05:02   238人阅读

抽奖软件，实现翻牌效果 DEMO

 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>CSS3-3D旋转</title>
<style type="text/css">
*{margin:0;padding:0px;}
body{background:#b1b1b1;font-family:Arial;font-size:125%;color:#202020;background-color:#C43C3C}
.title{margin:15px auto;width:400px;font-size:40px;font-weight:900;color:#000000;text-align:center}
#container{position:relative;height:500px;width:1300px;margin:0 auto;top:10px;-webkit-perspective:800px;/*3d场景*/
 -moz-perspective:800px;}
#container div{position:absolute;width:110px;height:80px;padding:3px;background:#463;-ms-border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-webkit-transition:1s ease-in-out;-moz-transition:1s ease-in-out;-ms-transition:1s ease-in-out;-o-transition:1s ease-in-out;transition:1s ease-in-out;/*box-shadow:5px 5px 5px #888888;*/
}
#container div.lower{font-family:verdana,arial,sans-serif;background:#642;background:-moz-linear-gradient(-45deg,#642,#864 50%,#642 100%);background:-webkit-gradient(linear,0 0,100% 100%,from(#642),color-stop(50%,#a86),color-stop(100%,#642));transform-style:preserve-3d;backface-visibility:hidden;/*抖动*/
-moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;/*抖动*/
 -webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);-webkit-transform:rotateY(-180deg);}
#container div.upper{transform-style:preserve-3d;backface-visibility:hidden;-moz-transform-style:preserve-3d;-moz-backface-visibility:hidden;-webkit-transform-style:preserve-3d;-webkit-backface-visibility:hidden;background:-moz-linear-gradient(-45deg,#463,#8a7 50%,#463 100%);background:-webkit-gradient(linear,0 0,100% 100%,from(#463),color-stop(50%,#8a7),color-stop(100%,#463));}
.positive{line-height:17px;overflow:visible;padding:4px 10px 3px 7px;width:110px;height:80px;color:#529214;border:1px solid;border-top-left-radius:10px;border-bottom-right-radius:10px;border-top-right-radius:20px;border-bottom-left-radius:20px;font-size:20px;font-weight:600;text-shadow:2px 2px 2px #888888;}
</style>
</head>
<body onload="init();">
<div class="title">抽奖</div>
<div id="container"></div>

<script type="text/javascript">
/**
一共五十张牌，其中200元5个，100元10个，50元25个，谢谢您10个
*/
function init(){
    award.init();
}

var award = {
    money:[], //数组
    init:function(){ //初始化数据
        var html = ‘‘;
        for(var i=0;i<50;i++){
            (i<5)&&(this.money.push("200元"));
            (i<15&&i>4)&&(this.money.push("100元"));
            (i<40&&i>14)&&(this.money.push("50元"));
            (i>39)&&(this.money.push("谢谢您！"));
            var left ,top;
            if(i<10){left = i*130;top =0;}
            if(i>9&&i<20){left = (i-10)*130;top ="100px";}
            if(i>19&&i<30){left = (i-20)*130;top ="200px";}
            if(i>29&&i<40){left = (i-30)*130;top ="300px";}
            if(i>39&&i<50){left = (i-40)*130;top ="400px";}
            html += ‘<span style="width:120px">‘
            html += ‘<div class="lower" id="lower_‘+i+‘" style="left:‘+left+‘px; top:‘+top+‘;"><input type="button" id="lower_‘+i+‘_button" class="positive"/></div>‘;
            html += ‘<div class="upper" id="upper_‘+i+‘" style="left:‘+left+‘px; top:‘+top+‘;" onclick="award.changeButton(this);"><input  type="button" value="http://www.mamicode.com/马上有钱了" class="positive" /></div></span>‘;
        }        
        console.log(this.money);
        document.getElementById("container").innerHTML = html;
    },
    changeButton:function(bt){ //翻页        
        var element2 = bt;
        var element1 = document.getElementById("lower_"+element2.id.split(‘_‘)[1]);
        var ele = document.getElementById(element1.id+"_button");
        var num = this.getRandNum();            
        var price = this.money[num];//根据随机数取随机价格
        ele.value=price,ele.style.color="red",ele.style.fontSize="25px";
        element2.style.transform = "rotateY(180deg)";
        element2.style.MozTransform = "rotateY(180deg)";
        element2.style.webkitTransform ="rotateY(180deg)";
        element1.style.transform = "rotateY(0)";
        element1.style.MozTransform = "rotateY(0)";
        element1.style.webkitTransform ="rotateY(0)";    
        this.removeEleAt(num);//删除money数组中已被抽中的
    },
    getRandNum:function(){ //得到随机数
        return parseInt(Math.random()*(this.money.length));    
    },
    removeEleAt:function(dx){
         if(isNaN(dx)||dx>this.money.length){return false;}
         this.money.splice(dx,1);
         var o = 0;
         for(var p=0; p<this.money.length;p++){
             if(typeof this.money[p]!="undefined"){
                 this.money[o] = this.money[p];
                 o++;
             }
         }
    }
    
}

</script>
</body>
</html>

 


联系
我们