留言本

实现留言本的功能，仅靠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();

数据库表

代码展示