随笔分类 - something like
JavaScript Iframe富文本编辑器中的光标定位
摘要:最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入到当前光标所在的位置。但由于需求的需要,点击该按钮后需要弹出一个详细选项浮动层,选择详细的类型后再插入,如此,问题来了,当我点击了该按钮,浮动层显示出来后,iframe已经失去焦点,并不知道之前正在编辑的位置,所以编辑器默认把图片插入到编辑器内容的最前边(内部处理),编辑器及浮动层需求如下图:解决尝试一、利用模态弹出框 首先声明这种方式是可行的,因为模态对话框会保持iframe编辑器的编辑状态..
阅读全文
JavaScript 输入自动完成插件
摘要:作为web开发的一员,应该都不陌生,信息处理时,很多时候需要根据用户的输入实时反馈查询结果供其选择,这给了用户很好的人机交互体验,在各大门户网站上已经被使用的很成熟了,最近项目中用到此功能,网上有很多插件和样例,但用起来发现都多多少少与项目的需求有所出入,故自己写了一个,分享一下,希望能给你带来帮助,插件效果图如下:原理这个插件主要用来方便用户在信息查询和处理时快捷、简单,其原理分析下:1. 信息处理需要前台和后台,前台有一个或者多个查询输入框(目前暂定为input标签)。2. 用户在这些输入框中输入查询关键字时,系统根据用户实时的输入给页面后台发送数据查询请求。3. 后台程序查询数据并排..
阅读全文
web版扫雷小游戏(四)
摘要:~~~接上篇,游戏的主体框架完成了,接下来我们对游戏中存在的两个主要实体进行分析,一个是雷点类BombObject(节点对象),一个是节点对象对应的图片对象BombImgObject,根据第一篇的介绍,这两个类的对象配合棋盘类实现游戏过程,这里重新解释下这两个类的用处:一、雷点类(BombObject):一个承上启下的对象类别。1. 此类的对象集合(棋盘类中的ObjList数组)组成了游戏棋盘上的每一个节点,节点的类型有空节点(数值为0)、雷点(数值为-1)、非雷非空节点(数值为N,依据节点周围的雷点个数而定)。2. 每一个对象需要标记其在棋盘中的坐标位置(x、y),同时能够获取其周围8个方位
阅读全文
web版扫雷小游戏(三)
摘要:~~~接上篇,上篇介绍了游戏实现过程中第一个比较繁琐的地方,现在展现在玩家面前的是一个有血有肉的棋盘,从某种意义上说玩家已经可以开始游戏了,但是不够人性化,玩家只能一个一个节点的点开,然后判断,然后标记等等,程序暂不能人性化的辅助玩家将游戏进行下去,趣味性不够强,接下来就来完善这些辅助功能。二、空节点点击触发其周围所有空节点展开此过程主要是辅助玩家快速标记雷点,增强游戏趣味性,即当游戏进行中,玩家点击棋盘中某个未展开的节点M时,如果该节点是空节点(对应的数值为0),则展开该节点的同时,需要遍历其周围8个方向上的节点,如果某个方向上的节点也是空节点,则再以该点为中心重复上述过程,直到遍历完所有相
阅读全文
web版扫雷小游戏(二)
摘要:接上篇~~第一次写这种技术博客,发现把自己做的东西介绍出来还是一件脑力活,不是那么轻松啊,好吧,想到哪写到哪,流水记录之,待完成之后再根据大家的意见进行修改吧。游戏实现根据对扫雷游戏的体验和分析,游戏的实现过程有三个比较繁琐的地方:1. 棋盘布局及初始化,这个过程主要完成游戏棋盘的生成,布局雷点的位置并记录存储,根据雷点的位置及雷点与数值之间的对应关系,遍历雷点8个方向上的8个节点,查找这个8个节点各自周围的雷点数之和S,最终记录并存储节点的数值(S),完成棋盘上各非雷点的数值计算后,根据节点和图片对象的关系呈现用户界面给玩家。2. 玩家鼠标左键点击棋盘上某个节点之后,程序根据节点在棋盘上的坐
阅读全文
web版扫雷小游戏(一)
摘要:作为一名程序猿,平时的爱好也不多,说起游戏,我不太喜欢大型的网游,因为太耗时间,偶尔玩玩经典的单机小游戏,比如windows下自带的游戏扫雷(秀一下,高级下最高纪录110s)。 现阶段正在致力于web前端,工作之余,突然想用javascript来实现一下这个小游戏,说做就做,才发现玩起来简单,做起来还是遇到蛮多困难的,这里想和大家分享一下游戏的实现过程,之前做过一年多的C++开发,对OO编程有一些理解和热爱,故实现过程借用OO的编程思想,顺便对一段时间以来偏爱的javascript模块化编程进行一个小结与反思:开发思路:游戏在趣味点主要在于通过雷(bomb)点周围的数字推算出雷点的位置并...
阅读全文
浙公网安备 33010602011771号