这个是昨天晚上看电视里面有个抽奖效果，看起来觉得有点意思，就自己写了下，暂时就叫他随机排序抽奖吧。其实原理也没啥，就是随机修改位置，点击的时候，覆盖css就可以了，具体看下面的演示：

（更多…）

图片懒加载，也可以叫做按需加载，它是对网页性能优化的一种方案，达到节省资源，加快浏览速度的目的。各大网站都使用这个技术，例如谷歌的图片搜索页，天猫，淘宝，京东等。

其实原理也很简单，就是判断图片是否在可视区内。首先给图片的src设置一个loading图片，或者一个1像素的透明图片，然后设置一个自定义属性，比如_src，或者使用data-src，如果页面滚动的时候，图片达到可视区内的话，就把自定义属性_src赋值给src。下面就简单的介绍一下基本的代码实现过程。

下面是dom结构

//设置图片的data属性为真实地址，src可以是一张透明图片。  
<img src="images/1x1.png" data-src="images/p.jpg"> 
01.
02.

下面是js代码

//函数调用，可以不传参数  
lazy.init()  
//也可以带参数，参数为容器的ID或者class  
lazy.init('#wrap');  
lazy.init('.wrap'); 
01.
02.
03.
04.
05.

var lazy = {  
    //初始化函数  
    init : function(){  
        //判断需要根据哪个容器来懒加载图片，如果没有参数，则是根据document  
        var _ele = document.querySelector(arguments[0]) || document;  
        //获取容器里面所有的图片  
        var _img = _ele.querySelectorAll('img'),_this = this;  
        //初始执行一次  
        this.set(_img);  
        //给window绑定scroll事件  
        this.addEvent(window,'scroll',function(){  
            _this.set(_img)  
        });  
        //给window绑定resize事件  
        this.addEvent(window,'resize',function(){  
            _this.set(_img)  
        });  
    },  
    //设置图片  
    set : function(_img){  
        //获取可视区的高度  
        var _h = document.documentElement.clientHeight;  
        //然后循环img  
        for (var i=0;i<_img.length;i++) {  
            //判断是否出现
            if(!_img[i].off && (_img[i].getBoundingClientRect().top) <  _h ){  
                 //设置src  
                _img[i].src = _img[i].getAttribute('data-src');  
                //删除自定义_src属性  
                _img[i].removeAttribute('data-src');  
                //设置一个开关，防止每次滚动都重新修改src  
                _img[i].off = true;  
            }  
        };  
    },  
    //绑定事件  
    addEvent : function (obj,types,fn){  
        obj.attachEvent ? obj.attachEvent('on'+types,fn) : obj.addEventListener(types,fn,false)  
    }  
} 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.

（更多…）

大家在做移动端的时候，有没有遇到当有输入框在页面最下面的时候，点击input输入框会被输入法遮住了，这个在Android系统貌似没有这个bug，可能是我测试的机器不够多，在ios系统中，原生输入法貌似也不会引起这个问题，但是第三方的输入框肯定会这样。

点击这个链接查看有bug的demo

如果你点击了上面的demo，会发现最下面的input输入框在获得焦点的时候，会被输入法遮盖住了。

其实解决这个很简单，网上大都使用fixed定位到顶部，是可以解决，但是下面的内容会暴露出来，虽然通过嵌套一层能解决，而且脱离文档流，可能有样式问题，无疑又麻烦了，所以个人不太喜欢这个方法，我是通过给body添加scrollTop，把input的位置挪到最上面就可以了。可以看下面的图片。

（更多…）

发表留言或者微博的时候，对输入文字个数的限制，下面分两种情况，每种分别介绍两种实现方式：

第一种：一个汉字算一位，两个字母或符号算一位。

通过ASCII编码来判断

（更多…）

js对DOM节点的操作整理…

获取节点：

（更多…）

1、定义数组，有三种定义方式：

方式一：

方式二：

方式三：

2、数组的length属性，可以获取数组的长度，也可以截取，清空数组，如果设置的值比其当前值小，数组将被截断，其尾部的元素将丢失。如果设置的值比它的当前值大，数组的长度将增大，新的元素被添加到数组的尾部，它们的值为 undefined：

（更多…）

首先，为了使元素可拖动，需要给元素添加draggable的 属性，并且设置为 true ：

当元素拖动时，会发生以下几个事件，虽然跟鼠标的mousedown，mousemove和mouseup类似，但是也有区别：

（更多…）

之前写过一次类似树叶落下的效果，当时想到的方法是，动态的往body里面添加元素，添加一些随机的属性，然后写一个动画，让他按照随机的速度落下，达到一种落差的效果，最后判断top值是否超过clientHeight，超过就remove掉。

嗯，看样子不错，也能跑起来，但是在安卓手机上测试，会有卡顿，后来优化了下，改成css3动画，再次测试，不错，安卓也不卡了，挺流畅，但是代码量又增加了，并且这样反复的对dom进行属性的重绘，添加和删除，效率很低。

今天换了另一种写法，所有动画效果全部利用css3来完成，也不用反复的进行dom添加和删除操作了，并且代码量是之前的三分之一。先看下面的演示效果吧。

（更多…）

对字符的各种操作有时候总会忘记几个，这次做一下整理：

length – 返回字符串的长度

Math.ceil(num) – 向上取整，不管小数点后面是多少，哪怕.00001，也会向上进一位。

Math.floor(num) – 向下取整，不管小数点后面是多少，哪怕.99999，也会向下减一位。

（更多…）

这是一些移动端开发的备忘记录。

<meta> 元素

（更多…）