全自动要饭系统(前端代码模仿)
PS：前几天看见一个全自动要饭系统的网站。看来有趣，希望自己写一个。于是开始Copy。。。
写了下。发现自己后端不知道怎么写。原网页应该是是用Bootstrap3+layer写的前端，对于支付没什么了解实在不知道从何下手，留个坑给自己吧。
<!doctype html>
<html lang = "zh-cn">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1">
<link rel = "stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
<script src = "https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src = "https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>
<script src = "https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src = "layer/layer.js"> </script>
<style>
.panel {
border: none;
border-radius: 10px;
box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);
-moz-box-shadow: 1px 1px 5px 5px rgba(169, 169, 169, 0.35);
}
</style>
<title>全自动要饭系统</title>
</head>
<body class = "mx-auto" background = "background.jpg">
<div class = "container text-center mt-3 mb-3">
<div class = "col-12 col-sm-10 col-lg-8 mx-auto">
<div class = "card panel">
<div class = "card-header" style = "background: linear-gradient(to right,#8ae68a,#5ccdde,#b221ff); height: 45px;"> <b>老板行行好吧~</b> </div>
<div class = "card-body">
<div class="alert alert-success">
<a href = ""> <img class = "rounded-circle" src = "protrait.jpg" width = "60px" height = "60px" alt = "Auto go begging system" /></a>
<br/>大哥哥大姐们啊！你们都是有钱的人呐～谁有那多余的零钱？给我这流浪的人啊...
</div>
<div class = "input-group mb-3">
<div class = "input-group-prepend"> <span class = "input-group-text"> 大佬人称 </span> </div>
<input type = "text" class = "form-control" name = "name" value = "只留钱不留名"/>
</div>
<div class = "input-group mb-3">
<div class = "input-group-prepend"> <span class = "input-group-text"> 施舍留言 </span> </div>
<input type = "text" class = "form-control" name = "message" id = "message" />
</div>
<div class = "input-group mb-3">
<div class = "input-group-prepend"> <span class = "input-group-text"> 施舍金额 </span> </div>
<input type = "text" class = "form-control" name = "money" id = "money" />
</div>
<button type="button" class="btn btn-success" style = "width:100%;" id = "pay">点击打赏</button>
</div>
</div>
<br/>
<div class = "card panel">
<div class="card-header" style = "background: linear-gradient(to right,#8ae68a,#5ccdde,#b221ff); height: 45px;">
<a class="card-link text-dark" data-toggle="collapse" href="#record"> <b>施舍记录</b> </a>
</div>
<div class = "collapse" id = "record">
<div class="card-body">
<table class="table table-striped">
<thead>
<tr>
<th>施舍日期</th>
<th>大佬尊称</th>
<th>施舍金额</th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr>
<td>2018-10-17</td>
<td>Doe</td>
<td>1.00元</td>
<td>successful</td>
</tr>
<tr>
<td>2018-10.17</td>
<td>M</td>
<td>2.00元</td>
<td>time out</td>
</tr>
<tr>
<td>2010-26-56</td>
<td>Dooley</td>
<td>5.02元</td>
<td>successful</td>
</tr>
</tbody>
</table>
</div>
<div class = "card-footer">
<div class="btn-group-sm">
<button type="button" class="btn btn-success">上一页</button>
<button type="button" class="btn btn-success">下一页</button>
</div>
<b>当前第<code>1</code>页，共<code>2</code>页，共<code>2</code>条施舍记录</b>
</div>
</div>
</div>
<br/>
<div class = "card panel">
<div class = "card-header" style = "background: linear-gradient(to right,#8ae68a,#5ccdde,#b221ff); height: 45px;"> <b>统计日志</b> </div>
<div class = "card-body">
<table class = "table table-bordered" >
<tbody>
<tr>
<th> 今日施舍次数 <br/> <code>1</code> <br/> 次 </th>
<th> 今日施舍金额 <br/> <code>2</code> <br/> 元 </th>
</tr>
<tr>
<th> 累计施舍次数 <br/> <code>2</code> <br/> 次 </th>
<th> 累计施舍金额 <br/> <code>3</code> <br/> 元 </th>
</tr>
</tbody>
</table>
</div>
<audio autoplay="autoplay">
<source src="bgm.mp3" type="audio/mp3"/>
</audio>
</div>
</div>
</div>
<script>
$("#pay").click(function () {
var str = "请选择支付方式:";
layer.confirm(str, {
btn: ['微信', '支付宝'],
title: "支付方式"
}, function () {
//微信API
}, function () {
//支付宝API
});
});
function randomMoney() {//随机金额和留言
var moneys = [
[0.66, '66大顺'],
[0.88, '恭喜发财'],
[1.1, '一生一世'],
[2.33, '笑看人生'],
[3.14, '真棒 (๑•̀ㅂ•́)و✧'],
[5.20, '爱你哟'],
[6.66, '真的很6']
];
var value = moneys[Math.round(Math.random() * (moneys.length - 1))];
$('#message').val(value[1]);
$('#money').val(value[0]);
}
randomMoney();
</script>
<!-- Bootstr4 练习页面
页面参考 https://pay.biezhi.me/
资料参考 http://www.runoob.com/bootstrap4/bootstrap4-tutorial.html
https://v4.bootcss.com/docs/4.0/examples/
-->
</body>
</html>
