首页 未分类

就在今天,我们班主任说要为宿舍定下舍规。一下子我就想到了:

犯 错 抽 奖

【成品图】

这个系统真的是自己一个字一个字敲出来的,累死我了

分析

首先分析一下整个项目。因为是抽奖系统,那肯定要后台记录,所以涉及到mysql和php;

实现

零:数据库设计

想法是设计四个字段:
id time tid result

id为正常的系统递增id(索引)
time为抽奖登记时的时间戳
tid为抽奖单号(后面有说是什么娃衣)
result为抽奖结果

事实证明可行。

一:配色(css)

配色方案我是选了极光色,也就是上一篇美化typecho的文章里面的后台配色(想不到吧我把它用到这里来了

效果的确是挺好的。

二:后台代码

只有一个lottery-js.php,可能会增加
上代码

<?php 
$sql_server = "0.0.0.0";
$sql_user = "YOURUSERNAME";
$sql_pass = "YOURPASSWORD";
$sql_db = "YOURDATABASE";

$tid = $_POST['tid'];//获取post数据

$conn = new mysqli($sql_server, $sql_user, $sql_pass, $sql_db);//连接数据库
if ($conn->connect_error) {//连接失败报错
    echo "Exception: 连接失败: " . $conn->connect_error ;
}

$result = mt_rand(1,9);//获取抽奖结果(为什么不加权?因为我不会,再见


$sql = "SELECT result FROM tickets WHERE tid='".$tid."'";//查重(也就是禁止二次抽奖
$res = mysqli_query($conn,$sql);

if( mysqli_fetch_assoc($result)["result"] != -1 )
{
    echo -1;//存在重值,返回-1报错,结束
}

$sql = "UPDATE tickets SET result=".$result." WHERE tid='".$tid."'";//没有重值,更新数据表,走起
    $res = mysqli_query($conn,$sql);
if(!$res)
{
    echo -2;//数据表更新失败,-2报错,再见
}
else
{
    echo $result;//无错误(已经成功登记在数据库),返回真实抽奖数据
}
?>

三:前台代码

前台只有一个页面index.php
老规矩贴代码,带注释的那种

<html>
<head>
    <meta set charset="utf-8"></meta>
    <title>惩罚抽奖 QWQ</title>
    <script src="./script/jquery-3.4.1/jquery-3.4.1.min.js"></script><!--引入jQuery-->
    <?php include("index.css"); ?><!--引入css文件-->
</head>

<body>
    <div class="main">
        <center><div class="txtb" style="width:50%;top:-15%;"><!--单号-->
           <input type="text" id="name" name="name" value="" placeholder="" autofocus />
           <span data-placeholder="单号"></span>
        </div></center>
        <center><div class="lottery"><!--抽奖系统-->
            <table class="gridtable" border="1" style="width:50%;height:50%;">
                <tr>
                    <td width="30%" height="30%" id="t1"><strong><center>历史提纲 * 2</center></strong></td>
                    <td width="30%" height="30%" id="t2"><strong><center>《木兰诗》默一遍</center></strong></td>
                    <td width="30%" height="30%" id="t3"><strong><center>摘抄满分作文 * 1</center></strong></td>
                </tr>
                <tr>
                    <td height="30%" id="t4"><strong><center>默写《古代诗歌四首》</center></strong></td>
                    <td height="30%" id="t5"><strong><center>政治提纲 * 2</center></strong></td>
                    <td height="30%" id="t6"><strong><center>豁免</center></strong></td>
                </tr>
                <tr>
                    <td height="30%" id="t7"><strong><center>默写《古代诗歌五首》</center></strong></td>
                    <td height="30%" id="t8"><strong><center>抄写M4课文</center></strong></td>
                    <td height="30%" id="t9"><strong><center>再来一次</center></strong></td>
                </tr>
            </table>
        </div></center>
        <center>
            <button id="start" class="button" style="">开始</button>
        </center>
        <center>
            <p id="congratulations" style="visibility:hidden">恭喜中奖!</p><!--中奖提示(默认隐藏)-->
        </center>
        <center><a href="info.php">中奖信息公布</a>&nbsp;•&nbsp;<a href="./admin">管理员登录</a></center><!--暂时没有实现,以后会更新-->
    </div>
    <p style="top:90%">Copyright &copy;2020 <a href="https://www.lzcapp.xyz">lzcBlog</a><br>All Rights Reserved.</p>
</body>
<script type="text/javascript">
$("#start").click(function(){/*核心部分js代码*/
    if($("#name").val()=="")
    {
        alert("单号为空,数据将不被记录!");//为什么不强制退出?给童鞋们皮的空间,嘿嘿
    }
    
    $.post("lottery-js.php",{"tid":$("#name").val()},function(data,status){//单号post到后台进行处理
        //alert(data.substr(0,8));
        if(data == -1)
        {
            alert("该单号已经抽取过!");//防作弊,抽过一次ban掉单号
        }
        if(data == -2)
        {
            alert("技术错误:无法更新数据表。请刷新或联系我。")//服务器错误提示
        }
        /*if(data.substr(0,0) == "E")
        {
            target = -1;
            alert("抽取失败,请刷新页面重试或联系我。错误信息:" + data);
            location.replace(location.href);
        }*///弃用
        //重置样式
        $("#t" + data).css("background","#FF9900");//高亮中奖项目
        $("#congratulations").css("visibility","visible");//显示中奖提示
        $("#start").attr("disabled","disabled");//禁用抽奖按钮
    });
});
</script>

</html>

核心抽奖功能已经全部实现。

由于这个程序在3小时内实现,所以管理员系统和公布系统还没完成,未来的某个时间可能会完善。

好困,睡觉去了。




文章评论

TC