php+jQuery 翻牌式抽奖

最新推荐文章于 2022-04-20 23:27:51 发布

糟糕的沙漠

最新推荐文章于 2022-04-20 23:27:51 发布

阅读量265

点赞数

分类专栏： php 文章标签： php

本文链接：https://blog.csdn.net/weixin_42412237/article/details/106733341

版权

php 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

参考文章：https://itbyc.com/log/php/2454.html

↓ 简单练习，没有实现翻牌
效果：用户点击1-9中任意一个，模块内容改变。用户点击的块为抽奖结果（颜色变化）。
前端文件

<!DOCTYPE HTML>
<html>
<head>
    <title>抽奖</title>
    <meta charset='utf-8'/>
    <script src="jquery-1.11.1.min.js"></script>
    <style>
    body{
        margin:0 auto;
        text-align:center;
    }
    #content{
        width:700px;
        margin:10% 20%;
        height:600px;
    }
    .divcon{
        border:1px solid #000;
        border-radius:30px;
        font-size:30px;
        line-height:180px;
        vertical-align:middle;
        display:inline-block;
        width:30%;
        height:30%;
        margin:10px;
        cursor:pointer;
    }
    </style>
</head>
<body>
    <div id="content"></div>
</body>
</html>
<script>
    //设置9个div 及 顏色
    let color = ['orangered','tomato','royalblue','darkviolet','orange','pink','greenyellow','deepskyblue','gold'];
    for(let i=1;i<=9;i++){
        $("#content").append("<div id='con_"+i+"' class='divcon'>"+i+"</div>");
        $('#con_'+i).css("background-color",color[i-1]);
    }
    let divArr = $("#content div");
    divArr.each(function(){//遍历content下的每个div
        $(this).click(function(){
            $(this).css('background-color','white');//单击后的颜色
            divArr.unbind('click');//冻结单击事件
            let a =$(this);
            a.attr('id','r');//设置id
            $.getJSON("hou.php",function(json){//从后台获取数据
                let prize = json.yes;
                a.text(prize);   
                //其他块的数据
                var nolist = eval(json.no);//将json转为数組        
                divArr.not($('#r')[0]).each(function(){//遍历content下的每个非id=r的div
                    $(this).text(nolist[0]);//设置数据
                    nolist.splice(0,1);//去除数组第一个
                    console.log(nolist);
                });
            }) 
        });
    });
</script>

后端文件

<?php
 //概率計算函數
function get_rand($proArr){
    $result = "";
    //概率函數的總概率精度
    $proSum = array_sum($proArr);
    //概率數組循環
    foreach($proArr as $key=>$proCur){
        $randNum = mt_rand(1,$proSum);
        if($randNum <= $proCur){
            $result = $key;
        break;
        }else{
            $proSum -= $proCur;
        }
    }
    unset($proArr);
    return $result;
}

$prize_arr = array(
    array('id'=>1,'prize'=>'點    讚','v'=>2),
    array('id'=>2,'prize'=>'投    幣','v'=>6),
    array('id'=>3,'prize'=>'關    注','v'=>8),
    array('id'=>4,'prize'=>'划    水','v'=>12),
    array('id'=>5,'prize'=>'划    水','v'=>12),
    array('id'=>6,'prize'=>'下次一定','v'=>15),
    array('id'=>7,'prize'=>'下次一定','v'=>15),
    array('id'=>8,'prize'=>'下次一定','v'=>15),
    array('id'=>9,'prize'=>'下次一定','v'=>15)
);

foreach($prize_arr as $key=>$val){
    $arr[$val['id']] = $val['v'];
}
//根據概率獲得獎項id
$prid = get_rand($arr);

$res['yes'] = $prize_arr[$prid-1]['prize'];//中獎項
unset($prize_arr[$rid-1]);//將中獎項從數組中刪除
shuffle($prize_arr);//打亂數組順序
for($i=0;$i<count($prize_arr);$i++){
    $pr[] = $prize_arr[$i]['prize'];
}
$res['no'] = $pr;
echo json_encode($res);

糟糕的沙漠

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
php+jQuery 翻牌式抽奖

参考文章：https://itbyc.com/log/php/2454.html↓ 简单练习，没有实现翻牌效果：用户点击1-9中任意一个，模块内容改变。用户点击的块为抽奖结果（颜色变化）。前端文件<!DOCTYPE HTML><html><head> <title>抽奖</title> <meta charset='utf-8'/> <script src="jquery-1.11.1.min.
复制链接

扫一扫