搜索
查看: 2288|回复: 0

二维码手机签到留言墙

[复制链接]

599

主题

877

帖子

2238

积分

管理员

本论坛第一帅

Rank: 9Rank: 9Rank: 9

积分
2238

热心会员推广达人宣传达人突出贡献优秀版主荣誉管理论坛元老

QQ
发表于 2018-12-3 19:15:26 | 显示全部楼层 |阅读模式
php源码:

<?php
    $mysql_conf = array(
    'host'    => '127.0.0.1:3306', 
    'db'      => 'qrcode', 
    'db_user' => 'root', 
    'db_pwd'  => 'ppppppppppppppp.', 
    );
    $pdo = new PDO("mysql:host=" . $mysql_conf['host'] . ";dbname=" . $mysql_conf['db'], $mysql_conf['db_user'], $mysql_conf['db_pwd']);//
    if (isset($_POST['name'])) {

    $sql="INSERT INTO qrcode (`name`,`major`,`phone`,`comment`) VALUES (?,?,?,?)";
    $go = $pdo->prepare($sql);
    $go->bindValue(1, $_POST['name'], PDO::PARAM_STR);
    $go->bindValue(2, $_POST['major'], PDO::PARAM_STR);
    $go->bindValue(3, $_POST['phone'], PDO::PARAM_STR);
    $go->bindValue(4, $_POST['comment'], PDO::PARAM_STR);
    $rs = $go->execute();
    if ($rs) {
        echo "<!DOCTYPE html>
        <html>
        <head>
            <title>签到成功</title>
            <meta charset='UTF-8'>
            <script>alert('签到成功');</script>
        </head>
        <body>
            <h1>签到成功请关闭窗口</h1>
        </body>
        </html>";
    }else{
        echo "<script>alert('签到失败')</script>";
    }
       $pdo = null;//关闭连接
    return 0;

    }
    elseif (isset($_GET['i'])) {
        $sql="SELECT count(*) AS 'C' FROM qrcode";
        $go = $pdo->prepare($sql);
        $rs = $go->execute();
        $row = $go->fetch(PDO::FETCH_ASSOC);
        $c = $row['C'];
        $c=$c-$_GET['i'];
        $sql="SELECT * FROM qrcode ORDER BY `created_at` DESC LIMIT ".$c;
        $go = $pdo->prepare($sql);
        $rs = $go->execute();
        $arr=[];
        while ($row = $go->fetch(PDO::FETCH_ASSOC)) 
        {
            if ($row['name']) {
                $arr[]=$row['name'].':'.$row['comment'];
            }
        }
        $pdo = null;//关闭连接
        echo(json_encode($arr,256));
        return 0;
    }

?>


留言墙源码:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>签到留言墙</title>
<script src="vue.js"></script>
<script src="axios.min.js"></script>
<style type="text/css">
*{
    margin:0;
    padding:0;
    list-style: none;
    border:0;
}
body{
    background: url('bg.jpg');background-size: cover;
    opacity:0.7;
}
.main{
    width: 1024px;
    height: 768px;
    margin:0 auto;
    position: relative;
}
.main img{
    position: absolute;
    right: 0;
    bottom:0;
    width: 100px;
    height: 100px;
}
#canvas{
    display: block;
    background: #000;
}
</style>
</head>
<body>
<h1 style="margin: 20px;font-size:500%;color:white;text-align:center;"><img style="width:140px;height:140px;" src='qr.png'>扫描QRCODE留言试试看</h1>
 <script type="text/javascript">
   var vm=new Vue({
        el:'#main',
        created:function(){
            this.getItems();
        },
        data:{
         now:0,
         jsonData:[] 
        },
        methods:{
            getItems:function(){     
                axios.get('/server/index.php?i='+this.now)
                  .then(function (response) {

                    for(items in response.data){
                        vm.jsonData.unshift(response.data[items]);
                    }
                    vm.now+=response.data.length;
                    console.log(vm.now)
                  })
                  .catch(function (response) {
                    console.log(response);
                  });

            }
        }
    })</script>
<div id="main" class="main">
    <canvas  id="canvas">嗨帅哥您的浏览器不支持canvas赶紧去升级吧</canvas>

</div>

<script type="text/javascript">

    var canvas=document.getElementById('canvas');
    var ctx=canvas.getContext("2d");
    var width=1024;
    var height=768;
    var colorArr=["yellow","pink","orange","red","green",'blue'];
    var textArr=[
        "我用双手成就你的梦想",
    ]
    canvas.width=width;
    canvas.height=height;
    var image=new Image();

    ctx.font = "35px Courier New";
    var numArrL=[700,720,750,790,800,900,940,970,999,1022];//初始的X
    var numArrT=[80,130,39,300,550,400,600,630,230,150,230,620,500,690,730,760,380,210];//初始的Y
    setInterval(function(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    for(var j=0;j<vm.jsonData.length;j++){
        numArrL[j]-=(j+1)*0.6;
        ctx.fillStyle = colorArr[j]
        ctx.fillText(vm.jsonData[j],numArrL[j],numArrT[j]);
    }
    for(var i=0;i<vm.jsonData.length;i++){
        if(numArrL[i]<=-500){
            numArrL[i]=canvas.width;
        }
    }
    ctx.restore();
    },30)
     setInterval(function(){vm.getItems()},10000)
</script>

</body>
</html>


2404232158.png
有志者,事竟成,破釜沉舟,百二秦关终属楚. 苦心人,天不负, 卧薪尝胆 ,三千越甲可吞吴
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

温馨提示
1:发帖请遵守《中华人民共和国网络安全法》,发帖内容不得维护国家的、集体的、个人的利益。
2:请勿发布恶意攻击他人的技术文章、工具、和使用教程,发现后删帖处理。
3:本站的目的在于让更多的人了解网络安全,避免受到他人的恶意攻击。
4:本站中的部分文章,可能会出现一些“技术类手段”,但这仅仅为学习演示所用,而非恶意传播技术。
5:本站中的部分文章,可能转载自互联网。如有侵权行为,联系我们删除即可。
6:学习仅是充实头脑,切勿恶意攻击个人、企业等。所造成的法律后果一切由自己承担,本站及其站长概不负责。
朕知道了
快速回复 返回顶部 返回列表