时间轴日记
时间轴日记 网址：http://120.78.191.175/timediary/
Bmob js 文档网址：http://doc.bmob.cn/data/wechat_app_new/index.html
代码如下：
<!DOCTYPE html>
<html>
<head><title>时间轴日记</title><meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><meta name="apple-mobile-web-app-capable" content="yes" /><link rel="stylesheet" type="text/css" href="css/iconfont/iconfont.css"><style type="text/css">body{background-color: #EFEFEF;padding: 0;margin: 0;color: #999;}.write-wrapper{height: 3.4rem;line-height: 3.4rem;width: 74%;margin-left: 13%;margin-right: 13%;margin-top: 30px;box-shadow: 2px 3px 5px #e4e3e3;background-color: #FFFFFF;font-size: 15px;border-radius: 5px 5px 5px 5px;padding-bottom: 0.8rem;}.write-wrapper-text{font-size: 1.5rem;margin-left: 1.6rem;color: #444;}.write-wrapper-input{width: 79%;height: 2.0rem;font-size: 1.2rem;padding-left: 0.2rem;padding-right: 0.2rem;color: #555;}.write-wrapper-submit{height: 2.4rem;width: 4.0rem;font-size: 1.1rem;margin-left: 0.3rem;margin-top: 1.0rem;}.body{width: 74%;margin-left: 13%;margin-right: 13%;margin-top: 30px;box-shadow: 2px 3px 5px #e4e3e3;background-color: #FFFFFF;font-size: 15px;border-radius: 15px 5px 15px 5px;padding-bottom: 0.8rem;}.time{width: 100%;height: 4rem;line-height: 4rem;font-size: 1.6rem;color: #666;}.time-l{margin-left: 2%;}.wrapper{width: 100%;height: 3.3rem;line-height: 3.3rem;display: flex;flex-direction: row;margin-top: 0px;position: relative;}.left-wrapper{margin-left: 7%;}.sound{height: 3.3rem;width: 3.3rem;display: flex;flex-direction: column;align-items: center;}.sound-top{width: 0.1rem;height: 1.1rem;background-color: #d8d3d3;}.sound-middle{width: 1.1rem;height: 1.1rem;background-color: #fff;border-radius: 50%;border: 1px solid #ccc;}.sound-bottom{width: 0.1rem;height: 1.1rem;background-color: #d8d3d3;}.footer{height: 6rem;}.write{width: 2.4rem;height: 2.4rem;border-radius: 50%;position: fixed;bottom: 3.8rem;right: 10%;cursor:pointer;}.write-icon{font-size: 2.4rem;color: #999;border-radius: 50%;}</style><script type="text/javascript" src="js/Bmob-1.6.3.min.js"></script><script type="text/javascript">Bmob.initialize("dd3ef60ca4e5c6dc6c21db******", "5008b3c6118eda341e53f******");const query = Bmob.Query("timediary");query.find().then(res => {var str = "";var bmob=document.getElementById('bmob');var length = res.length;for (var i = 0; i < res.length; i++) {var dq_date=res[i].dq_date.trim();var createdAt = res[i].createdAt.substring(0,10).trim();if(dq_date == createdAt){str +='<div class="body" id="body">';str += '<div class="time"><span class="time-l" id="time_l">'+res[i].dq_date+'</span></div>';for (var i = 0; i < res.length; i++) {str +='<div class="wrapper" id="wrapper">';str += '<div class="left-wrapper" id="time">'+res[i].dq_time+'</div>';str += '<div class="sound" >';str += '<div class="sound-top"></div>';str += '<div class="sound-middle"></div>';str += '<div class="sound-bottom"></div>';str += '</div>';str += '<div class="right-wrapper" id="content">'+res[i].content+'</div>';str +='</div> ';}str +='</div>';bmob.innerHTML=str;}else{bmob.innerHTML="暂无笔记";}}});function beforeSubmit() {
var title = document.getElementById('title').value;var myDate = new Date();//获取系统当前时间// alert(myDate);var year= myDate.getFullYear(); //获取完整的年份(4位,1970-????)var month= myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)var day= myDate.getDate(); //获取当前日(1-31)var hours = myDate.getHours(); //获取当前小时数(0-23)var minutes = myDate.getMinutes(); //获取当前分钟数(0-59)var dq_date = year +'-'+xToxx(month)+'-'+xToxx(day);var dq_time = xToxx(hours)+':'+xToxx(minutes);if (title.length == 0 && title=="" ) {alert('请输入内容！');return false;} const query = Bmob.Query('timediary');query.set("content",title);query.set("dq_time",dq_time);query.set("dq_date",dq_date);query.save().then(res => {console.log(res)alert("发布成功！");}).catch(err => {console.log(err)alert("发布失败！");})}// 将小于10的数转换成 0 + num 的格式的方法 如：01、02、03function xToxx(num){
if (num<10) {return '0'+num;}else{return num;}}</script>
</head>
<body><div class="write-wrapper"><form action="#" method="post" onsubmit="return beforeSubmit()"><span class="write-wrapper-text">内容：</span><input class="write-wrapper-input" id="title" type="text" placeholder="时间轴笔记...." name="title" /><input class="write-wrapper-submit" type="submit" value="提交" /></form></div><div id="bmob"></div> <div class="footer"></div><div class="write"><i class="iconfont icon-jia write-icon"></i></div>
</body>
</html>