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 相关文章推荐
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
node.js 使用ejs模板引擎时后缀换成.html
Apr 22 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
js实现音乐播放控制条
Sep 09 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
15 分钟掌握vue-next响应式原理
Oct 13 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
基于qmail的完整WEBMAIL解决方案安装详解
2006/10/09 PHP
PHP 八种基本的数据类型小结
2011/06/01 PHP
PHP开源开发框架ZendFramework使用中常见问题说明及解决方案
2014/06/12 PHP
php微信高级接口群发 多客服
2016/06/23 PHP
PHP简单验证码功能机制实例详解
2019/03/27 PHP
基于PHP实现短信验证码发送次数限制
2020/07/11 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
js 判断一个元素是否在页面中存在
2012/12/27 Javascript
javascript定义变量时带var与不带var的区别分析
2015/01/12 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
javascript中返回顶部按钮的实现
2015/05/05 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
js制作网站首页图片轮播特效代码
2016/08/30 Javascript
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
angular+ionic返回上一页并刷新页面
2017/08/08 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
原生JS实现弹幕效果的简单操作指南
2020/11/10 Javascript
Python中的迭代器漫谈
2015/02/03 Python
Python的包管理器pip更换软件源的方法详解
2016/06/20 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
pandas 对series和dataframe进行排序的实例
2018/06/09 Python
Python查找第n个子串的技巧分享
2018/06/27 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
Python增强赋值和共享引用注意事项小结
2019/05/28 Python
Python循环结构的应用场景详解
2019/07/11 Python
python通过opencv实现图片裁剪原理解析
2020/01/19 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
优秀乡村医生事迹材料
2014/05/28 职场文书
广场舞大赛策划方案
2014/05/31 职场文书
大学生求职信
2014/06/17 职场文书