留言本
2017-05-19 本文已影响21人
土乒76
实现留言本的功能,仅靠HTML,CSS,JS是不够,还需要一点点后台相关的知识,例如PHP、数据库,下面是实现一个留言本的基本套路,麻雀虽小,五脏俱全!
需求
实现功能:在下图输入框中输出内容,点击留言,显示在下方列表中。
<img src="http:https://img.haomeiwen.com/i5826291/f31948f28477bf60.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240">
版本1
常规DOM操作
<!-- 规定以js-开头的专门用于DOM获取 -->
<div class="wrap" id="wrap">
<div class="text js-text" contenteditable="true"></div>
<div class="btn-wrap">
<span class="btn js-btn">留言</span>
</div>
<ul class="list js-list"></ul>
</div>
var Msg = (function(){
// 先获取DOM元素
var oWrap = document.getElementById("wrap"),
oText = document.getElementsByClassName("js-text")[0],
oBtn = document.getElementsByClassName("js-btn")[0],
oList = document.getElementsByClassName("js-list")[0];
function init() {
oBtn.addEventListener("click", function() {
var sTxt = oText.innerText,
aLi = oList.getElementsByTagName("li"),
oLi = document.createElement("li");
oLi.innerHTML = sTxt;
(oList.children.length == 0) ? oList.appendChild(oLi) : oList.insertBefore(oLi, aLi[0]);
});
}
return {
init: init
}
})();
Msg.init();
版本2
把数据存储到数据库,利用AJAX发送数据,后台进行接收并存储
var Msg = (function(){
// 先获取DOM元素
var oWrap = document.getElementById("wrap"),
oText = document.getElementsByClassName("js-text")[0],
oBtn = document.getElementsByClassName("js-btn")[0],
oList = document.getElementsByClassName("js-list")[0];
function init() {
oBtn.addEventListener("click", function() {
var sTxt = oText.innerText,
aLi = oList.getElementsByTagName("li"),
oLi = document.createElement("li");
oLi.innerHTML = sTxt;
// 发送数据到后台
var xhr = new XMLHttpRequest();
xhr.open("GET", "msg.php?text="+sTxt);
xhr.send(null);
// 前台正常展示
(oList.children.length == 0) ? oList.appendChild(oLi) : oList.insertBefore(oLi, aLi[0]);
});
}
return {
init: init
}
})();
Msg.init();
msg.php
<?php
$text = $_GET["text"];
$time = time();
// step1:先连接
mysql_connect('localhost', 'root', '345149');
// step2:选用哪个数据库
mysql_select_db('msg');
// step3:操作数据库中的哪个表
$sql = "INSERT INTO msg_infor (ID, text, time) VALUES(0, '{$text}', '{$time}')";
// step4:指定sql语句
mysql_query($sql);
?>
版本3
页面刷新后数据不见了,需要页面加载时进行一次数据库查询操作
<!-- 规定以js-开头的专门用于DOM获取 -->
<div class="wrap" id="wrap">
<div class="text js-text" contenteditable="true"></div>
<div class="btn-wrap">
<span class="btn js-btn">留言</span>
</div>
<?php
// 一上来就从数据库中查一波
mysql_connect('localhost', 'root', '345149');
mysql_select_db('msg');
$sql = "SELECT ID, text, time FROM msg_infor ORDER BY ID DESC";// 倒序
$res = mysql_query($sql);
?>
<ul class="list js-list">
<?php while($row = mysql_fetch_row($res)){ ?>
<li>
<?php echo $row[1]; ?>
</li>
<?php } ?>
</ul>
</div>
版本4
留言时加上动画效果
var Msg = (function(){
// 先获取DOM元素
var oWrap = document.getElementById("wrap"),
oText = document.getElementsByClassName("js-text")[0],
oBtn = document.getElementsByClassName("js-btn")[0],
oList = document.getElementsByClassName("js-list")[0];
function init() {
oBtn.addEventListener("click", function() {
var sTxt = oText.innerText,
aLi = oList.getElementsByTagName("li"),
oLi = document.createElement("li");
oLi.innerHTML = sTxt;
// 发送数据到后台
var xhr = new XMLHttpRequest();
xhr.open("GET", "msg.php?text="+sTxt);
xhr.send(null);
// 前台正常展示
(oList.children.length == 0) ? oList.appendChild(oLi) : oList.insertBefore(oLi, aLi[0]);
// 高度和透明度的变化
var iHeight = oLi.offsetHeight - 13;
oLi.style.height = 0;
oLi.style.opacity = 0;
var iNum1 = 0,
iNum2 = 0,
timer = null,
oBar = true;
timer = setInterval(function() {
iNum1 ++;
iNum2 +=2;
if(iNum1 >= iHeight) {
iNum1 = iHeight;
}
if(iNum2 >= 100) {
iNum2 = 100;
}
if(iNum1 == iHeight && iNum2 == 100) {
clearInterval(timer);
}
oLi.style.height = iNum1 + "px";
oLi.style.opacity = iNum2 / 100;
}, 30);
});
}
return {
init: init
}
})();
Msg.init();
数据库表
代码展示