关于js和前端的那点事



单身祭

分类 : 生活感受 · (3) 条评论 · by 2016年06月26日
单身祭

单身,是对未来的祭奠,一个人,一个夜晚,一次莫名的孤寂,像是剥离的浪漫,苦涩而惘然,透思瞑想,沉默在心海,消失在天际。 一抹流星飘过,划刻的瞬间,苍茫一片,对未知的恐惧,占据了心头,我在这里,而你又在哪里? 有时候太过淡然,直接释怀了念想,没了牵挂,身影就如同解脱的空野,任意奔流,直达远方。 爱情,已到了无法描摹的状态,抓不住的思绪,无法去溶解,想要去解释,却不知从何说起!尔在远方,吾自独留。 不…

情书

分类 : 生活感受 · 暂无评论 · by 2016年02月1日
情书

一次邂逅,盈留迫动的心跳,深迷的眼神,娇涩的嘴唇,精炼的飘发,奇丽的靓鼻,灵趣的金耳,无不印真,无不厚记,终而忘不了。韵深的话语,此刻经不住控度,蹦出了心园。 开始喜欢你,觅寻你的故事,追从你的心迹,想彻你的暇思,最后,赋定了你的位置。天空,因你而放彩,大地,因你而增辉。是你在点缀,在细绘,在描摩;是你在纠结我的心,拘放我的情,豪夺我的爱;是你在清晰后选择模糊,在接纳后选择放弃,一确真后选择无奈。…

大学寺

分类 : 生活感受 · 暂无评论 · by 2015年12月20日
大学寺

    佛曰:静则思其变,动则明其深,凡尘俗事,亦福亦祸,空无度,无愁即生。     纷杂,凌乱,勾心夺魄,惨斗剧争,大学,渐渐地,成了理想的归依之地。     不进女色,不染桃痕,默然祈首,只为洁身的欢愉。红尘多梦,况作零杂的锁事,便折一根木杖,一敲一忘,最后,记忆得空。问红颜几多,犹剩把酒作欢,嬉闹成趣,似一场风景,游过,但不会驻足。山盟海誓,生死协定,戏罢尔,如飘飞的云朵,轻盈,但经不住雨滴…

想念旧情

分类 : 生活感受 · 暂无评论 · by 2015年11月22日
想念旧情

分离造就痛苦,痛苦引出深刻,深刻成为永恒。因为一段错缘,才萍水相逢,究竟是错误地开始,还是错误地结束,已无力探求,最后,只留下想念。 想念旧情,就像目视着一堆烧尽的木炭,期待着复燃的一天。烟须柔柔地飘摇,剪不断,一弯弯离愁,抓不住,曾经的闪耀。死灰斑斑,在默呼,不舍的依赖;在祈诉,钟爱的光芒;在昭示,明日的火花。还有余星点点,奋力地抗争,不屈地坚持,纵使不是火种,也会平添希望。开始追忆曾经的燃烧,…

密码保护:来不及说的话

分类 : 生活感受 · 暂无评论 · by 2015年11月14日
密码保护:来不及说的话

无法提供摘要。这是一篇受保护的文章。

写给自己的诗

分类 : 生活感受 · (1) 条评论 · by 2015年10月23日
写给自己的诗

伤痛末去,幸福还得继续;阴沉末去,灿烂还得继续;往事末去,生活还得继续。 面对冷毅的表情,决断的话语,已无奈如何。眼骨松恸,苦待佳期,过时不忘,情转难移,哪知会有属于自己的世界。都走了,空留无聊的摆设,似一坛苦酒,喝了就醉,醒着也醉。一个人走,一个人留,一个人愁,唯独没有一个人的快乐,轻唤那头,原来还是一个人的世界。别再执着了啦,那一弯劲头,留给后来去发泄。早知清闲不在,又何必装若无事,愁丝飘带,…

走笔十月

分类 : 生活感受 · (1) 条评论 · by 2015年10月5日
走笔十月

金秋十月,再一次走失自己。 一个人的国庆,发呆的表情,陷入无限空闷,无限的牵挂伴着无限的烦恼,逗荡在屋间与街角。 不知道说什么好,所有说过的话,也许并不在意,只是在轻描的随谈里,透露着点点不惜,抑制不住了罢,且任由外泄吧,至于泛滥的风险,此时无知。 音乐声仍然不绝于耳,这种旋律,萦绕了一遍又一遍。总是喜欢跟随歌词的轨迹去搜寻故事,一首歌的故事,一个人的感受,两个人的回忆。音调渐淡,乍一抬头,时间已…

前端性能统计之HTML5 Performance Timing介绍

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2015年07月22日
前端性能统计之HTML5 Performance Timing介绍

摘要:目前进行网站前端性能统计的方法主要有三种:前后端时间埋点及js事件监听、第三方工具(如HttpWatch、PageSpeed、YSLOW等)、浏览器开发者工具(如chrome开发者工具),这些方式无论是在数据准确性、实现成本还是可维护性方面都有其固定的短板,而HTML5提供的新API——Performance Timing能提供给我们一种前端性能统计的新思路,它能统计从URL输入到页面完全加…

走笔六月

分类 : 生活感受 · 暂无评论 · by 2015年06月20日
走笔六月

繁锦的六月,几处烦愁,几处喜奏,我在此刻走心,也走笔一挥,纪录下所有。 工作占据着生活,生活也充斥着工作,无意间,两景交错,似孪而生。一直在工位上呆坐良久,滴嗒嗒的键盘声,敲打着字母,也敲打着梦和远方。bug常有,而代码依旧,依旧注释着个性、偏执与激情,依旧定义着人生价值与方向,依旧继承着回忆、点滴。莫名时刻,起身离席,开始漫长的游走,沟通需求,联调接口,确认排期,当然,也少不了工位间寒暄弥谈。偶…

Canvas文本处理技巧

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2015年01月26日
Canvas文本处理技巧

canvas作为HTML5新引入的重要API,提供给我们强大的图形处理和渲染能力,但在文本处理方面,canvas却某些方面略显不是那么擅长,本文将从canvas的文本处理短板入手,分析并解决绘制文本带来的问题。 首先简单归纳一下canvas在文本处理方面几大陋点: 不支持自定义字体 不支持文本间隔设置 不支持文本换行 接下来对症下药,依次来解决以上陋点。 自定义字体 标题党有误,并不是说canva…

美娘

分类 : 生活感受 · (1) 条评论 · by 2015年01月18日
美娘

题记——寒冷是冬日的温度,而冰雪却是浪漫的舞娘。 周末,闲宅,音乐,电脑; 窗檐,绿植,杂尘,温光; 窗外,徐风,柔阳,思念…… 此情甚浓,浓得化不开,已觉明了,却道不出已然,似乎,就是那个她。 潺潺的笑意,馨挂嘴角,翁和,微张;弥留眼间,轻眯,斜眨。 早已被这迷斓的醉意熏倒,也逃不出这布满温憩的纷扰,太恋了吧,才会如此深重。 情意开始泛衍,止住又流,罢了,况作佳味。 你是…

HTML5 Canvas数独游戏

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2014年11月28日
HTML5 Canvas数独游戏

偶然间在CSDN上玩了一把九宫格数独游戏,觉得挺有意思,于是就下决心自己写一个。 数独这种游戏还真是个锻炼头脑的游戏,一般人你还真玩不懂。 1-9个数字拍成九宫格的话是这样的: [code]</pre> <pre>for(var i = 0; i < Config.count; i++) { matrix[i] = []; for(var j = 0; j < …

HTML5 Canvas消除游戏

分类 : HTML5+CSS3, Javascript · (1) 条评论 · by 2014年10月20日
HTML5 Canvas消除游戏

玩过微信“天天爱消除”游戏的人都应该了解这类游戏,尤其这类游戏常常受到许多妹子的喜欢,所以我还是花了周末一天的时间做做这个游戏。 我的这个游戏当然没有微信里的效果那么炫酷,只是完成了消除游戏一些核心的逻辑,包括消失、补全、交换这些。 仔细算下来,这好像已经是我的第7款小游戏了,这又让我开始憧憬大游戏的到来。 算了,反正小时候玩过那么多小游戏,先把那些记忆中的游戏写完再说。 这款游戏还是延续canv…

HTML5 canvas扫雷游戏

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2014年09月8日
HTML5 canvas扫雷游戏

最近由于工作一直比较忙,所以没什么闲暇时间来打理博客,趁着中秋放假的时间,宅在家里实在不知道干啥, 于是还是干起了自己的老本行,写写小游戏,进了新公司,发现自己写的这些小游戏在别人大牛面前确实不值一提, 反正慢慢来嘛,总有一天我相信自己会写出一款非常有深度、高达上的游戏来的。 闲话少说,最近奉上一款经典的windows系统游戏——扫雷。在js的世界里,扫雷也就那样。 这个游戏仍然基于canvas编…

HTML5 Canvas打砖块游戏

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2014年04月27日
HTML5 Canvas打砖块游戏

又是小游戏,又是canvas,没办法了,实在太懒了,大的游戏也想做,可惜。。。。 本来曾经想着做一款canvas的植物大战僵尸,最后做了一小半放弃了,太累了 先别说功能,就是画图也能把你画死,就只能在这些小游戏上找找自信。 最近一直在玩腾讯的雷霆战机游戏,打到后面越来越难,估计一辈子也通不了关了。 还是按照以前的老习惯,你通不了关,我自己可以让我自己通关。 于是给自己写个游戏,通不通关完全掌握在自…

测试canvas的绘图性能

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2014年04月24日
测试canvas的绘图性能

一直在研究canvas的颜色识别等东西,但是始终找不到门道。 于是自己做了一个测试的demo,看看canva的绘图能力到底怎么样, 主要是要监听mousemove事件,不停地产生各种随机颜色的圆圈。 不断绘制,看得出来还是挺顺畅的! demo地址:http://xiechengxiong.com/xui/demos/test/

HTML5应用地图日志(bug已修改)

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2014年04月3日
HTML5应用地图日志(bug已修改)

最近动手做了一个手机web app,主要采用本地数据库存储的方式。 app基于腾讯地图API开发,数据存储全部在前端(包括图片)。 本打算采用面向对象的前端数据库IndexedDB,但是由于ios和android上的浏览器不支持,故采用了兼容性的web sql数据库。 数据库目前完成了创建、查询、新增功能,暂时还没有实现删除和修改功能。 另外还有一个问题就是本地调取图片的问题不知道怎么回事,还没有…

HTML5 Canvas放大镜

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2014年03月18日
HTML5 Canvas放大镜

最近逛天猫买球鞋的时候偶然发现了这东西,觉得挺有意思,于是自己决定做一个。 我们经常在网上买东西的时候时常都会用放大镜去细心看某件商品,尤其是买衣服的时候,放大镜能够帮助我们仔细查看衣服的材质、颜色、大小搭配等信息。 现在各大电商网站用的商品放大镜基本上都是用原生js实现的,很少有用到canvas实现,我这也算填补业界空白吧! 1、实现原理 放大镜主要由三部分组成:小图、遮罩、大图。通过在小图上m…

HTML5多文件上传升级版(支持本地预览、拖拽、进度监控、断点续传等功能)

分类 : HTML5+CSS3, Javascript · (6) 条评论 · by 2014年03月6日
HTML5多文件上传升级版(支持本地预览、拖拽、进度监控、断点续传等功能)

最近在研究HTML5的File API,发现其中有很多有趣的东西,解决了以前我们很多需要后台或者flash去解决的问题。 同时,为了检验研究成果,我便制作了一个简单的HTML5多文件上传demo。 以前我们上传文件的时候,如果通过js上传,我们无法在本地直接预览图片,还得跑到服务器回来之后再预览,而且没办法监控进度。 尽管通过flash能够实现本地预览了,而且也能监控进度了,但是始终两个不同的技术…

分享三款自己最近做的html5游戏(打飞机、俄罗斯方块、贪吃蛇)

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2014年02月13日
分享三款自己最近做的html5游戏(打飞机、俄罗斯方块、贪吃蛇)

1、打飞机游戏 http://xiechengxiong.com/xui/demos/shotfly/ 2、俄罗斯方块 http://xiechengxiong.com/xui/demos/tetris/ 3、贪吃蛇游戏 http://xiechengxiong.com/xui/demos/snake/

Flash图片批量本地预览与上传

分类 : Flash as3, Javascript · (11) 条评论 · by 2013年11月14日
Flash图片批量本地预览与上传

一直以来都梦想着做一个flash的东西出来,一直都没敢去尝试。 以前一段时间由于项目的需要,曾经对百度ueditor里的flash图片上传非常痴迷。 现在的情况可能很少遇到要使用flash的机会,但这依然打消不了我追求flash的热情。 这次这个效果一切以简单为主,一是因为没什么时间,而是as3技术水平决定了。 这次主要实现了以下几个功能: 1、本地批量预览 本地预览是flash9及as3开始提供…

地区选择器(移动版)

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2013年11月7日
地区选择器(移动版)

一直以来都在了解web app尤其是移动app方面的东西,总觉得这些东西很cool,一般只有大牛才适合做这方面的东西。 总是在敏思苦想自己做个什么样的应用合适呢,不能太难,不然超出自己的power了。 幸好这几天有空玩玩微信了,其中有一个功能是选择地区,脑袋里一下就善良了。 这东西不错,以前做个select类型的地区选择,这次正好尝试一下移动版的。 准备数据的过程可让我确实难受,刚开始想的是用ph…

HTML5多文件上传

分类 : HTML5+CSS3, Javascript · (17) 条评论 · by 2013年10月22日
HTML5多文件上传

最近在研究HTML5的File API,发现其中有很多有趣的东西,解决了以前我们很多需要后台或者flash去解决的问题。 同时,为了检验研究成果,我便制作了一个简单的HTML5多文件上传demo。 以前我们上传文件的时候,如果通过js上传,我们无法在本地直接预览图片,还得跑到服务器回来之后再预览,而且没办法监控进度。 尽管通过flash能够实现本地预览了,而且也能监控进度了,但是始终两个不同的技术…

HTML5 Canvas人物关系图

分类 : HTML5+CSS3, Javascript · (2) 条评论 · by 2013年09月29日
HTML5 Canvas人物关系图

最近王菲和李亚鹏离婚了,让我不再相信爱情了。 为了表达对他们的怀念之情,我特此制作了这个人物关系图。 希望有志之士与我共勉,共同为我们心中的女神祈祷。 此关系图全程采用canvas技术,建议在高级浏览器中运行(注意是高级浏览器)。 第一次使用canvas事件技术,通过坐标范围来捕捉事件。 由于做这个demo的心情一直比较沉重,所以难免会有一些疏漏。 尤其是性能方面还没有仔细测,我想应该问题不大吧,…

js表单验证插件

分类 : Javascript · (5) 条评论 · by 2013年09月26日
js表单验证插件

这段时间工作上比较闲,总感觉不能让自己的技术荒废,于是又操起了老行,做起了小demo来。 这次我做了一个js版本的表单验证插件,总体的原理参照了jquery validate,但是在一些小方面还是有自己的创新。 这个插件主要功能有以下几点。 1、验证规则自定义 可以自己配置需要验证的表单项,对于验证通过或者错误时的处理,也可以自己决定,最大限度地保证了插件的灵活性。 2、验证方式多样 插件提供了丰…

JS拼图游戏升级版

分类 : HTML5+CSS3, Javascript · 暂无评论 · by 2013年09月17日
JS拼图游戏升级版

上次写了一个拼图游戏之后,感觉挺有意思,但是在手机上还不能使用,这次花了点时间,做了一个升级版的拼图游戏。总共有以下一些新特性。 1、兼容移动平台 这次我学习了一点移动平台上的事件机制,使用了touchstart这个触摸时间,使得在点击移动屏幕的时候也能够变换拼图。 2、支持响应式 由于要兼容移动平台,所以这次我将拼图的大小设置成了响应式的,随着设备的大小而改变,这样无论是PC、手机还是平板都能够…

瀑布流布局

分类 : Javascript · (3) 条评论 · by 2013年07月16日
瀑布流布局

本效果的思想来源于以下这边文章: http://www.w3cfuns.com/thread-5592024-1-1.html 瀑布流布局主要分为两部分: 1) 数据块排列,算法步骤简述下: 初始化时,对容器中已有数据块元素进行第一次计算,需要用户给定: a,容器元素 — 以此获取容器总宽度; b,列宽度; 最终列数取的是容器宽度/列宽度; 获得列数后,需要保存每个列的当前高度,这样在添加每个数据…

HTML5 canvas燃尽图

分类 : HTML5+CSS3 · (2) 条评论 · by 2013年06月28日
HTML5 canvas燃尽图

先说说这个demo的灵感来源。 我以前有一同事,技术在我心目中算是非常厉害的那种,我这一年多来的技术提高基本上完全靠他所赐,再次对他表示深深的感谢啊! 一次偶然的机会,让我见识了他的前端博客,其中里边有一个demo给我的印象特别深,好像名字叫做”svg burndown”. 顾名思义,他的这个demo是用svg做的,我觉得挺有意思,于是下定决心自己做一个,svg已经被他用过…

js树插件

分类 : Javascript · (6) 条评论 · by 2013年06月9日
js树插件

一直就像写一个目录树插件,但是始终不知从何处下手,这个跟日期组件一样,需要一点算法和逻辑思维的知识。 气质凡事一定要经过亲身经历才知道它的简单,这不,我以前确实把它想做特别复杂,现在亲自动手之后,才发现也不是很难的。 首先,要构造目录树,最重要的就是数据结构了,数据的构造形式直接影响这dom结构的构造,经过几番思考,最终想出了以下的数据结构(json格式): [code lang=”j…

JS拼图游戏

分类 : html+css, Javascript · (4) 条评论 · by 2013年06月3日
JS拼图游戏

周末在家闲的无聊,于是自己写了一个游戏自己玩,结果自己做的游戏自己都玩不过去,哎,整的我测试都挺麻烦的。 我在网上看到很多类型的拼图游戏,说实话挺佩服的,不过我自己看了他们的实现方式, 所有的图片都是经过图片工具处理后被提前分割为很多张图片,这不仅造成了图片加载的延迟,同时也造成了不好的用户体验。 我想了很多方法,能不能在一张图片上下文章呢,于是我想到了css图片裁剪。 css中有个叫clip的属…

日期选择组件效果实现

分类 : Javascript · (4) 条评论 · by 2013年05月28日
日期选择组件效果实现

日期选择一直是很多网站必备的功能,已经由传统的手动输入方式转化为了如今的鼠标选择方式,日期组件层出不穷,我目前最欣赏的还是jquery ui的datepicker。 以前总是觉得日期选择这种效果算法复杂,实现难度较大,其实当自己真正鼓起勇气直接开发的时候,才发现很多困难都可以迎刃而解,日期组件也没有想象中的那么难。 开发这款日期组件可以说对我这种初级工程师来说可以说锻炼极大,第一次使用了类的继承和…

拖拽排序示例

分类 : Javascript · (7) 条评论 · by 2013年05月27日
拖拽排序示例

前几天在网上看到许多拖拽排序的例子,于是自己也写了一个,其中很多原理还是照着网上来做的,但这其中对我来说收获最大的莫过于终于学会了一种碰撞检测技术,真是皆大欢喜啊! 实现代码如下: [code lang=”js”] (function(win, doc){ var _this = null; var info = {}; var list = []; var Sortabl…

HTML5定理定位(geolocation)+百度地图反向地理编码

分类 : HTML5+CSS3, Javascript · (2) 条评论 · by 2013年05月27日
HTML5定理定位(geolocation)+百度地图反向地理编码

实现代码如下: [code lang=”js”] var errorInfoList = [”, ‘用户拒绝共享位置信息’, ‘用户地址无效,有可能不在地球’, ‘获取位置信息超时’]; var posInfo = document.getElementById(‘posInfo…

自由落体运动在js中的表现方式

分类 : Javascript · (6) 条评论 · by 2013年05月19日
自由落体运动在js中的表现方式

自由落体运动一直是物理学上的重大研究发现,最近一直闲着没事做,结果就想着能不能用js的原理来阐述自由落体运动呢,于是乎自己边做了一个demo。 根据自由落体运动的原理,自由落体运动是一种特殊的匀加速直线运动,它的初始速度为0,加速度为重力加速度g,g的大小是由经度和纬度决定的,本文设定g的值为北京地区的重力加速度9.8,假定自由落体的时间为t,下落位移为s,下落速度为v,有以下公式存在: s = …

滑块拖动数字选择组件

分类 : Javascript · (2) 条评论 · by 2013年04月28日
滑块拖动数字选择组件

现在很多文本框都需要数字选择的功能,HTML5提供了input的number类型来解决此问题,但是由于浏览器兼容性及样式不统一的因素,此类型一直没有得到很大程度上的推广,本文将主要讲解通过滑块拖动来进行数字选择的组件原理。 HTML 由于是组件化调用,DOM内容选择了通过js动态构造,页面中只需添加以下标签即可。 [code lang=”xml”] [/code] CSS …

个人主页建立心得

分类 : 生活感受 · (3) 条评论 · by 2013年03月31日
个人主页建立心得

前言 身为一名Web前端开发工程师,一直想给自己搞个个人主页,主要用来分享一下自己的生活及技术。 由于各方面的原因,导致这个个人主页迟迟未能与大家见面,现在有了一点宽松的业余时间及技术能力,终于可以放开手来整我的这个主页了。 现在网站各方面功能都还未完善,希望能够保留你的一份耐心,期待后续功能的持续增加。 申请域名及空间 我以前还不知道怎样给自己置办个人域名及空间,后来从同事那里了解到国外的一个叫…

世界,你好!

分类 : 未分类, 生活感受 · (1) 条评论 · by 2013年03月26日

欢迎使用 WordPress。这是系统自动生成的演示文章。编辑或者删除它,然后开始您的博客!