二维码手机签到留言墙
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);
}
vm.now+=response.data.length;
console.log(vm.now)
})
.catch(function (response) {
console.log(response);
});
}
}
})</script>
<div id="main" class="main">
<canvasid="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=;//初始的X
var numArrT=;//初始的Y
setInterval(function(){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.save();
for(var j=0;j<vm.jsonData.length;j++){
numArrL-=(j+1)*0.6;
ctx.fillStyle = colorArr
ctx.fillText(vm.jsonData,numArrL,numArrT);
}
for(var i=0;i<vm.jsonData.length;i++){
if(numArrL<=-500){
numArrL=canvas.width;
}
}
ctx.restore();
},30)
setInterval(function(){vm.getItems()},10000)
</script>
</body>
</html>
页:
[1]