hexo基于leancloud创建漂流瓶应用
本文最后更新于:2024年12月14日 下午
hexo基于leancloud创建漂流瓶应用
折腾了一个星期,终于把这个漂流瓶应用给搞出来了,其中过程是如何艰难的,就不细说了,直接上代码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/leancloud-storage@4.15.2/dist/av-min.js"></script>
<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-screen-webfont/style.css" media="print" onload="this.media='all'">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" href="img/favicon.png">
<meta name="description" content="漂流瓶">
<title>漂流瓶 - Wenbin's blog</title>
</head>
<body>
<svg viewBox="0 0 205 615" class="cola">
<path d="M47 595c-8 0-26-6-26-34V261c0-17 9-29 16-38s16-28 16-28L68 59l-4-5s3-30 7-36 14-6 32-6 28 0 32 6 7 36 7 36l-4 5 15 136s9 19 16 28 16 21 16 38v300c0 28-18 34-26 34H47z"></path>
</svg>
<div class="buju">
<div class="dingbu">
<div class="dingbu-daohang">
<div class="link">
<a href="https://bin862324915.github.io/" class="ding-link">首页</a>
<a href="https://github.com/bin862324915/piaoliuping" target="_blank" class="ding-link">GitHub</a>
<a href="https://bin862324915.github.io/about/" target="_blank" class="ding-link">关于</a>
</div>
</div>
</div>
<div class="zhuti">
<div class="mask" id="masklao">
<div class="lao">
<div class="getdata1">
<div class="getdata">
<p id="newname">你捡到了一个来自的漂流瓶</p>
<p id="newdata">内容...</p>
</div>
</div>
<div class="diu-anniu" id="diu">丢回海里</div>
</div>
</div>
<div class="mask" id="mask3">
<div class="newlaozi" id="newlz">
<img src="img/laozi.png" class="laozi">
</div>
</div>
<div class="mask" id="maskreng">
<div class="reng" id="ryg">
<textarea class="name" id="nameInput" placeholder="请输入你的昵称"></textarea><br>
<textarea class="zhengwen" id="zhengwenInput" placeholder="在这里输入你想说的话..."></textarea>
<div class="button-container">
<div class="throwbtn" id="tj">提交</div>
<div class="throwbtn" id="qx">取消</div>
</div>
</div>
</div>
<div class="modal" id="modal">
<p id="modalText"></p>
<button id="closeModal">知道啦</button>
</div>
</div>
<div class="dibu">
<nav class="mui-bar mui-bar-tab " id="nav"">
<a href="#" class="mui-tab-item mui-active" id="a1">
<span class="mui-tab-label">
<img src="img/reng.png" class="Throw" style="height:60px;width:60px;margin-top: 4px;">
</span>
</a>
<a href="#" class="mui-tab-item " id="a2">
<span class="mui-tab-label">
<img src="img/lao.png" style="height:60px;width:60px;margin-top: 4px;">
</span>
</a>
</nav>
</div>
<div class="bg">
<img class="img" src="img/pz2.png" img>
</div>
</div>
<script src="js/app.js"></script>
</body>
</html>
CSS
html,body {
height: 100%;
margin: 0;
padding: 0;
background-image: url(../img/body.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
font-family: LXGW Wenkai Screen;
}
button{
font-family: LXGW Wenkai Screen;
}
.cola {
--pathlength: 1384;
width: 45px;
fill: transparent;
stroke: black;
stroke-linecap: round;
stroke-width: 15px;
stroke-dashoffset: var(--pathlength);
stroke-dasharray: 0 var(--pathlength);
animation: loader 8s cubic-bezier(.5,.1,.5,1) infinite both;
}
@keyframes loader {
90%, 100% {
stroke-dashoffset: 0;
stroke-dasharray: var(--pathlength) 0;
}
}
.modal {
text-align: center;
display: block;
background-color: #9e9e9e4f;
border-radius: 10px;
}
.dingbu {
width: 100%;
}
.dingbu-daohang {
padding-top: 20px;
}
#closeModal {
border: none;
border-radius: 8px;
background-color: #00bcd46b;
height: 25px;
}
#closeModal:hover {
background-color: #00bcd4;
color: white;
}
.modal {
display: none;
position: fixed;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
background: #bcb8b89c;
padding: 20px;
z-index: 199;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}
.newlaozi {
display: none;
}
#newlz {
top: 65%;
left: 42%;
position: absolute;
animation-name: yidong;
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: 3;
}
.zhuti {
width: 100%;
height: 85vh;
font-size: 16px;
}
.ding-link {
text-decoration: none;
opacity: 0.8;
color: #1e1e21c7;
font-size: 20px;
}
.link {
text-align: center;
width: 180px;
border-radius: 5px;
margin: 0 auto;
background-color: #bdbec7ab;
}
.ding-link:hover {
color: #fcfffe;
background-color: #0000008c;
}
.mui-bar-tab .mui-tab-item {
display: table-cell;
overflow: hidden;
width: 1%;
height: 50px;
text-align: center;
vertical-align: middle;
white-space: nowrap;
text-overflow: ellipsis;
color: #929292;
}
.reng {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: auto;
height: auto;
z-index: 20;
display: none;
opacity: 0.8;
}
.reng textarea.name {
width: 350px;
height: 25px;
border-radius: 4px;
}
.reng textarea.zhengwen {
width: 350px;
height: 400px;
border-radius: 4px;
background-image: url('../img/pz1.png');
background-position: bottom;
background-repeat: no-repeat;
background-size: 70%;
}
.reng textarea {
display: block;
padding: 5px;
border: 1px solid #ccc;
width: 100%;
height: 100px;
resize: none;
border: none;
outline: none;
font-size: 17px;
font-family: LXGW Wenkai Screen;
}
.button-container {
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.throwbtn {
width: 45%;
padding: 10px;
text-align: center;
background-color: #00a0e9;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
#tj {
background-color: #4ac39bb3;
color: #ffffff;
}
#tj:hover {
background-color: #12e39e;
color: #121212;
}
#qx {
background-color: #4f15597d;
color: #ffffff;
margin-left: 40px;
}
#qx:hover {
background-color: #d836f3;
color: #00070c;
}
.lao-div {
width: 450px;
height: 600px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e0e0e0;
}
#newname {
font-size: 18px;
color: #333;
height: 30px;
padding-left: 20px;
border-bottom: 0.5px dashed #872626;
margin: 8px 0px 5px 0px;
}
#newdata {
font-size: 25px;
color: #666;
padding-left: 10px;
margin-top: 20px;
}
.lao {
position: fixed;
top: 45%;
left: 50%;
transform: translate(-50%, -50%);
width: 500px;
height: 600px;
z-index: 20;
border-radius: 5px;
display: none;
background-image: url('../img/pz1.png');
background-position: bottom;
background-repeat: no-repeat;
background-size: 80%;
background-color: #efe0b7;
}
.diu-anniu {
padding: 10px;
text-align: center;
background-color: #4def8c87;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
margin-top: 179px;
height: 30px;
font-size: 20px;
}
.diu-anniu:hover {
background-color: #3ede75ba;
color: #0b0b0c;
}
.getdata {
height: 413px;
}
.mask {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
display: none;
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes move-and-fade {
0% {
transform: translate(0, 0) scale(1);
opacity: 1;
}
50% {
transform: translate(-30px, -70px) scale(1);
opacity: 0.5;
}
100% {
transform: translate(200px, -150px) scale(0);
opacity: 0;
}
}
@keyframes yidong {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(200px, 0);
}
100% {
transform: translate(0, 0);
}
}
.animate {
animation: move-and-fade 2.5s linear forwards;
}
.bg {
top: 80%;
left: 50%;
display: none;
position: absolute;
background-size: cover;
}
.img {
animation: rotate 1s linear infinite;
width: 40px;
height: 69px;
}
JavaScript
window.addEventListener('load', function() {
var colaElement = document.querySelector('.cola');
if (colaElement) {
colaElement.style.display = 'none';
}
});
var ryg = document.getElementById('ryg');
var maskreng = document.getElementById('maskreng');
function showRyg() {
ryg.style.display = 'block';
maskreng.style.display = 'block';
}
function hideRyg() {
ryg.style.display = 'none';
maskreng.style.display = 'none';
}
var ryg = document.getElementById('ryg');
var mask = document.getElementById('masklao');
function showLao() {
ryg.style.display = 'block';
masklao.style.display = 'block';
}
function hideLao() {
ryg.style.display = 'none';
masklao.style.display = 'none';
}
const nameInput = document.querySelector('.name');
const zhengwenInput = document.querySelector('.zhengwen');
const tjButton = document.querySelector('#tj');
const qxButton = document.querySelector('#qx');
const rygDiv = document.querySelector('#ryg');
const modal = document.querySelector('#modal');
const modalText = document.querySelector('#modalText');
const div2 = document.querySelector('.bg');
const newlz = document.getElementById('newlz');
const mask3 = document.getElementById('mask3');
const Input1 = document.getElementById('nameInput');
const Input2 = document.getElementById('zhengwenInput');
Input1.addEventListener('input', function() {
if (Input1.value.length > 10) {
Input1.value = Input1.value.substring(0, 10);
}
});
Input2.addEventListener('input', function() {
if (Input2.value.length > 260) {
Input2.value = Input2.value.substring(0, 260);
}
});
tjButton.addEventListener('click', () => {
const name = nameInput.value;
const data = zhengwenInput.value;
if (!name.trim() || !data.trim()) {
modalText.textContent = '昵称和内容都要填写哦';
modal.style.display = 'block';
return;
}
const PLP = AV.Object.extend('plp');
const plp = new PLP();
plp.set('name', name);
plp.set('data', data);
plp.save().then(function(response) {
if (response && response.id) {
hideRyg()
nameInput.value = '';
zhengwenInput.value = '';
div2.classList.add('animate');
div2.style.display = 'block';
div2.addEventListener('animationend', () => {
div2.style.display = 'none';
div2.classList.remove('animate');
});
} else {
modalText.textContent = '出错啦...';
modal.style.display = 'block';
}
}).catch(function(error) {
console.error('数据提交出错:', error);
modalText.textContent = '出错啦...';
modal.style.display = 'block';
});
});
qxButton.addEventListener('click', () => {
nameInput.value = '';
zhengwenInput.value = '';
modal.style.display = 'none';
});
const closeModalButton = document.querySelector('#closeModal');
closeModalButton.addEventListener('click', () => {
modal.style.display = 'none';
});
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.style.display = 'none';
}
});
document.getElementById('a1').addEventListener('click', function() {
showRyg();
});
document.getElementById('qx').addEventListener('click', function() {
hideRyg();
});
var buttonA2 = document.getElementById('a2');
var buttonDiu = document.getElementById('diu');
var newname = document.getElementById('newname');
var newdata = document.getElementById('newdata');
var lao = document.querySelector('.lao');
buttonA2.addEventListener('click', function() {
var plpQuery = new AV.Query('plp');
plpQuery.count().then(function(count) {
if (count > 0) {
var randomIndex = Math.floor(Math.random() * count);
plpQuery.skip(randomIndex);
plpQuery.limit(1);
plpQuery.find().then(function(results) {
if (results.length > 0) {
var randomResult = results[0];
var name = randomResult.get('name');
var data = randomResult.get('data');
mask3.style.display = 'block';
newlz.classList.remove('newlaozi');
newname.textContent = '你捡到了一个来自 ' + name + ' 的漂流瓶';
newdata.textContent = data;
setTimeout(function() {
mask3.style.display = 'none';
newlz.classList.add('newlaozi');
showLao();
lao.style.display = 'block';
}, 5000);
} else {
console.log('没有找到数据。');
}
});
} else {
console.log('没有找到数据。');
}
});
});
buttonDiu.addEventListener('click', function() {
hideLao();
});
GitHub仓库地址:https://github.com/bin862324915/piaoliuping
目前只是测试了一下可以正常运行操作,可能后面会陆续出现bug,遇到问题欢迎随时留言通知我哈
微信支付
支付宝支付
“请博主喝咖啡☕️”