用js写的翻牌抽奖

最新推荐文章于 2023-09-01 17:33:01 发布

xian0711

最新推荐文章于 2023-09-01 17:33:01 发布

阅读量2.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_26242995/article/details/51819038

版权

<em><em><!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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
* { margin:0px auto; padding:0px;}
div#stage { height:530px; width:640px; background:#CCC;}
div.card { height:250px; width:200px; float:left; margin-left:10px; margin-top:10px;
text-align:center; line-height:250px}
div.after { animation:cordClick 1s;height:250px; width:200px; float:left; margin-left:10px; margin-top:10px;
text-align:center; line-height:250px}
@keyframes cordClick{
to {transform: rotateY(360deg);}
}

</style>
<script src="jquery/jquery-2.1.1.min.js"></script>
<script>
//牌的颜色可用图片代替
var color = ['81C2D6','8192D6','D9B3E6','DCF7A1','83FCD8','FFBDBD'];
//奖品牌是生成，理论上可以从数据库读取出奖品，有几份生成几个牌
var rand = ['1','2','3','4','5','6'];
//概率和奖品的下标概率总数1000
var gailv=[[1000,"0"],[0,"1"],[0,"2"],[0,"3"],[0,"4"],[0,"5"]];

//卡牌对象
var card;
$(function(){
for(var i = 0 ; i < 6; i ++){
//设置对象
card = '<div style="background:#'+ color[i]+'" class="card" >aa</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(){
setTimeout(function(){
$("div.after").text(rand[i]);
$("div.card.after").removeClass("after");
$('div').unbind('click');
alert(rand[i]);
//这里去除选中的那个奖品，剩下的是没抽到，让没抽到的显示在剩下的牌里
rand.splice(i,1);//这里开始就是没选中的奖品了，把选中的奖品从这个数组了去除了
//打乱奖品
var arr=[];
for(var j=0;j<rand.length;j++){
arr[j]=rand[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]);
});
},1000);
});
};

</script>
</head>
<body>

<div id="stage" >

</div>

</body>
</html>
</em></em>

xian0711

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用js写的翻牌抽奖

test* { margin:0px auto; padding:0px;}div#stage { height:530px; width:640px; background:#CCC;}div.card { height:250px; width:200px; float:left; margin-left:10px; margin-top:10px;text-align:c
复制链接

扫一扫