gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点


Posted in Javascript onFebruary 21, 2016

前言:

之前编写了一个网页闯关游戏(类似Riddle Game), 除了希望大家能够体验一下我的游戏外. 也愿意分享编写这个网页游戏过程中, 学到的一些知识.

本文讲描述, 如何在网页端实现一个仿微信的聊天窗口界面, 以及其中涉及到的一些技术点. 作者前端是初学者, 请大拿们轻拍.

效果展示:

gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

这种聊天对话的布局模式, 比PC端QQ的那种聊天方式更贴近移动端, 我个人感觉.

需求设定:

让我们先过一遍, 实现该聊天窗口需要支持的一些功能点.

• 聊天消息结构和布局

聊天消息包括: 人物(头像)和消息内容. 朋友消息位居左侧, 自己消息则位于右侧, 方便区分.

• 文本区域的自适应

消息内容可以自适应大小, 总是以最合理的区域大小包裹.

gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点

 • 滚动支持

因聊天记录太多, 大小超过聊天窗口的预设尺寸.

• 底部自动对齐

有新消息后, 窗口内容自动对齐到可视窗口的底部.

• Enter键捕获

消息的输入支持, 以及捕获响应Enter键.

这几个功能点中, 感觉最难的是文本区域自适应处理, 走了不少弯路, ^_^.

实现方案:

• 聊天消息结构和布局

基本的html代码结构可以如下所示:

<div>
<img src="" alt="头像"/> <div>消息内容</div>
</div>

注: 头像为一个img标签, 文本消息内容则为一个div, 包裹两者的是另一个大的div, 代表完整的一个消息.

对于布局的左偏移和右偏移, 则借助float:left|right, 来进行控制, 这个还是基础的.

• 文本区域的自适应

为了让聊天的文本内容显得美观, 最好方式就是自适应的文本区域(有个max-width, 区域最小化).

最初的时候, 我尝试了textarea标签, 因为其属性有row和col, 对应字符个数单位, 可以用于设定行数和列数.

可惜的是, 我被现实打败了, 因为textarea对中文字符和英文字符的计算标准不同, 中文字符按2个算, 英文字符按1个算. 因为用户输入的不确定, 导致很难用文本串的长度来设定textarea的行列值.

于是回到起点, 只能走计算文本像素点px长度的方式来设定大小(等价于限定max-width).

计算文本的长度, 参考于"JQuery 计算文本的总宽度 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>标签, 返回<pre>的真实长度, 既文本长度.

对于小于预设的max-width, 则文本区域div缺省即可. 对于大于预设的max-width值, 则文本区域div设定为width=max-width.

var maxWidth = 320;
var currentFont = "normal 13px Helvetica, Arial, sans-serif";
msgDiv.style.font = currentFont;
var currentWidth = GetCurrentStrWidth(message, currentFont);
// *) 设定文本区域的宽度
if (currentWidth <= maxWidth) {
msgDiv.style.width = "" + currentWidth + "px";
} else {

msgDiv.style.width = "" + maxWidth + "px";
}

当然这边还有一个需要的注意的地方, 就是自动换行.

word-break: normal|break-all|keep-all;


值 描述

normal 使用浏览器默认的换行规则。
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。
为了防止太长的英文单词(非常规词)的影响, 最后选用了word-break: break-all.

• 滚动支持

滚动支持, 相对简单, 只需要聊天对话框在y轴方向设定如下css属性即可:

overflow-y : scroll;


• 底部自动对齐

这个也是老生常谈的事了, 每次聊天窗口的内容有更新, 执行如下js代码即可.

div.scrollTop = div.scrollHeight;

注: 既scrollTop和scrollHeight属性值保持一致即可.

• Enter键响应捕获

对enter键响应的支持, 添加如下监听事件函数即可.

document.addEventListener("keydown", function (evt) {

if (evt.keyCode == 13) {


// TODO

}
});

后记:

原本以为实现一个聊天窗口的示例很容易, 却在真正的实践过程中磕磕碰碰, 步履蹒跚. 前端这一块, 真心水很深. 事后回忆起来,觉得收获很大, 当然对于文本的自适应, 采用了一个较复杂的办法. 后来想想是不是加个max-width属性就能轻松搞定了?

好了,关于本文给大家介绍的gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点就给大家介绍这么多,希望对大家走gameboy网页闯关游戏有所帮助!

Javascript 相关文章推荐
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
Jan 27 Javascript
原生js实现改变随意改变div属性style的名称和值的结果
Sep 26 Javascript
JS中如何判断传过来的JSON数据中是否存在某字段
Aug 18 Javascript
如何让你的Lightbox支持滚轮缩放及Base64图片
Dec 04 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
javascript 数组去重复(在线去重工具)
Dec 17 Javascript
jquery代码规范让代码越来越好看
Feb 03 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 #Javascript
完善的jquery处理机制
Feb 21 #Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 #Javascript
jQuery实现div拖拽效果实例分析
Feb 20 #Javascript
jQuery实现简单隔行变色的方法
Feb 20 #Javascript
jQuery实现元素拖拽并cookie保存顺序的方法
Feb 20 #Javascript
jQuery获得字体颜色16位码的方法
Feb 20 #Javascript
You might like
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
PHP中使用addslashes函数转义的安全性原理分析
2014/11/03 PHP
php使用fgetcsv读取csv文件出现乱码的解决方法
2014/11/08 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
php中错误处理操作实例分析
2019/08/23 PHP
JQUERY复选框CHECKBOX全选,取消全选
2008/08/30 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
JS操作xml对象转换为Json对象示例
2017/03/25 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
2018/06/22 Javascript
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
2018/12/09 Javascript
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
微信小程序商品详情页底部弹出框
2019/11/22 Javascript
微信小程序实现列表滚动头部吸顶的示例代码
2020/07/12 Javascript
python进阶教程之循环对象
2014/08/30 Python
python数据处理实战(必看篇)
2017/06/11 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
python openpyxl模块的使用详解
2021/02/25 Python
俄罗斯GamePark游戏商店网站:购买游戏、游戏机和配件
2020/03/13 全球购物
如何在Shell脚本中使用函数
2015/09/06 面试题
文员个人求职自荐信
2013/09/21 职场文书
学生的自我鉴定范文
2013/10/24 职场文书
留学生如何写好自荐信
2013/12/27 职场文书
《燕子专列》教学反思
2014/02/21 职场文书
毕业设计说明书
2014/05/07 职场文书
会议通知
2015/04/15 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
52条SQL语句教你性能优化
2021/05/25 MySQL