Bmob 与 html 、javascript 结合 :做一个《时间轴日记》网页
程序员文章站
2024-03-24 13:25:28
...
时间轴日记
时间轴日记 网址：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、03
function 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>