最前端

我的工作，我的生活，点点滴滴...

关于‘ 文章 ’ 目录的归档

svg图标

  1. 创建svg symbol代码，可放在页面内，亦可放在一个单独文件，如svgdefs.svg:

    <svg display="none" width="0" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-home" viewBox="0 0 1024 1024">
	<title>home</title>
	<path class="path1" d="M512 32l-512 512 96 96 96-96v416h256v-192h128v192h256v-416l96 96 96-96-512-512zM512 448c-35.346 0-64-28.654-64-64s28.654-64 64-64c35.346 0 64 28.654 64 64s-28.654 64-64 64z"></path>
</symbol>
<symbol id="icon-edit" viewBox="0 0 1024 1024">
	<title>edit</title>
	<path class="path1" d="M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"></path>
</symbol>
<symbol id="icon-tag" viewBox="0 0 1024 1024">
	<title>tag</title>
	<path class="path1" d="M976 0h-384c-26.4 0-63.274 15.274-81.942 33.942l-476.116 476.116c-18.668 18.668-18.668 49.214 0 67.882l412.118 412.118c18.668 18.668 49.214 18.668 67.882 0l476.118-476.118c18.666-18.666 33.94-55.54 33.94-81.94v-384c0-26.4-21.6-48-48-48zM736 384c-53.020 0-96-42.98-96-96s42.98-96 96-96 96 42.98 96 96-42.98 96-96 96z"></path>
</symbol>
</defs>
</svg>
  2. 页面上可如下引用，如：

    <!-- 内嵌在html页面时，href直接填写#id即可 -->
<svg class="icon icon-tag"><use xlink:href="#icon-tag"></use></svg>
<!-- 从单独文件外引时，href需要加上文件路径 -->
<svg class="icon icon-tag"><use xlink:href="img/ico/svgdefs.svg#icon-tag"></use></svg>
  3. 可以svg标签上的class添加样式，如：

    .icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	font-size: 14px;
	color: #828282;
}
  4. 注意ie8及以下是不兼容的，无法显示.

参考链接

  1. icomoon.io
  2. Icon System with SVG Sprites

视网膜1物理像素边框生成器

Border Image:

Normal 1px Border:

Retina Hairline:

CSS Code:

javascript超时处理

在异步操作时，通用需要超时处理，比如在请求数据时，网络异常没返回数据。

代码：

var timeoutHandle = (function(){
	var events = [];
	var id = 0;
	var handle = {
	    success:function(id){
	        var eve = events[id];
	        if(!eve){
	            return;
	        }
	        eve.isSuccess = true;
	        clearTimeout(eve.timer);
	    },
	    timeout:function(id,fn){
	        var eve = events[id];
	        if(!eve){
	            return;
	        }
	        eve.timer = setTimeout(function(){
	        	if(eve.isSuccess){
	        		return;
	        	}
	            if(typeof fn == 'function'){
	                fn.call(this);
	            }
	        },eve.time);
	    }
	};
	return function(fn,time){
		id++;
	    events[id] = {};
	    events[id].time = time||5e3;
	    events[id].isSuccess = false;
	    if(typeof fn == 'function'){
	        fn.call(this,id,handle);
	    }
	};
})();

使用方法：

// 以下为伪代码
timeoutHandle(function(id,handle){
    handle.timeout(id,function(){
        // 超时处理
    });
    jsonp(url,params,function(msg){
        // 数据处理
        handleData(msg);
        // 成功通知
        handle.success(id);
    });
},100);