hexo基于leancloud创建表白墙的应用
本文最后更新于：2024年12月14日 下午
hexo基于leancloud创建表白墙的应用
基于上一个创建的html应用漂流瓶，突然来了个灵感，于是就开始动手开发试试看，对于完全没有学过任何一款编程程序的我，经过这几天的反复查资料，反复测试，终于是搞出来了。掌声鼓励一下我自己，在这里也要感谢我师父（ChatGPT），不厌其烦的回答我的所有问题，哈哈哈哈哈~~~
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="/js/av-min.js"></script>
<script src="/jquery/jquery-1.10.2.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="style.css">
<link rel="icon" href="favicon.png">
<meta name="description" content="基于leancloud开发的一款网页应用，表白墙，结合css，JavaScript，实现静态网页的交互应用">
<meta name="keywords" content="告白, 表白墙, 个人博客, 网页应用">
<meta property="og:image" content="https://imgsrc.baidu.com/forum/pic/item/0b46f21fbe096b63fbe998644a338744ebf8ac16.jpg">
<meta name="author" content="Wenbin">
<audio id="background-music" autoplay loop>
<source src="/audio/bgm.mp3" type="audio/mpeg">
</audio>
<title>表白墙 - Wenbin's blog</title>
</head>
<body>
<div class="mask" id="loading">
<div class="jiazai">
<div class="loader"></div>
<p>Loading...</p>
</div>
</div>
<div class='real_mask' style="
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
z-index: -77;
"></div>
<div id="banner_video_insert">
</div>
<div id='vvd_banner_img'>
</div>
</div>
<div id="banner"></div>
<div class="banner" id='banner' >
<div class="full-bg-img" >
<script>
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),
isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),
isAndroid = ua.match(/(Android)\s+([\d.]+)/),
isMobile = isIphone || isAndroid;
function set_video_attr(id){
var height = document.body.clientHeight
var width = document.body.clientWidth
var video_item = document.getElementById(id);
if (height / width < 0.56){
video_item.setAttribute('width', '100%');
video_item.setAttribute('height', 'auto');
} else {
video_item.setAttribute('height', '100%');
video_item.setAttribute('width', 'auto');
}
}
$.getJSON('/js/video.json', function(data){
if (true){
var video_list_length = data.length
var seed = Math.random()
index = Math.floor(seed * video_list_length)
video_url = data[index][0]
pre_show_image_url = data[index][1]
banner_obj = document.getElementById("banner")
banner_obj.style.cssText = "background: url('" + pre_show_image_url + "') no-repeat; background-size: cover;"
vvd_banner_obj = document.getElementById("vvd_banner_img")
vvd_banner_content = "<img id='banner_img_item' src='" + pre_show_image_url + "' style='height: 100%; position: fixed; z-index: -999'>"
vvd_banner_obj.innerHTML = vvd_banner_content
set_video_attr('banner_img_item')
if (!isMobile) {
video_html_res = "<video id='video_item' style='position: fixed; z-index: -888;' muted='muted' src=" + video_url + " autoplay='autoplay' loop='loop'></video>"
document.getElementById("banner_video_insert").innerHTML = video_html_res;
set_video_attr('video_item')
}
}
});
if (!isMobile){
window.onresize = function(){
set_video_attr('video_item')
}
}
</script>
</div>
</div>
</div>
<div class="buju">
<div class="dingbu">
<div class="link">
<a href="https://bin862324915.github.io/" target="_blank">
<button class="button">
首页
<div class="hoverEffect">
<div>
</div>
</div></button>
</a>
</div>
<div class="link">
<a href="https://github.com/bin862324915/biaobaiqiang" target="_blank">
<button class="button">
GitHub
<div class="hoverEffect">
<div>
</div>
</div></button>
</a>
</div>
<div class="link">
<a href="https://bin862324915.github.io/about/" target="_blank">
<button class="button">
关于
<div class="hoverEffect">
<div>
</div>
</div></button>
</a>
</div>
</div>
<div class="zhuti">
</div>
<div class="dibu">
<div class="fabiao" id="fbyg">
<button>
<svg class="empty" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32"><path fill="none" d="M0 0H24V24H0z"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2zm-3.566 15.604c.881-.556 1.676-1.109 2.42-1.701C18.335 14.533 20 11.943 20 9c0-2.36-1.537-4-3.5-4-1.076 0-2.24.57-3.086 1.414L12 7.828l-1.414-1.414C9.74 5.57 8.576 5 7.5 5 5.56 5 4 6.656 4 9c0 2.944 1.666 5.533 4.645 7.903.745.592 1.54 1.145 2.421 1.7.299.189.595.37.934.572.339-.202.635-.383.934-.571z"></path></svg>
<svg class="filled" height="32" width="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H24V24H0z" fill="none"></path><path d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"></path></svg>
发表一个
</button>
</div>
</div>
<div class="mask" id="maskbiao">
<div class="bbkung" id="bbk">
<textarea class="name" id="mynamein" placeholder="请输入你的昵称" oninput="limitCharacters(this, 5)"></textarea><br>
<textarea class="name" id="younamein" placeholder="请输入她/他的昵称" oninput="limitCharacters(this, 5)"></textarea><br>
<textarea class="zwk" id="zhengwenin" placeholder="在这里输入你想说的话..." oninput="limitCharacters(this, 150)"></textarea>
<div class="button-container">
<div class="link" id="qx">
<button class="button">
取消
<div class="hoverEffect">
<div>
</div>
</div></button>
</div>
<div class="link" id="tj">
<button class="button">
提交
<div class="hoverEffect">
<div>
</div>
</div></button>
</div>
</div>
</div>
</div>
<div class="modal" id="modal">
<p id="modalText"></p>
<button class="button" id="closeModal">
好的
<div class="hoverEffect">
<div>
</div>
</div></button>
</div>
</div>
<input id="checkbox" type="checkbox">
<label class="Switch" for="checkbox">
</label>
<script src="app.js"></script>
<script>
window.addEventListener('load', function() {
var colaElement = document.getElementById('loading');
if (colaElement) {
colaElement.style.display = 'none';
}
});
</script>
<script>
var audio = document.getElementById("background-music");
var checkbox = document.getElementById("checkbox");
checkbox.addEventListener("click", function() {
if (audio.paused) {
audio.play();
} else {
audio.pause();
}
});
</script>
</body>
</html>CSS
html,body {
background-size:cover;
background-repeat:no-repeat;
background-position:50%;
background-attachment:fixed;
font-family:LXGW Wenkai Screen;
margin:0;
padding:0;
overflow:hidden;
z-index:-999
}
#loading {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:#efc9e0;
z-index:999;
display:block
}
.loader {
width:7em;
height:5em;
position:relative;
animation:beat 1s infinite
}
.jiazai {
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
user-select:none
}
#loading p {
padding:16px
}
.loader::before,.loader::after {
content:"";
position:absolute;
top:0;
width:50px;
height:80px;
border-radius:5em 5em 0 0;
animation:coldblue 1s infinite
}
.loader::before {
left:50px;
transform:rotate(-45deg);
transform-origin:0 100%
}
.loader::after {
left:0;
transform:rotate(45deg);
transform-origin:100% 100%
}
@keyframes beat {
0% {
transform:scale(1)
}
50% {
transform:scale(1.2)
}
100% {
transform:scale(1)
}
}@keyframes coldblue {
0%,100% {
background-color:#c61717
}
50% {
background-color:#c61717
}
}video {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-20
}
.modal {
display:none;
position:fixed;
top:40%;
left:50%;
transform:translate(-50%,-50%);
padding:35px;
z-index:999;
box-shadow:0 0 10px rgba(0,0,0,.2);
text-align:center;
background-color:#96ddb8;
border-radius:10px
}
#closeModal {
margin-top:40px
}
#biaoti {
color:#000;
height:28px;
padding-left:10px;
border-bottom:.5px dashed #99acb5;
margin:5px 0 0
}
#neirong {
padding-left:6px;
border-bottom:.5px dashed #99acb5;
margin:2px 0 0;
height:235px;
text-decoration:underline
}
#shijian {
margin:3px 5px 0 0;
text-align:right
}
.son {
width:260px;
height:300px;
position:absolute;
border-radius:5px;
font-family:LXGW Wenkai Screen;
user-select:none
}
.son:hover {
box-shadow:1px 1px 5px rgba(0,0,0,.57);
-webkit-box-shadow:1px 1px 5px 0 rgba(0,0,0,.57);
-moz-box-shadow:1px 1px 5px 0 rgba(0,0,0,.57)
}
.zhuti {
height:98vh;
width:100%;
margin:auto;
position:relative
}
.dingbu {
display:flex;
margin:auto;
z-index:99;
position:fixed;
top:2.5%;
left:50%;
transform:translate(-50%,-50%)
}
.dibu {
width:100%;
margin:auto
}
#bbk {
position:fixed;
top:45%;
left:50%;
transform:translate(-50%,-50%);
width:auto;
height:auto;
z-index:30;
display:none
}
#bbk textarea.name {
width:350px;
height:25px;
border-radius:4px
}
#bbk textarea.zwk {
width:350px;
height:400px;
border-radius:4px;
//background-image:url('../img/pz1.png');
background-position:bottom;
background-repeat:no-repeat;
background-size:70%
}
#bbk 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-around;
padding-top:10px
}
.throwbtn {
width:45%;
padding:10px;
text-align:center;
background-color:#00a0e9;
color:#fff;
border:none;
border-radius:5px;
cursor:pointer
}
.mask {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,.3);
z-index:99;
display:none
}
.button {
margin:5px;
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 30px;
border:0;
position:relative;
overflow:hidden;
border-radius:10rem;
transition:all .02s;
font-weight:700;
color:#252525;
z-index:0;
box-shadow:0 0 7px -5px rgba(0,0,0,.5);
font-family:LXGW Wenkai Screen
}
.button:hover {
background:#c1e4f8;
color:#210055
}
.button:active {
transform:scale(.97)
}
.hoverEffect {
position:absolute;
bottom:0;
top:0;
left:0;
right:0;
display:flex;
align-items:center;
justify-content:center;
z-index:1
}
.hoverEffect div {
background:#de004b;
background:linear-gradient(90deg,#de004b 0%,#bf46ff 49%,#00d4ff 100%);
border-radius:40rem;
width:10rem;
height:10rem;
transition:.4s;
filter:blur(20px);
animation:effect infinite 3s linear;
opacity:.5
}
.button:hover .hoverEffect div {
width:8rem;
height:8rem
}
@keyframes effect {
0% {
transform:rotate(0)
}
100% {
transform:rotate(360deg)
}
}.fabiao {
z-index:99;
position:fixed;
bottom:-2%;
left:50%;
transform:translate(-50%,-50%)
}
.fabiao button {
display:flex;
justify-content:center;
align-items:center;
padding:15px;
box-shadow:rgba(10,37,64,.35)0 -2px 6px inset;
background-color:#e8e8e8;
font-size:20px;
font-weight:900;
color:#867c7c;
font-family:monospace;
transition:transform 400ms cubic-bezier(.68,-.55,.27,2.5),border-color 400ms ease-in-out,background-color 400ms ease-in-out;
word-spacing:-2px;
border-color:#ffe2e2;
border-style:solid;
border-width:5px;
border-radius:50px;
font-family:LXGW Wenkai Screen
}
@keyframes movingBorders {
0% {
border-color:#fce4e4
}
50% {
border-color:#ffd8d8
}
90% {
border-color:#fce4e4
}
}.fabiao button:hover {
background-color:#eee;
transform:scale(105%);
animation:movingBorders 3s infinite
}
.fabiao button svg {
margin-right:10px;
fill:#ff6e6e;
transition:opacity 100ms ease-in-out
}
.filled {
position:absolute;
opacity:0;
left:16px
}
@keyframes beatingHeart {
0% {
transform:scale(1)
}
15% {
transform:scale(1.15)
}
30% {
transform:scale(1)
}
45% {
transform:scale(1.15)
}
60% {
transform:scale(1)
}
}button:hover .empty {
opacity:0
}
.fabiao button:hover .filled {
opacity:1;
animation:beatingHeart 1.2s infinite
}
#checkbox {
display:none
}
.Switch {
width:40px;
height:60px;
background-color:#fff;
border-radius:15px;
z-index:99;
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:2px 0 5px rgba(0,0,0,.274)inset,-2px 0 5px rgba(255,255,255,.411)inset;
position:fixed;
bottom:0%;
right:2%;
transform:translate(-50%,-50%)
}
.Switch::before {
content:"";
background-color:#f6a8e0;
position:absolute;
height:80%;
width:5px;
border-radius:5px
}
.Switch::after {
background-color:#eb6dd2;
border:1px solid #1ee3d8;
content:"";
position:absolute;
height:5px;
width:25px;
top:15px;
transition-duration:.3s;
box-shadow:5px 2px 5px rgba(8,8,8,.288);
border-radius:5px
}
#checkbox:checked+.Switch::after {
transform:translateY(25px);
transition-duration:.3s;
border:1px solid #a8a8af;
background-color:#e3cedb
}
JavaScript
AV.init({
appId: 'appId',
appKey: 'appKey',
serverURL: 'serverURL',
});
const mynameInput = document.getElementById('mynamein');
const younameInput = document.getElementById('younamein');
const zhengwenInput = document.getElementById('zhengwenin');
const tjButton = document.getElementById('tj');
const modal = document.querySelector('#modal');
const modalText = document.querySelector('#modalText');
const closeModalButton = document.querySelector('#closeModal');
closeModalButton.addEventListener('click', () => {
modal.style.display = 'none';
});
modal.addEventListener('click', (event) => {
if (event.target === modal) {
modal.style.display = 'none';
}
});
tjButton.addEventListener('click', () => {
const myname = mynameInput.value;
const youname = younameInput.value;
const inputText = document.getElementById("zhengwenin").value;
const convertedText = inputText.replace(/\n/g, "<br>");
const zhengwen = convertedText;
if (myname && youname && zhengwen) {
const BBQ = AV.Object.extend('bbq');
const bbqRecord = new BBQ();
bbqRecord.set('from', myname);
bbqRecord.set('to', youname);
bbqRecord.set('data', zhengwen);
bbqRecord.save().then(() => {
bbknone();
mynameInput.value = '';
younameInput.value = '';
zhengwenInput.value = '';
modalText.textContent = '已发表，刷新网页查看哦(｡♥ᴗ♥｡) ';
modal.style.display = 'block';
return;
}).catch(() => {
modalText.textContent = '出错啦！请重试哦(✖人✖)';
modal.style.display = 'block';
return;
});
} else {
modalText.textContent = '信息都填写了嘛？( • ̀ω•́ )✧';
modal.style.display = 'block';
return;
}
});
const fbygBlock = document.getElementById('fbyg');
const maskbiaoBlock = document.getElementById('maskbiao');
const bbkBlock = document.getElementById('bbk');
const qxan = document.getElementById('qx');
fbygBlock.addEventListener('click', () => {
maskbiaoBlock.style.display = 'block';
bbkBlock.style.display = 'block';
});
function bbknone() {
const input1 = document.getElementById('mynamein');
const input2 = document.getElementById('younamein');
const input3 = document.getElementById('zhengwenin');
input1.value = '';
input2.value = '';
input3.value = '';
maskbiaoBlock.style.display = 'none';
bbkBlock.style.display = 'none';
}
qxan.addEventListener('click', () => {
bbknone();
modal.style.display = 'none';
});
const parentBlock = document.querySelector('.zhuti');
const query = new AV.Query('bbq');
query.descending('createdAt');
const processLeanCloudData = new Promise((resolve, reject) => {
query.find().then((bbqRecords) => {
bbqRecords.forEach((record) => {
const from = record.get('from');
const to = record.get('to');
const data = record.get('data');
const createdAt = record.get('createdAt');
const date = new Date(createdAt);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0');
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');
const formattedDate = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
const zhutiBlock = document.querySelector('.zhuti');
const zhutiWidth = zhutiBlock.offsetWidth;
const zhutiHeight = zhutiBlock.offsetHeight;
const randomX = Math.floor(Math.random() * (zhutiWidth - 260));
const randomY = Math.floor(Math.random() * (zhutiHeight - 300));
const son = document.createElement('div');
son.className = 'son';
son.innerHTML = `
<p id="biaoti">${from} 想对 ${to} 说:</p>
<p id="neirong">${data}</p>
<p id="shijian">${formattedDate}</p>
`;
const randomColor = getRandomBackgroundColor();
son.style.backgroundColor = randomColor;
son.style.left = `${randomX}px`;
son.style.top = `${randomY}px`;
zhutiBlock.appendChild(son);
});
resolve();
});
});
const initializeDragFunction = new Promise((resolve, reject) => {
processLeanCloudData.then(() => {
dragFn('.son', '.zhuti');
resolve();
});
});
Promise.all([processLeanCloudData, initializeDragFunction]).then(() => {
console.log(`
_ _ _ _
| | (_) | | | |
__ _____ _ __ | |__ _ _ __ | |__ | | ___ __ _
\\ \\ /\\ / / _ \\ '_ \\| '_ \\| | '_ \\ | '_ \\| |/ _ \\ / _\` |
\\ V V / __/ | | | |_) | | | | | | |_) | | (_) | (_| |
\\_/\\_/ \\___|_| |_|_.__/|_|_| |_| |_.__/|_|\\___/ \\__, |
__/ |
|___/
`);
});
function dragFn(dragObj, parent) {
$(dragObj).mousedown(function (e) {
var _this = $(this);
var parent_h = $(parent)[0].offsetHeight;
var parent_w = $(parent)[0].offsetWidth;
var drag_h = $(this)[0].offsetHeight;
var drag_w = $(this)[0].offsetWidth;
var dragX = e.clientX - $(this)[0].offsetLeft;
var dragY = e.clientY - $(this)[0].offsetTop;
$(this).css('z-index', '9').siblings().css('z-index', '1');
$(document).mousemove(function (e) {
var l = e.clientX - dragX;
var t = e.clientY - dragY;
if (l < 0) {
l = 0;
} else if (l > parent_w - drag_w) {
l = parent_w - drag_w;
}
if (t < 0) {
t = 0;
} else if (t > parent_h - drag_h) {
t = parent_h - drag_h;
}
_this.css({
left: l + 'px',
top: t + 'px',
});
});
});
$(document).mouseup(function () {
$(this).off('mousemove');
});
}
function getRandomBackgroundColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
const alpha = 0.9;
return `rgba(${r},${g},${b},${alpha})`;
}
function limitCharacters(textarea, maxCharacters) {
const text = textarea.value;
if (text.length > maxCharacters) {
textarea.value = text.substring(0, maxCharacters);
}
}好啦，以上就是表白墙的所有源码，点击这里可以查看本站示例。
劳动不易，知识无价。如果本篇文章对你有起到一点帮助的话，欢迎打赏ლ(｀∀´ლ)
微信支付
支付宝支付
“请博主喝咖啡☕️”
