開發(fā)環(huán)境：dreamweaverCC html +jscirpt + php
前置條件：1、一個簡單的網(wǎng)站已經(jīng)搭建完畢，支持用戶登錄網(wǎng)站。
2、用戶已登錄網(wǎng)站。
實現(xiàn)步驟：
一、新建留言板網(wǎng)頁
1、新建網(wǎng)頁：whiteboard.html
留言板（js-div-whiteboard)分為三個部分：
留言列表：（js-div-whiteboard-messages）、無留言提示：（js-div-whiteboard-empty-hint ）、提交新留言：（js-div-whiteboard-input），三個div自上而下垂直排列。
html:
<div class = “js-div-whiteboard “> <div class = “js-div-whiteboard-messages”> </div> <div class = “js-div-whiteboard-empty-hint”> </div> <div class = “js-div-whiteboard-input style-margin-top”> </div> </div>
2、留言列表 js-div-whiteboard
留言列表分為 菜單（js-div-whiteboard-menu）和 留言內(nèi)容（js-ul-whiteboard-message-list）兩部分。
菜單：上一頁 、下一頁。
留言內(nèi)容：作者10% + 留言80% + 日期10%， 三項內(nèi)容水平排列，寬度為10%-80%-10%。 每條留言之間有水平線分割。
以上兩項內(nèi)容自上而下垂直排列。
html
<div class = “js-div-whiteboard-messages”> <div class=”js-div-whiteboard-menu”> <span> </span> <span class = “js-whiteboard-up-page “>上一頁</span> <span> </span> <span class = “js-whiteboard-down-page “>下一頁</span> <hr class = “style-hr-full”> </div> <ul class=”js-ul-whiteboard-message-list style-li-notice-text style-ul-user-menu”> <li class = “style-fontsize-15”> <span class = “style-li-whiteboard-user style-fontsize-15-center”>user1</span> <span class = “style-li-whiteboard-message”>吃瓜群眾三號。</span> <span class = “style-li-whiteboard-date style-fontsize-15-center”>01-02</span> </li> <hr class = “style-hr-full”> <li> <span class = “style-li-whiteboard-user”>user2</span> <span class = “style-li-whiteboard-message”>吃瓜群眾二號。</span> <span class = “style-li-whiteboard-date”>01-02</span> </li> <hr class = “style-hr-full”> </ul> </div>
3、無留言提示：（js-div-whiteboard-empty-hint ）
<div class = “js-div-whiteboard-empty-hint”> <span class = “style-li-whiteboard-message”> 留言板還是空的哦！</span> </div>
4、提交新留言：（js-div-whiteboard-input）
包含 textarea (js-whiteboard-textarea-input) 和 button(js-button-whiteboard-submit)兩部分，上下垂直排列。
html
<div class = “js-div-whiteboard-input style-margin-top”> <textarea class = “js-whiteboard-textarea-input” rows=”5″ cols=”100″ maxlength = “400” placeholder=”說點什么吧……” style = “resize: none”></textarea><br/><br/> <button class = ” js-button-whiteboard-submit” > 提 交 </button> </div>
5、最后添加一些css設(shè)置，頁面結(jié)果
html：
<div class = “js-div-whiteboard “> <div class = “js-div-whiteboard-messages”> <div class=”js-div-whiteboard-menu style-fontsize-15″> <span> </span> <span class = “js-whiteboard-up-page “>上一頁</span> <span> </span> <span class = “js-whiteboard-down-page “>下一頁</span> <hr class = “style-hr-full”> </div> <ul class=”js-ul-whiteboard-message-list style-li-notice-text style-ul-user-menu”> <li class = “style-fontsize-15”> <span class = “style-li-whiteboard-message”>我在這里安靜地吃個瓜。</span> <span class = “style-li-whiteboard-user style-fontsize-15-center”>user1</span> <span class = “style-li-whiteboard-date style-fontsize-15-center”>01-02</span> </li> <hr class = “style-hr-full”> <li> <span class = “style-li-whiteboard-message”>還不錯哦！</span> <span class = “style-li-whiteboard-user”>user2</span> <span class = “style-li-whiteboard-date”>01-02</span> </li> <hr class = “style-hr-full”> </ul> </div> <div class = “js-div-whiteboard-empty-hint style-margin-bottom style-margin-top”> <span class = “style-li-whiteboard-message style-margin-bottom style-margin-top”> 留言板還是空的哦！</span> </div> <div class = “js-div-whiteboard-input style-margin-top”> <textarea class = “js-whiteboard-textarea-input style-fontsize-20″ rows=”5″ cols=”100” maxlength = “400” placeholder=”說點什么吧……” style = “resize: none”></textarea><br/><br/> <button class = “style-fontsize-20 js-button-whiteboard-submit” > 提 交 </button> </div> </div>
至此留言板界面完成。
二、數(shù)據(jù)庫設(shè)計
本網(wǎng)站數(shù)據(jù)庫采用阿里云ecs 自建庫。表名稱：whiteboard_messages
結(jié)構(gòu)如下：
預(yù)置數(shù)據(jù)庫內(nèi)容如下：
三、留言板功能實現(xiàn)
1、服務(wù)器端：支持網(wǎng)頁端查詢數(shù)據(jù)庫內(nèi)的留言信息
getBoardmessages.php：
<?php conn=mysqliconnect(“l(fā)ocalhost”,”root”,””,”Learn”)ordie(“連接失敗”);mysqliquery(conn,”set names utf8″); result=mysqliquery(conn,”select * from whiteboard_messages order by creat_time DESC limit 2 offset offset“);messageArray = array(); while (row=mysqlifetcharray(result)) { tempArray=array(‘id′=>row[message],′author′=>row[authorid],′creattime′=>messageArray,tempArray); }
//把消息返回前端 if (sizeof(Extra open brace or missing close brace
2、網(wǎng)頁端：刷新頁面時，顯示已有留言
功能：每次打開或刷新頁面時，從數(shù)據(jù)庫中讀取最新的2條信息，按照日期降序排列。
沒有留言時，顯示空白留言提示。
jscpript 核心代碼： $.ajax({ url:”http://www.xxx.cn/php/getBoardmessages.php”, type:”POST”, async: false,//設(shè)置為同步操作就可以給全局變量賦值成功 data:{“info”:”get_message”,”offset”:0}, success:function(data){ console.log(data); if (data == “no message”) {
(“.js?div?whiteboard?empty?hint”).attr(“style”,”display:block;”);(“.js-div-whiteboard-messages”).attr(“style”,”display:none;”); return; }
(“.js?div?whiteboard?empty?hint”).attr(“style”,”display:none;”);(“.js-div-whiteboard-messages”).attr(“style”,”display:block;”); var info = JSON.parse(data); global_whiteboard_message_list = info;// displayWhiteboardMessageList(); }, error:function(xhr){alert(“錯誤提示： ” + xhr.status + ” ” + xhr.statusText);} });
function displayWhiteboardMessageList() { var text = “”; Undefined control sequence \”
function timestamp2time(timestamp){ var stamp = parseInt(timestamp * 1000);//php時間戳只有十位，擴展為13位 var date = new Date(stamp); var Y = date.getFullYear() + ‘-‘; var M = (date.getMonth()+1 < 10 ? ‘0’+(date.getMonth()+1) : date.getMonth()+1) + ‘-‘; var D = (date.getDate() < 10 ? ‘0’ + (date.getDate()) : date.getDate()) + ‘ ‘; var h = (date.getHours() < 10 ? ‘0’ + date.getHours() : date.getHours()) + ‘:’; var m = (date.getMinutes() <10 ? ‘0’ + date.getMinutes() : date.getMinutes()) + ‘:’; var s = (date.getSeconds() <10 ? ‘0’ + date.getSeconds() : date.getSeconds()); return Y+M+D+h+m+s; }
3、服務(wù)器端：支持向數(shù)據(jù)庫內(nèi)寫入新留言
write2board.php
<?php session_start(); author=_POST[‘a(chǎn)uthor’]; authorid=_POST[‘a(chǎn)uthor_id’];
conn=mysqliconnect(“l(fā)ocalhost”,”root”,””,”Learn”)ordie(“連接失敗”);mysqliquery(conn,”set names utf8″); time=time();var = mysqli_query(conn,”insertintowhiteboardmessages(message,author,authorid,creattime)values(‘message’,’author′,′author_id’,’
4、網(wǎng)頁端：添加新留言
jscript 核心代碼：
Extra open brace or missing close brace(‘.js-whiteboard-textarea-input’).val().trim().length ==0) return; var sendData = {“message”:Extra close brace or missing open brace.ajax({ url:”http://www.xxx.cn/php/write2board.php”, type:”POST”, data:sendData, success:function(data){ console.log(data); if (data == “white2board success”) { Extra close brace or missing open brace(“.js-whiteboard-textarea-input”).val(“white2board failed”); } }, error:function(xhr){alert(“錯誤提示： ” + xhr.status + ” ” + xhr.statusText);} }); });
5、菜單功能：上一頁、下一頁 翻頁
點擊“上一頁”或“下一頁”時，翻頁顯示所有留言。每頁最多顯示兩條，按照時間降序排列。
顯示第一頁時，隱藏“上一頁”；顯示最后一頁時，隱藏“下一頁”；留言只有一頁時，隱藏“上一頁”和“下一頁”。
jscript代碼：1）在第2條功能已有代碼上修改，藍色為新增代碼
(“.js?whiteboard?up?page”).click(function()updateWhiteboardMessages(“up”););(“.js-whiteboard-down-page”).click(function(){updateWhiteboardMessages(“down”);}); (“.js?whiteboard?down?page”).attr(“style”,”visibility:hidden;”);(“.js-whiteboard-up-page”).attr(“style”,”visibility:hidden;”); Extra open brace or missing close brace(“.debug_info”).text(data); console.log(data); if (data == “no message”) { (“.js?div?whiteboard?empty?hint”).attr(“style”,”display:block;”);(“.js-div-whiteboard-messages”).attr(“style”,”display:none;”); return; } (“.js?div?whiteboard?empty?hint”).attr(“style”,”display:none;”);(“.js-div-whiteboard-messages”).attr(“style”,”display:block;”); var info = JSON.parse(data); global_whiteboard_message_list = info;
/*不止一頁*/ if (global_whiteboard_message_list.length == global_whiteboard_message_limit) { $(“.js-whiteboard-down-page”).attr(“style”,”visibility:visible;”); } displayWhiteboardMessageList(); }, error:function(xhr){alert(“錯誤提示： ” + xhr.status + ” ” + xhr.statusText);} });
2）
function updateWhiteboardMessages(action) { if (action == “up”) { global_whiteboard_message_offset = global_whiteboard_message_offset – 2; Extra close brace or missing open brace(“.js-whiteboard-up-page”).attr(“style”,”visibility:visible;”); } else { ; } Extra open brace or missing close brace(“.js-whiteboard-up-page”).attr(“style”,”visibility:hidden;”); global_whiteboard_message_offset = global_whiteboard_message_offset + 2; } if (action == “down”)/*已經(jīng)到最后一頁*/ { Extra close brace or missing open brace
到此代碼功能實現(xiàn)。文章來源：http://www.zghlxwxcb.cn/news/detail-466279.html
上傳網(wǎng)頁及相關(guān)代碼到服務(wù)器上，體驗一下簡單的留言版功能吧。文章來源地址http://www.zghlxwxcb.cn/news/detail-466279.html
到了這里，關(guān)于網(wǎng)站留言板的功能的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
