让input有更好的体验

最近做了一个类似这样的功能,在移动端上,数字可增可减。其中,能改变数字的触发点有: "-"号 "+"号 点击数字区块,唤起数字键盘。 这里,我直接用input来实现这个数字区块。 1. type="number"还是"tel"? 对比一下两张图,就能很快知道结论。 type="n »

由“最近访客”引起的xss血案

最近在首页粗糙地做了一个“最近访客”功能。 然后我的首页就出现了各种有趣的家伙: 还有: 作为一名专业的前端,我居然被xss攻击了。 在首页弹这个框,我真是: 原因 在拼接“最近访客”的时候,我没有对多说返回的字段进行处理。 不是不知道会有XSS问题,而是没有重视起来; 我可 »

CSS outline实现意想不到的效果

今天在微博看见@zhangxinxu召集各种实现了十字功能的方法。@大地Dudy和@灵感_idea都想到了用outline-offset这个方法,大开眼界。我就开始关注起了这个css属性。 这个属性其实很简单,就4种类型: outline-width outline-style »

多行文字溢出超过限定宽度,自动添加省略号

常会有“文字溢出自动添加省略号”的需求: 单行文字省略 或者,需要指定更多行数再添加省略号: 单行文字省略 开始实现吧: 单行文字添加省略号 css核心代码: overflow: hidden; /* 内容被剪裁,其余内容不可见 */ text-overflo »

“战主播迎话费页面”总结

又写了一个页面。老习惯,写总结。 这次做的和之前的大同小异。除了,字体在这里特殊一些。 先说说引用非主流字体的方式: 引用非主流字体的方式 Geogle API 但是现在都墙的厉害,放弃治疗。而且,GEOGLE支持的字体也是有限的。 文字做成图片 这个网站显然不行,因为很多文字 »

简易播放器实现

做了个简易音乐播放器。 演示代码:http://codepen.io/makaiqian/pen/eybvq 基本功能: 1.播放、暂停 2.上一首、下一首 简单说下它的核心代码: 1. 定义 var $music = $(‘#js-music’)[0]; 定义的时候是$( »

“中秋”项目总结

继第一次接触活动项目黄金星期三、充值活动之后,感觉顺手起来,速度也变快了N倍,嘿嘿嘿~特别是在和PHP的交互上,也有一些自己的概念。 像以前一样,总结下收获吧,这次主要一些新学的东西和技巧: 1. 有见过script的这个type吗? <script type="text/ »

CSS3 Animals - Sparrow

最近很流行做CSS 3的卡通人物或者动物,作为小麻雀,我也来体验一把。 虽然自我感觉UI不是特别的萌萌,但是我的“小麻雀”还是实现咯! 喳喳喳~请叫我小麻雀!嘿! 观赏地址:小麻雀 »

自定义高亮code功能

.css{ margin: 0; padding: 0; } 本来是想等新版的blog出来再实现。 但是Markdown实在是太方便了,在原来这个也稍微设置一下,这样就不用截图了,直接coding出来。 实现方法:原本的blog是没有支持Markd »

惊现CSS3 filter

看了一篇文章,才开始知道原来不止IE才有filter,原来CSS3也有。这篇文章的链接:http://www.xuanfengge.com/css3-grayscale-black-and-white-filters.html 哈哈,顺便说一下,它的导航很酷哦,可以在上面弹钢琴。 »

CSS外边距合并(叠加)

几种CSS外边距合并的情况 一个元素的下边距和一个元素的上边距重合 一个元素包含着另一个元素 前提:中间没有内边距和边框分隔开 空元素的上边距和下边距 前提:是个空元素,没有内容,没有内边距,没有边框 为什么会合并? 总的来说,从两个垂直外边距合并时,将形成一个外边距,外边距的值 »

总结-活动领取页面(计时功能)

做的第一个活动页面,还是挺有意义的。终于可以归档啦: 问题多多,收获自然也多多。写个总结: 一.页面部分 data参数用法 HTML中:data-id=”01″ / data-type=”0″ 在ajax中: var $this = $(this); var id = $th »

清除浮动clearfix

一直有在用,但是没有分析几种清楚浮动的方法和他们之间的比较。 为什么要清除浮动? 盒子里用了CSS float属性,父级对象不能被撑开。 这是6个float:left的<li>,父级<ul>添加上了边框,明显没有撑开。 这样的副作用是什么? 背景效果出不来 »

自动排序的友情链接功能

今天,写了一个自动排序的友情链接功能。 上效果:http://codepen.io/makaiqian/pen/ruBiJ 核心代码是: 可以优化为: 另外: 优化为: 这样的好处是:可以提高性能。不然每次循环都要append一次。 近期,自己写了个新主题,比较偏向自己的实用性, »

sublimeLinter-jscs插件

介绍 高亮提示代码中不规范和错误 演示 过程 安装node 安装sublimeLinter 安装sublimeLinter-jscs 在要检测的文件的同意目录中放入.Jscsro 重启Sublime Text 快捷键 ctrl + K »

忘加题目了——最近挺好哒

最近开始做项目了。做项目和平时不一样,可不是玩的。 一方面,有严格的立项,要在规定的时间内完成。要和身边的人合作完成,自己做得不好可不能拖累队友。另一方面,涉及到公司的利益,可能因为自己的一点小小的失误会出现一些利益上的问题。当然没有遇见过,希望以后也不要遇见。 小指可不要抖一下 »