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);

获取哪个属性。

html5自带表单验证体验优化及提示气泡修改

前言

慕课网之前录制的视频,js/jquery各种宽高的理解和应用,最近终于上线了。还有一个html5左侧导航没有上线!最近慕课网系列课程让我录制一个html5表单验证的课程。今天就稍微说一下表单验证!另外,有网友建议我录制一些关于vue的视频。一是由于vue我本身用的也不多,二是视频网站暂时没有让我录制的需求。因此,后面有时间我再准备此方面的课程!

下面说下正题,html5表单验证方便的知识,我之前也写过!大家请看http://www.haorooms.com/post/html5_form_zs 今天呢,在写写其再带验证方面的东东!

html5自带表单验证

很多朋友进行表单验证的时候,都是自己用jquery或者js手工验证,或者用一下jquery插件进行验证。因为大家觉得html5自带验证不是很好!其实,现在html5自带表单验证,目前已经蛮强大了。我们来看下我用纯html5写的一个表单验证吧!体验一下!

javascript函数的uncurrying 反柯里化

什么是反柯里化?

前面我们讲了js函数的柯里化,今天我们再来说说反柯里化。反柯里化,字面意思的柯里化的反义词,对立面。没错,反柯里化的作用在与扩大函数的适用性,使本来作为特定对象所拥有的功能的函数可以被任意对象所用。更通俗的解释说反柯里化是 函数的借用,是函数能够接受处理其他对象,通过借用泛化、扩大了函数的使用范围。只说可能有点迷糊,我们来看看例子:

我们给函数增加一个反柯里化方法!

Function.prototype.unCurrying= function() {
    var that = this;
    return function() {
        return Function.prototype.call.apply(that, arguments);
    }
}