转盘抽奖

最新推荐文章于 2024-10-09 16:08:50 发布

原创最新推荐文章于 2024-10-09 16:08:50 发布 · 699 阅读

CC 4.0 BY-SA版权

使用javascript、html、css、jquery和php实现一个转盘抽奖，让你窥探抽奖背后的秘密
index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zhuanpan</title>
<style type="text/css">
div{margin: 100px auto 0px;width:500px;height:250px;border:3px solid black;}
li{width:129px; height:59px; border:3px solid #000; float:left; margin:8px 0 0 8px; list-style:none;}
.btn{ border:3px solid red;cursor:pointer}
.cur{ border:3px solid red;}
</style>
</head>
<body>
    <div>
        <ul>
            <li id="c1"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img1.jpg" /></li>
            <li id="c2"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img2.jpg" /></li>
            <li id="c3"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img3.jpg" /></li>
            <li id="c8"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img4.jpg" /></li>
            <li class="btn"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/btn.jpg" onclick="start();"/></li>
            <li id="c4"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img1.jpg" /></li>
            <li id="c7"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img2.jpg" /></li>
            <li id="c6"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img3.jpg" /></li>
            <li id="c5"><img src="http://7xl6jx.com1.z0.glb.clouddn.com/img4.jpg" /></li>
        </ul>
    </div>
<script type="text/javascript" src="//libs.baidu.com/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
// 整个转动过程所需的步骤
var step = [
['c1',0],    // 第一个元素特殊设置
['c1', 500],
['c2', 400],
['c3', 300],
['c4', 200],
['c5', 200],
['c6', 200],
['c7', 200],
['c8', 200],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 100],
['c3', 100],
['c4', 100],
['c5', 100],
['c6', 100],
['c7', 100],
['c8', 100],
['c1', 100],
['c2', 200],
['c3', 300],
['c4', 400],
['c5', 400],
['c6', 400],
['c7', 400],
['c8', 400],
['c1', 400],
['c2', 400],
['c3', 400],
['c4', 400],
['c5', 400],
['c6', 400],
['c7', 400],
['c8', 400]
];

// 记录当前步数，即step数组的下标
var current = 1;
// 指定需要停在图片的序号
var data = 5;  
// 图片总量（不包括按钮）
var total = 8;
// 转盘结束时弹窗显示的文字 
var msg = '';

// 设置样式和重新设置定时器
function run(){
    // 删除之前设置的cur类
    $('#'+step[current-1][0]).removeClass('cur');
    // 为当前元素设置cur类
    $('#'+step[current][0]).addClass('cur');

    // 判断step数组所有步骤是否已经走完
    if(step.length - current - 1 + data == total){  
        alert(msg);
        window.location.reload();
    }else{
        // 重新设置定时器
        setTimeout('run()', step[current][1]);
        current++;
    }
}

function start(){
    $.ajax({ 
        url: "http://127.0.0.1:8088/data/index.php", 
        type:"GET",
        dataType: "json", 
        success: function(d){
            msg = d[0];  // 转盘结束时弹窗显示的文字
            data = d[1]; // 指定需要停在图片的序号
            run();
        }
    });
}
</script>
</body>
</html>

index.php

<?php

$category = 3;   // 奖品种类数
$lucknum  = 0;   // 幸运数字

// 每个奖品依次中奖的概率
$probability = array(
    10,  // 三等奖
    20,  // 二等奖
    30,  // 一等奖
);

// 奖品名称
$prizename = array(
    'third prize',
    'second prize',
    'first  prize',
);

// 奖品图片在页面上的序号,返回给前端需要
$prizecode = array(
    3,  // 三等奖图片，也可以是6
    2,  // 二等奖图片，也可以是7
    1,  // 一等奖图片，也可以是4
);

// 随机选择对哪个奖品种类进行抽奖
$caterandom = mt_rand(0, $category - 1);  

// 对之前随机选择的奖品种类进行抽奖
$random = mt_rand(0, $probability[$caterandom]);  

if($random == $lucknum){ 
    // 如果抽中，返回奖品名称和奖品图片在页面上的序号
    $data = array(
        $prizename[$caterandom],
        $prizecode[$caterandom],
    );
// 以json格式返回给前端js
    echo json_encode($data);
}else{
    // 未抽中，返回谢谢参与文字和图片的序号 
    $data = array(
        'Thank you!',
        5,
    );
    echo json_encode($data);
}
?>