gameboy網(wǎng)頁闖關(guān)游戲(riddle webgame)--仿微信聊天的前端頁面設(shè)計(jì)和難點(diǎn)
前言:
之前編寫了一個(gè)網(wǎng)頁闖關(guān)游戲(類似Riddle Game), 除了希望大家能夠體驗(yàn)一下我的游戲外. 也愿意分享編寫這個(gè)網(wǎng)頁游戲過程中, 學(xué)到的一些知識(shí).
本文講描述, 如何在網(wǎng)頁端實(shí)現(xiàn)一個(gè)仿微信的聊天窗口界面, 以及其中涉及到的一些技術(shù)點(diǎn). 作者前端是初學(xué)者, 請(qǐng)大拿們輕拍.
效果展示:
這種聊天對(duì)話的布局模式, 比PC端QQ的那種聊天方式更貼近移動(dòng)端, 我個(gè)人感覺.
需求設(shè)定:
讓我們先過一遍, 實(shí)現(xiàn)該聊天窗口需要支持的一些功能點(diǎn).
• 聊天消息結(jié)構(gòu)和布局
聊天消息包括: 人物(頭像)和消息內(nèi)容. 朋友消息位居左側(cè), 自己消息則位于右側(cè), 方便區(qū)分.
• 文本區(qū)域的自適應(yīng)
消息內(nèi)容可以自適應(yīng)大小, 總是以最合理的區(qū)域大小包裹.
• 滾動(dòng)支持
因聊天記錄太多, 大小超過聊天窗口的預(yù)設(shè)尺寸.
• 底部自動(dòng)對(duì)齊
有新消息后, 窗口內(nèi)容自動(dòng)對(duì)齊到可視窗口的底部.
• Enter鍵捕獲
消息的輸入支持, 以及捕獲響應(yīng)Enter鍵.
這幾個(gè)功能點(diǎn)中, 感覺最難的是文本區(qū)域自適應(yīng)處理, 走了不少彎路, ^_^.
實(shí)現(xiàn)方案:
• 聊天消息結(jié)構(gòu)和布局
基本的html代碼結(jié)構(gòu)可以如下所示:
<div> <img src="" alt="頭像"/> <div>消息內(nèi)容</div> </div>
注: 頭像為一個(gè)img標(biāo)簽, 文本消息內(nèi)容則為一個(gè)div, 包裹兩者的是另一個(gè)大的div, 代表完整的一個(gè)消息.
對(duì)于布局的左偏移和右偏移, 則借助float:left|right, 來進(jìn)行控制, 這個(gè)還是基礎(chǔ)的.
• 文本區(qū)域的自適應(yīng)
為了讓聊天的文本內(nèi)容顯得美觀, 最好方式就是自適應(yīng)的文本區(qū)域(有個(gè)max-width, 區(qū)域最小化).
最初的時(shí)候, 我嘗試了textarea標(biāo)簽, 因?yàn)槠鋵傩杂衦ow和col, 對(duì)應(yīng)字符個(gè)數(shù)單位, 可以用于設(shè)定行數(shù)和列數(shù).
可惜的是, 我被現(xiàn)實(shí)打敗了, 因?yàn)閠extarea對(duì)中文字符和英文字符的計(jì)算標(biāo)準(zhǔn)不同, 中文字符按2個(gè)算, 英文字符按1個(gè)算. 因?yàn)橛脩糨斎氲牟淮_定, 導(dǎo)致很難用文本串的長度來設(shè)定textarea的行列值.
于是回到起點(diǎn), 只能走計(jì)算文本像素點(diǎn)px長度的方式來設(shè)定大小(等價(jià)于限定max-width).
計(jì)算文本的長度, 參考于"JQuery 計(jì)算文本的總寬度 Width".
function GetCurrentStrWidth(text, font) { var currentObj = $('<pre>').hide().appendTo(document.body); $(currentObj).html(text).css('font', font); var width = currentObj.width(); currentObj.remove(); return width; }
注: 巧妙的通過添加/刪除<pre>標(biāo)簽, 返回<pre>的真實(shí)長度, 既文本長度.
對(duì)于小于預(yù)設(shè)的max-width, 則文本區(qū)域div缺省即可. 對(duì)于大于預(yù)設(shè)的max-width值, 則文本區(qū)域div設(shè)定為width=max-width.
var maxWidth = 320; var currentFont = "normal 13px Helvetica, Arial, sans-serif"; msgDiv.style.font = currentFont; var currentWidth = GetCurrentStrWidth(message, currentFont); // *) 設(shè)定文本區(qū)域的寬度 if (currentWidth <= maxWidth) { msgDiv.style.width = "" + currentWidth + "px"; } else { msgDiv.style.width = "" + maxWidth + "px"; }
當(dāng)然這邊還有一個(gè)需要的注意的地方, 就是自動(dòng)換行.
word-break: normal|break-all|keep-all; 值 描述 normal 使用瀏覽器默認(rèn)的換行規(guī)則。 break-all 允許在單詞內(nèi)換行。 keep-all 只能在半角空格或連字符處換行。 為了防止太長的英文單詞(非常規(guī)詞)的影響, 最后選用了word-break: break-all. • 滾動(dòng)支持 滾動(dòng)支持, 相對(duì)簡單, 只需要聊天對(duì)話框在y軸方向設(shè)定如下css屬性即可: overflow-y : scroll; • 底部自動(dòng)對(duì)齊 這個(gè)也是老生常談的事了, 每次聊天窗口的內(nèi)容有更新, 執(zhí)行如下js代碼即可. div.scrollTop = div.scrollHeight; 注: 既scrollTop和scrollHeight屬性值保持一致即可. • Enter鍵響應(yīng)捕獲 對(duì)enter鍵響應(yīng)的支持, 添加如下監(jiān)聽事件函數(shù)即可. document.addEventListener("keydown", function (evt) { if (evt.keyCode == 13) { // TODO } });
后記:
原本以為實(shí)現(xiàn)一個(gè)聊天窗口的示例很容易, 卻在真正的實(shí)踐過程中磕磕碰碰, 步履蹣跚. 前端這一塊, 真心水很深. 事后回憶起來,覺得收獲很大, 當(dāng)然對(duì)于文本的自適應(yīng), 采用了一個(gè)較復(fù)雜的辦法. 后來想想是不是加個(gè)max-width屬性就能輕松搞定了?
好了,關(guān)于本文給大家介紹的gameboy網(wǎng)頁闖關(guān)游戲(riddle webgame)--仿微信聊天的前端頁面設(shè)計(jì)和難點(diǎn)就給大家介紹這么多,希望對(duì)大家走gameboy網(wǎng)頁闖關(guān)游戲有所幫助!
相關(guān)文章
解決Layui數(shù)據(jù)表格顯示無數(shù)據(jù)提示的問題
今天小編就為大家分享一篇解決Layui數(shù)據(jù)表格顯示無數(shù)據(jù)提示的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11JavaScript中Array的filter函數(shù)詳解
這篇文章主要介紹了JavaScript中Array的filter函數(shù)詳解,filter?為數(shù)組中的每個(gè)元素調(diào)用一次callback函數(shù),W更多具體內(nèi)容,需要的朋友可以參考一下2022-07-07JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法
這篇文章主要介紹了JS實(shí)現(xiàn)添加,替換,刪除節(jié)點(diǎn)元素的方法,實(shí)例分析了javascript針對(duì)節(jié)點(diǎn)元素的替換、刪除及常用的幾種添加技巧,需要的朋友可以參考下2016-06-06JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題詳解
這篇文章主要給大家介紹了關(guān)于JavaScript進(jìn)階教程之函數(shù)的定義、調(diào)用及this指向問題的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-09-09浮動(dòng)的div自適應(yīng)居中顯示的js代碼
這篇文章主要介紹了浮動(dòng)的div自適應(yīng)居中顯示的js代碼,有需要的朋友可以參考一下2013-12-12javascript實(shí)現(xiàn)yield的方法
這篇文章介紹了javascript實(shí)現(xiàn)yield的方法,有需要的朋友可以參考一下2013-11-11