css：

.c_alert_dialog *{box-sizing:border-box}.c_alert_dialog{-webkit-tap-highlight-color:rgba(0,0,0,0);color:#111;position:fixed;left:0px;top:0px;z-index:9999;width:100%;height:100%;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.c_alert_inner .c_alert_mask{background:none}.c_alert_inner .c_alert_wrap{background:rgba(0,0,0,.88);color:#fff}.c_alert_mask{position:absolute;left:0;top:0px;width:100%;height:100%;z-index:505;background:rgba(0,0,0,.78);opacity:0;visibility:hidden;-webkit-transition:all .5s ease}.dialog_open .c_alert_mask{opacity:1;visibility:initial}.c_alert_wrap{color:#444;z-index:1200;max-width:400px;position:relative;background:#fff;height:auto;border-radius:10px;overflow:hidden;box-shadow:0 2px 20px rgba(0,0,0,.25);font-size:15px;opacity:0}.c_alert_title{padding:17px 14px 0 14px;line-height:1;margin-bottom:-2px;text-align:left;font-weight:bold;font-size:16px;position:relative}.c_alert_con img{vertical-align: top}.c_alert_con{text-align:left;font-size:15px;line-height:1.4;padding:12px 14px}.c_alert_title + .c_alert_con{padding:16px 14px}.c_alert_btn{border-top:1px solid #e7e7e7;overflow:hidden;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.c_alert_btn a{font-weight:bold;line-height:1;text-align:center;color:#228BFE;text-decoration:none;-webkit-appearance:none;-webkit-tap-highlight-color:rgba(0,0,0,0);display:block;padding:13px 0;font-size:16px;margin:0;background:0 0;border:none;border-radius:0;letter-spacing:1px;cursor:pointer;border-left:1px solid #e7e7e7;width:100%;transition:all .2s ease;-webkit-transition:all .2s ease}.c_alert_btn a:first-child{border-left:none}.c_alert_btn a:active{background:#eee}.dialog_open .c_alert_wrap,.dialog_close .c_alert_wrap{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}.dialog_open .c_alert_wrap{-webkit-animation-name:anim-open;animation-name:anim-open}.dialog_close .c_alert_wrap{-webkit-animation-name:anim-close;animation-name:anim-close;-webkit-animation-duration:0.3s;animation-duration:0.3s;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}.c_alert_width.c_alert_wrap{width:76%}@media screen and (max-width:800px){.c_alert_wrap{max-width:76%;border-radius:10px}}@-webkit-keyframes anim-open{0%{opacity:0;-webkit-transform:matrix3d(0.7,0,0,0,0,0.7,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.7,0,0,0,0,0.7,0,0,0,0,1,0,0,0,0,1)}2.083333%{-webkit-transform:matrix3d(0.75266,0,0,0,0,0.76342,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.75266,0,0,0,0,0.76342,0,0,0,0,1,0,0,0,0,1)}4.166667%{-webkit-transform:matrix3d(0.81071,0,0,0,0,0.84545,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.81071,0,0,0,0,0.84545,0,0,0,0,1,0,0,0,0,1)}6.25%{-webkit-transform:matrix3d(0.86808,0,0,0,0,0.9286,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.86808,0,0,0,0,0.9286,0,0,0,0,1,0,0,0,0,1)}8.333333%{-webkit-transform:matrix3d(0.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.92038,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}10.416667%{-webkit-transform:matrix3d(0.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.96482,0,0,0,0,1.05202,0,0,0,0,1,0,0,0,0,1)}12.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.08204,0,0,0,0,1,0,0,0,0,1)}14.583333%{-webkit-transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02563,0,0,0,0,1.09149,0,0,0,0,1,0,0,0,0,1)}16.666667%{-webkit-transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04227,0,0,0,0,1.08453,0,0,0,0,1,0,0,0,0,1)}18.75%{-webkit-transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05102,0,0,0,0,1.06666,0,0,0,0,1,0,0,0,0,1)}20.833333%{-webkit-transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05334,0,0,0,0,1.04355,0,0,0,0,1,0,0,0,0,1)}22.916667%{-webkit-transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.05078,0,0,0,0,1.02012,0,0,0,0,1,0,0,0,0,1)}25%{-webkit-transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.04487,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}27.083333%{-webkit-transform:matrix3d(1.03699,0,0,0,0,0.98534,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.03699,0,0,0,0,0.98534,0,0,0,0,1,0,0,0,0,1)}29.166667%{-webkit-transform:matrix3d(1.02831,0,0,0,0,0.97688,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.02831,0,0,0,0,0.97688,0,0,0,0,1,0,0,0,0,1)}31.25%{-webkit-transform:matrix3d(1.01973,0,0,0,0,0.97422,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01973,0,0,0,0,0.97422,0,0,0,0,1,0,0,0,0,1)}33.333333%{-webkit-transform:matrix3d(1.01191,0,0,0,0,0.97618,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.01191,0,0,0,0,0.97618,0,0,0,0,1,0,0,0,0,1)}35.416667%{-webkit-transform:matrix3d(1.00526,0,0,0,0,0.98122,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00526,0,0,0,0,0.98122,0,0,0,0,1,0,0,0,0,1)}37.5%{-webkit-transform:matrix3d(1,0,0,0,0,0.98773,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,0.98773,0,0,0,0,1,0,0,0,0,1)}39.583333%{-webkit-transform:matrix3d(0.99617,0,0,0,0,0.99433,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99617,0,0,0,0,0.99433,0,0,0,0,1,0,0,0,0,1)}41.666667%{-webkit-transform:matrix3d(0.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99368,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}43.75%{-webkit-transform:matrix3d(0.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99237,0,0,0,0,1.00413,0,0,0,0,1,0,0,0,0,1)}45.833333%{-webkit-transform:matrix3d(0.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99202,0,0,0,0,1.00651,0,0,0,0,1,0,0,0,0,1)}47.916667%{-webkit-transform:matrix3d(0.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99241,0,0,0,0,1.00726,0,0,0,0,1,0,0,0,0,1)}50%{opacity:1;-webkit-transform:matrix3d(0.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99329,0,0,0,0,1.00671,0,0,0,0,1,0,0,0,0,1)}52.083333%{-webkit-transform:matrix3d(0.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99447,0,0,0,0,1.00529,0,0,0,0,1,0,0,0,0,1)}54.166667%{-webkit-transform:matrix3d(0.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99577,0,0,0,0,1.00346,0,0,0,0,1,0,0,0,0,1)}56.25%{-webkit-transform:matrix3d(0.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99705,0,0,0,0,1.0016,0,0,0,0,1,0,0,0,0,1)}58.333333%{-webkit-transform:matrix3d(0.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99822,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}60.416667%{-webkit-transform:matrix3d(0.99921,0,0,0,0,0.99884,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99921,0,0,0,0,0.99884,0,0,0,0,1,0,0,0,0,1)}62.5%{-webkit-transform:matrix3d(1,0,0,0,0,0.99816,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,0.99816,0,0,0,0,1,0,0,0,0,1)}64.583333%{-webkit-transform:matrix3d(1.00057,0,0,0,0,0.99795,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00057,0,0,0,0,0.99795,0,0,0,0,1,0,0,0,0,1)}66.666667%{-webkit-transform:matrix3d(1.00095,0,0,0,0,0.99811,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00095,0,0,0,0,0.99811,0,0,0,0,1,0,0,0,0,1)}68.75%{-webkit-transform:matrix3d(1.00114,0,0,0,0,0.99851,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,0.99851,0,0,0,0,1,0,0,0,0,1)}70.833333%{-webkit-transform:matrix3d(1.00119,0,0,0,0,0.99903,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00119,0,0,0,0,0.99903,0,0,0,0,1,0,0,0,0,1)}72.916667%{-webkit-transform:matrix3d(1.00114,0,0,0,0,0.99955,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00114,0,0,0,0,0.99955,0,0,0,0,1,0,0,0,0,1)}75%{-webkit-transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.001,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}77.083333%{-webkit-transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00083,0,0,0,0,1.00033,0,0,0,0,1,0,0,0,0,1)}79.166667%{-webkit-transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00063,0,0,0,0,1.00052,0,0,0,0,1,0,0,0,0,1)}81.25%{-webkit-transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00044,0,0,0,0,1.00058,0,0,0,0,1,0,0,0,0,1)}83.333333%{-webkit-transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00027,0,0,0,0,1.00053,0,0,0,0,1,0,0,0,0,1)}85.416667%{-webkit-transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1.00012,0,0,0,0,1.00042,0,0,0,0,1,0,0,0,0,1)}87.5%{-webkit-transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1.00027,0,0,0,0,1,0,0,0,0,1)}89.583333%{-webkit-transform:matrix3d(0.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99991,0,0,0,0,1.00013,0,0,0,0,1,0,0,0,0,1)}91.666667%{-webkit-transform:matrix3d(0.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99986,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}93.75%{-webkit-transform:matrix3d(0.99983,0,0,0,0,0.99991,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99983,0,0,0,0,0.99991,0,0,0,0,1,0,0,0,0,1)}95.833333%{-webkit-transform:matrix3d(0.99982,0,0,0,0,0.99985,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99982,0,0,0,0,0.99985,0,0,0,0,1,0,0,0,0,1)}97.916667%{-webkit-transform:matrix3d(0.99983,0,0,0,0,0.99984,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(0.99983,0,0,0,0,0.99984,0,0,0,0,1,0,0,0,0,1)}100%{opacity:1;-webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1)}}@-webkit-keyframes anim-close{0%{opacity:1}100%{opacity:0;-webkit-transform:scale3d(0.8,0.8,1)}}
01.

调用：

Dialog.init('测试文字') //默认
Dialog.init('测试文字',2000) //第二个参数时间，2秒后自动关闭
Dialog.init('测试文字',{
    time : 1000,  //自动关闭
    maskClick : false, //点击背景层是否关闭弹层
    mask : false, //是否显示遮罩
    title : '是否删除？', //添加标题
    index : 1,  //设置索引，用于close方法
    addClass : 'bgRed', //追加class
    style : 'color:red', //追加css
    button : { //按钮
        确定 : function(){
            Dialog.init('你点击了确定',1000);
            Dialog.close(this);
        },
        取消 : function(){
            Dialog.init('你点击了取消',1000)
            Dialog.close(this);
        }
    },
    before : function(){
        //this.classList.add('autoWidth')
        //dom创建成功，但未渲染
        console.log('创建成功',this);
    },
    after : function(){
        console.log('关闭成功',this)
    },
    onload : function(){
        console.log('加载成功',this)
    }
});
//关闭
Dialog.close(this); //在内部使用可直接使用this
Dialog.close(1,function(){
    //手动关闭弹层，第一个参数为索引值（配合上面index参数使用）；
    //第二个参数为回调
});
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.

举例：

（更多…）

大家写项目的时候，应该都会去引用jq库吧，每次都去加载这几十K的东西，虽说不大，但是多少都会占用带宽。或许你可以使用缓存，但是强制刷新，或者清空缓存之后，还是会去请求加载。

其实可以使用localstorage来缓存js。只要用户不去remove掉，基本上可以一直保存下来，并且存储量能达到5M，可以把css，js甚至一些图片缓存起来也可以。

下面的实例代码，用到之前封装的localstorage方法，具体 点击这里查看。ajax方法点击这里查看。

写一个简单的小栗子。

//进页面的时候判断是否有jquery
if(!store.get('jq')){
    //如果没有，则设置localstorage
    Ajax.init({
        type : 'get',
        url :'jq.php',
        success : function(d){
            //设置
            store.set('jq',d);
            init();
        }
    }); 
}else{
    //否则
    init();
};
function init(){
    //把jq写进html
    var js = document.createElement('script');
    js.type = "text/javascript";
    js.innerHTML = store.get('jq');
    document.querySelector('head').appendChild(js);
    //测试jq是否引入成功
    alert(jQuery.fn.jquery);
};
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.

看下控制台结果。

（更多…）

轻量级轮播图插件，可全屏自适应，压缩后仅有2K多，麻雀虽小，五脏俱全。不用在为了一个轮播图，而去加载几十K的大插件了，下面看使用方法。

html

<div class="wrap">
    <ul> //这里必须为第一个子元素
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
01.
02.
03.
04.
05.
06.
07.
08.

css

.wrap{width:90%;height: 300px;overflow: hidden;}
ul {width: 100%;height: 100%;position: relative; }
ul li{ list-style: none;height: 100%;width: 100%; position: absolute; left: 0px;top: 0px;display: none;/*隐藏*/}
/*注意，下面这三个class必须为这样的类名，因为没有以参数的形式写进js，所以不能改变*/
/*如果左右切换复制以下css*/
li.active{display: block}
li.nextList{ display:block;left: -100%}
li.prevList{ display:block;left: 100%}
/*如果上下切换复制以下css*/
li.active{display: block}
li.nextList{ display:block;top: -100%}
li.prevList{ display:block;top: 100%}
/*如果透明切换用以下css*/
li.active{display: block}
li.nextList{ display:block;opacity: 0;filter:alpha(opacity:0)}
li.prevList{ display:block;opacity: 0;filter:alpha(opacity:0)}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

上面css中列表li为absolute，所以固定了高度，并不会被图片撑开，如果需要高度跟着图片撑开的话，修改为relative，并将nextList和prevList添加position: absolute即可。

调用接口：

//直接传入class或者id
var es = new EasySlide('.wrap');
//也可以第二个参数带入配置，配置如下
var es = new EasySlide('.wrap',{
    speed :500,   //切换速度
    type : 'x',   //切换类型，有3个选项，x，y，fade（这个代表渐隐渐现）
    time : 3000,  //自动播放间隔时间
    auto : true,  //是否自动播放
    before : function(n){
        //每次切换之前执行，n为当前索引值
    },
    after : function(n){
       //每次切换结束后执行，n为当前索引值
    }
});
es.active  //获取当前的索引值
//其他方法
es.stop() //停机切换
es.start() //开始切换
es.to (3) //切换到第几个
es.next() //切换下一个
es.prev() //切换上一个 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.

看几个例子，默认X轴：

（更多…）

页面下拉刷新。看过很多下拉刷新的组件，要么通过Iscroll这样的插件完成，要么原生写的并不是很完美，大部分都有点bug。于是~~~尝试写了一个。

DOM结构如下：

<body>
    //内容
</body>
01.
02.
03.

如果页面顶部有 fixed 定位元素的话，transform 属性会让fixed失效，所以改为嵌套一层。

<body>
    <section class="wrap">
        //内容
    </section>
</body>
01.
02.
03.
04.
05.

调用接口：

var s = new Refresh('body')  //包裹层的id或者class或者body，默认body
//其他方法
s.start(function(){
    //开始加载或者刷新
});
//加载或者失败执行，用与收回提示
s.load();  
s.load(400) //代表加载完成后多久收回提示框，非必要参数，默认400毫秒
s.load(function(){
    //也可以自定义加载成功标语，或者执行其他函数
    this.innerHTML = '加载成功啦啦~'
    //this.innerHTML = '加载失败了~'
},400); //时间放到后面，非必要参数  
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.

比如，如果只需要下拉刷新，可以这么做：

var s = new Refresh();
s.start(function(){
    location.reload(); //执行刷新
});
01.
02.
03.
04.

如果需要ajax更新内容，如下：

var s = new Refresh();
s.start(function(){
    //ajax请求
    $.ajax({
        success : function(){
            //ajax成功后执行load
            s.load(400);
        }
    });
}); 
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.

点击这里查看DEMO

点击这里下载JS

调用：

//第一个参数为触发对象。
//第二个参数是一个数组，数组每项是个JSON，每个json就是一个菜单
contextMenu.init (document,[
    {
        name : '重新加载',  //菜单内容
        className : 'test', //自定义class
        disable : true, //设置是否禁用
        data : ['title','test'], //添加data属性，类型为数组，第一个参数是属性名，第二个为属性值
        icon : 'http://itakeo.com/images/icon2.png', //添加icon小图标
        callback : function(){  //点击回调函数
            alert(this)
        }
    }
]);
//还可以指定显示某个元素，第二个参数为class或者id
contextMenu.init( document,'.target' );
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

演示：

（更多…）

又是一个模拟滚动条，鉴于之前写过一个（点击这里查看），总感觉不是很完美，也没有耐心去完善他，于是重新写了一个，代码量更少，压缩后仅2K。先看下使用方法。

DOM结构如下，分两层，外面包裹一层，里面一层也不需要去设置定位，只需要设置 overflow:auto 即可。

<div class="wrap">
    <div class="content">
        //内容
    </div>
</div>
01.
02.
03.
04.
05.

JS调用：

//传入元素的id或者class
var s = new Scroll('.scrollWrap');
s.top(function(){
    //达到顶部执行
});
s.bottom(function(){
    //达到底部执行
});
s.resize(); //用于添加内容或者自适应的时候，重新计算滚动条高度 
01.
02.
03.
04.
05.
06.
07.
08.
09.

看个例子：

（更多…）

页面内容滚动监测，就是当前第几个的内容出现在可视区，给第几个导航菜单添加高亮，做了下简单的封装，先看调用方法：

var nav = new fixedNav({
    nav : '.nav1',  //必须参数，菜单每项的class
    content : '.content div', //必须参数，内容标示每项的class
    position : 'view',  //具体说明看下面的例子
    offset : 0   //触发范围追加
});
nav.scroll(function(t){
    // t为当前的scrollTop，可用户判断
});
nav.active(function(i){
    // 返回当前内容在可视区的索引值
    // 注意：如果position参数为view的时候，返回的i是一个数组
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.

代码自身没有做太多功能，只计算内容区域是否出现在可视区，具体的滚动判断，以及改变导航颜色等都以接口的形式自己设置。

下面针对上面的接口，写几个案例：

（更多…）

图片上传本地预览。兼容IE。

html

<input onchange="PreviewImage(this)" type="file">
01.

js

function PreviewImage(obj) {
    var _divNewPreview = document.getElementById('divNewPreview');
    var allowExtention = ".jpg,.bmp,.gif,.png,.jpeg";
    //,允许上传文件的后缀名
    var extention = obj.value.substring(obj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        //判断是否是IE浏览器
        if ( obj.files ) {
            //兼容HTML5获取路径
            if ( typeof FileReader !== "undefined") {
                for(var i = 0;i < obj.files.length;i++){  
                    var file = obj.files[i]; 
                    var reader = new FileReader();
                    reader.readAsDataURL(obj.files[i]);
                    reader.onload = function(e) {
                        //添加图片
                        _divNewPreview.insertAdjacentHTML("beforeend", '<div class="imgBox"><img src="'+this.result+'" alt=""> </div>');
                    };
                };
            };
        }else{
            //添加图片
            obj.select();  
            obj.blur();  
            _divNewPreview.insertAdjacentHTML("beforeend", '<div class="imgBox"></div>');
            _divNewPreview.lastChild.style.filter = " progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
            _divNewPreview.lastChild.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text; 
        };
    } else {
        alert("仅支持jpg,bmp,gif,png为后缀名的文件!");
        obj.value = "";
    };
};
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.

下面是演示效果：

（更多…）

将HTML5本地存储简单的封装了下，方便使用。

设置

//设置
store.set('user','张三');
//可以传入数组
store.set('list',[1,2,3,4]);
//还可以传入一个JSON
store.set('user',{
    key : 10,
    key1 : 20
});
01.
02.
03.
04.
05.
06.
07.
08.
09.

获取

//获取
store.get('user');
//如果存储的是数组
store.get('user')[0];
//如果存储的是JSON
store.get('user').key;
01.
02.
03.
04.
05.
06.

删除

//删除
store.remove('user');
//第二个参数不写的时候，默认也是删除
store.set('user');
//清除所有
store.clear();
01.
02.
03.
04.
05.
06.

其他操作

//存储的个数
store.length();
//获取第几个
store.key (i);
//循环所有已经存储的数据
store.each(function(k,v){
    console.log ( k + '==' + v );
});
//判断本地存储是否可用
store.enabled;
if(!store.enabled) alert('当前本地存储不可用！');
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.

源码如下：

（更多…）

倒计时：

var c = new CountDown('2012/12/12 12:12:12'); //传入结束的时间
var c = new CountDown('2012/12/12'); //传入结束的时间
var c = new CountDown(['2012/12/12','2012/12/13']); //或者传入数组，第一个开始时间，第二个结束时间
var c = new CountDown(5000000); //或者是毫秒数
//run方法，第一个参数为执行方法，第二个参数是刷新时间，可不写，默认1000毫秒
c.run(function(t){
    //t是一个对象
    //t.day   剩余天数
    //t.hour  剩余小时
    //t.min   剩余分钟
    //t.sec   剩余秒数
    //t.ms    剩余毫秒数
},1000);
c.end(function(){
    //倒计时结束
});
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
14.
15.
16.

例子1：

var span = document.querySelectorAll('.countdown1 span');
new CountDown(500000).run(function(e){
    span[0].innerHTML = e.hour;
    span[1].innerHTML = e.min;
    span[2].innerHTML = e.sec;
});
01.
02.
03.
04.
05.
06.

例子2：

例子3：

点击这里下载JS