js实现input中输入数字,控制每四位加一个空格(银行卡号格式)

前言

今天来讲讲js中实现input中输入数字,控制每四位加一个空格的方法!这个主要是应用于我们在填写表单的时候,填写银行卡信息,要求我们输入的数字是四位一个空格!今天主要介绍两种方式来实现这个方法!但是都运用到了键盘码。下面我就列举一下键盘码,以备后面查阅!

键盘各按键对应的数字

keycode 8 = BackSpace      |     keycode 9 = Tab              |   keycode 12 = Clear  
keycode 13 = Enter            |      keycode 16 = Shift           |   keycode 17 = Control 
keycode 18 = Alt               |      keycode 19 = Pause         |  keycode 20 = CapsLock
keycode 27 = Escape        |      keycode 32 = Space         |   keycode 33 = Prior 

Zepto的使用及一些问题小结

前言

我之前在手机网站注意问题,一文中,提及到Zepto。因为zepto体积小,在移动端开发应用还是蛮广泛的!有的公司手机端开发,jquery和zepto,都不用,直接用原生!我也写了一篇文章,关于jquery属性的相关js实现方法 。但是呢,大部分人写起原生来,还是比较费劲的。除非我们提前封装好!话又说回来了,封装好了和用jquery和zepto性能其实也差不了多少。因此,尽管zepto不是很完善,遭到很多人的吐槽,但是还是有一定的使用范围的。今天就和大家聊聊zepto!

Zepto在PC端的应用

zepto 说白了,相比jquery,最大的优点就是小!!,因为小,所以节省资源!很多移动端开发就是看中了这一点!假如你在PC端也想用,那么要做IE9及一下版本的兼容问题。

首先需要我们写一个加载器,针对浏览器做一些兼容,假如浏览器不支持Zepto那我们就加载jquery。大致代码如下:

html5本地存储图片方法

前言

上一篇文件结尾,有同学问我本地存储图片方法,其实本地存储方式有很多,我们打开谷歌浏览器,查看源代码,在resources页签中,有web SQl ,indexedDB等等,我前面文章讲过Localstorage本地存储,我今天简单用Localstorage,简单的写一下存储图片的方法!

思路

我们知道Localstorage只能存储字符串,那么我们可以把图片转换为base64编码的字符串,不就可以存储了吗?

图片编码的数据一般以如下开头

提高你css技能的css开发技巧

前言

说到css开发技巧,其实我前面所有关于css的文章,都是css的一些小的技巧!感兴趣的可以查看:http://www.haorooms.com/tag/css 还有值得一提的是,我之前关于css,分别写了css常用效果总结 ,还有一些 css的不常用效果总结,其实呢,这些都是相对的。有些效果我们在开发中不常用,但是有的项目也可能会用到!例如,最近做了一个小的项目,用到了css的resize属性。其实我本来不想用这个属性的,因为这个属性不兼容IE浏览器,但是呢,我这个项目却恰恰不需要兼容IE,是内部系统!那我先以resize属性介绍,作为本文的开头吧,虽然resize应用算不上css开发技巧!

一、resize实现图片对比

resize的语法如下:

resize:none | both | horizontal | vertical

案例效果如下图 (鼠标移到左下角白色区域,往右侧拖动,实现图片对比效果)

css中伪元素before或after中content的特殊用法attr

前言

前端技术发展很快,我之前写的js和jquery懒加载之可视区域加载,貌似谷歌,火狐等浏览器推出了新的方法,IntersectionObserver,可以高效的检测出某一个元素是否进入了可视区域!不过这个只有在谷歌51以上版本才可以使用!因此,关于这个属性,后面大面积推广之后,再给大家介绍。今天主要给讲讲用纯css制作精美的半边文字和鼠标移上去显示tip的效果!

知识点回顾

关于伪类及伪元素,我前面文章已经经过,before和after也写过相关文章http://www.haorooms.com/post/css_common 第十条。 content除了上面的用法之外,还可以如下写:

content: attr(data-haorooms);

获取哪个属性。