iTakeo

Archive for 10 月, 2015

JS将图片转换成base64。

JS将图片转换成base64格式，之前有篇读取本地图片，使用html5也可以做到，这里用到了canvas来处理。

调用：

  1. imgToBase.init(‘li3.png’,function(data){  
  2.     //回调，data为base64代码  
  3. });  

源码：

（更多…）

2015/10/30 0 /
前端
/
标签:  暂无标签

随手记：一个文字无限滚动。。。

利用appendChild，做一个无限滚动。达到一定距离后，把第一个append到最后一个，第二个就变成第一个，以此类推。

无间隔。

  1. var dom = document.getElementById(‘wrapScroll’),i = 0;  
  2. //定时器  
  3. setInterval(function(){  
  4.     init();  
  5. },40);  
  6. function init(){  
  7.     i = i-1;//累减  
  8.     if(i<=-35){  
  9.         //位置归0并append  
  10.         dom.style.top = ‘0px’,i = 0;  
  11.         dom.appendChild(dom.children[0]);  
  12.     };  
  13.     dom.style.top = i +’px’  
  14. };  

有间隔。

（更多…）

2015/10/26 2 /
随手记
/
标签:  暂无标签

一个简单的日期选择插件。

一个简单的日期选择插件。

下面是调用方法。 

//调用方法，后面回调函数返回的是当前选择的日期
//第二个参数如果为true时，则直接显示日历，该参数可不写（不写则是点击显示）  
calender('#calend',true).init(function(date){  
    this.innerHTML = date  
});
01.
02.
03.
04.
05.
//具体参数说明    
//如果需要传入参数，第一个为json，第二个为回调函数    
//下面是format格式化显示格式类型，有如下几种：    
//yyyy为年数      
//大写M为月数      
//d为几号      
//h为小时      
//小写m为分钟      
//s为秒数      
//q为季度      
//小写e，为数字星期格式      
//大写E，为中文星期格式      
//举例：'yyyy年MM月dd日','yyyy-MM-dd','yyyy','MM','e','dd E'    
//注意：以上获取时间如果是个位数则返回个位数，比如7月，则返回7，如果需要返回07，参数可以写成这样“MM”，其它同理，由于时分秒功能还没有添加，默认获取当前时分秒     
calender('#calend').init({    
    date : [2015,12,12], //设置默认显示年月日，默认当前年月日       
    format : 'yyyy-MM-dd', //设置显示格式  
    button : false //是否显示按钮    
    left : 0, //追加left，默认0
    top :0, //追加top，默认0
    onload : function(){  } //初始化完成执行，this为当前创建的日历对象  
},function(date){    
    //回调函数    
    this.innerHTML = date    
});
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.

主要css样式。 

#calender-mask{position:fixed;left:0px;top:0px;width:100%;height:100%;z-index:999}.containter{width:320px;margin:auto}.calender-wrap{-webkit-animation:clafade .3s ease;-moz-animation:clafade .3s ease;animation:clafade .3s ease;padding:5px;background:#fff;width:240px;box-shadow:0 5px 10px rgba(0,0,0,0.2);border-radius:4px;position:relative;font-family:"Microsoft yahei";position:absolute;z-index:1000}.calender-wrap{border:1px solid #e2e2e2}.calender-wrap:after{content:'';display:inline-block;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #eee;border-top:0;border-bottom-color:#d7d7d7;position:absolute;left:9px;top:-7px}.calender-wrap:before{content:'';display:inline-block;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #ffffff;border-top:0;position:absolute;left:10px;top:-6px;z-index:10}.calender-caption{height:35px;border-bottom:1px solid #ddd;z-index:2;background:#eee}.calender-content{position:relative;overflow:hidden}.calender-content:after{content:'';display:block;clear:both}.calender-cell{cursor:pointer;float:left;width:14.28571428%;height:35px;text-align:center;line-height:35px;font-size:12px;color:#000;z-index:1;border-bottom:1px solid #eee}.calender-cell:hover{background:#eee}.calender-caption .calender-cell:hover{background:none}.calender-cell-dark{cursor:no-drop;color:#b9b9b9}.calender-caption .calender-cell{height:35px;line-height:35px;font-size:13px;color:#111;font-weight:bold}.calender-header{text-align:center;line-height:35px;text-align:center;color:#888;padding-bottom:4px;margin-bottom:1px;background:#fff;position:relative;border-bottom:1px solid #e6e6e6;font-size:14px}#calender-prev,#calender-next{text-decoration:none;display:block;width:14.2857%;height:35px;background:#fff;position:absolute;left:0%;top:0px;font-family:'宋体';font-size:14px;color:#555}#calender-prev,#calender-next{color:#999;font-size:16px}#calender-prev:hover,#calender-next:hover{background:#eee;border-radius:5px;color:#222}#calender-next{left:auto;right:0%}#calender-year,#calender-mon{cursor:pointer;padding:2px 4px;border-radius: 3px; margin:0 3px;}#calender-year:hover,#calender-mon:hover{background:#eee}.calender-list{overflow:hidden}.calender-list2,.calender-list3{display:none}.calender-year-cell,.calender-mon-cell{width:32.41%;float:left;border-radius:4px;text-align:center;font-size:12px;padding:15px 0;border:1px solid #fff}.calender-year-cell:hover,.calender-mon-cell:hover{background:#eee;cursor:pointer}.calender-cell.active,.calender-year-cell.active,.calender-mon-cell.active{background:#23acf1;color:#fff}.calender-cell.active:hover,.calender-year-cell.active:hover,.calender-mon-cell.active:hover{background:#23acf1;color:#fff}.calender-button{border-top:1px solid #eee;width:100%;margin-top:-1px;padding:7px 0px 2px 0;overflow:hidden}.calender-button a{display:block;text-align:center;padding:0px 15px;height: 25px; line-height: 25px; float:right;background:#23acf1;color:#fff;margin-right:5px;cursor:pointer;margin-left:5px;font-size:12px;text-decoration:none}.calender-button a:hover{background:#0084c9}.calender-wrap.year .calender-list,.calender-wrap.month .calender-list{display:none}.calender-wrap.year .calender-list2{display:block}.calender-wrap.month .calender-list3{display:block}@keyframes clafade{0%{transform:scale(0.95);opacity:0}100%{transform:scale(1);opacity:1}}@-webkit-keyframes clafade{0%{-webkit-transform:scale(0.95);opacity:0}100%{-webkit-transform:scale(1);opacity:1}}
01.

（更多…）

2015/10/24 0 /
前端
/
标签:  暂无标签

正则匹配所有html标签。


正则匹配所有html标签，如下：

<[^>]+>

经过测试，发现下面的也可以。

<.*?>


2015/10/19 0 /
随手记
/
标签:  暂无标签

JS控制多行文字超出省略号。

单行文字超出省略号很简单，只要通过css就可以了，如下：

  1. overflow: hidden;  
  2. white-space: nowrap;  
  3. text-overflow: ellipsis;  
单行文字超出省略号，单行文字超出省略号

多行文字超出省略号，也可以通过css来设置，但是只有webkit内核的才支持，Firefox和IE基本跪了。

（更多…）

2015/10/16 0 /
前端
/
标签:  暂无标签

改变attachEvent的this指向，导致无法detachEvent的解决方法。

改变attachEvent的this指向，导致无法detachEvent的解决方法。

我们在给dom元素绑定事件的时候，通常使用下面的方法：

  1. //绑定  
  2. function bind(obj,name,fn){  
  3.     if(obj.addEventListener){  
  4.         obj.addEventListener(name,fn,false);  
  5.     }else if(obj.attachEvent){  
  6.         obj.attachEvent(‘on’+name,fn);  
  7.     };  
  8. };  
  9. //移除  
  10. function unbind(obj,name,fn){  
  11.     if(obj.removeEventListener){  
  12.         obj.removeEventListener(name,fn);  
  13.     }else if(obj.detachEvent){  
  14.         obj.detachEvent(‘on’+name,fn);  
  15.     };  
  16. };  

看似完美，其实在IE8以下中有bug，当在用attachEvent给元素添加事件的时候，默认的this指向是window，而不是元素自身。可以点击下面的div查看。在IE8及以下，this指的是window对象。

（更多…）

2015/10/15 0 /
前端
/
标签:  暂无标签

选择城市组件2

又是一个城市选择组件，之前有个模拟京东的(点击这里查看)。

同样支持无限级，只需在地区json里面添加数据即可，兼容IE7，另外针对移动端也做了一点兼容。

  1. //调用，回调函数返回的是选择的地区  
  2. chooseMap(function(str){  
  3.     alert(str)  
  4. });  

html结构没有写进js里面。需要写入页面中，复制如下代码：

  1. <div class=“choosebg”></div>  
  2. <div class=“pop_location”>  
  3.     <h1><em id=“back”> &lt; </em><span id=“mapName”>选择城市</span> </h1>  
  4.     <div class=“location_lsit” id=“mapWrap”>  
  5.            
  6.     </div>  
  7.     <div class=“btns”>  
  8.         <a href=“javascript:;” class=“cacle”>取消</a>  
  9.         <a href=“javascript:;” class=“choose” id=“choose”>确定</a>  
  10.     </div>  
  11. </div>  

（更多…）

2015/10/13 0 /
前端
/
标签:  暂无标签

随手记：获取url参数

  1. function getUrl(name) {  
  2.     var reg = new RegExp(“(^|&)” + name + “=([^&]*)(&|$)”, “i”);  
  3.     var r = window.location.search.substr(1).match(reg);  
  4.     if (r != null) return unescape(r[2]); return null;  
  5. };  
2015/10/12 1 /
随手记
/
标签:  暂无标签

Copyright © 2024 Powered by

皖ICP备15014831号

回到顶部