hexo基于leancloud创建漂流瓶应用

本文最后更新于：2023年10月27日凌晨

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&#39;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();
});