插件qrcode和ityped

1.qrcode二维码插件（依赖于jQuery）

github下载地址：https://github.com/jeromeetienne/jquery-qrcode
或npm下载

（1）引入
CDN方式

 <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script> 
<script type="text/javascript" src="http://cdn.staticfile.org/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>

本地js文件引

<script src="js/qrcode.js"></script>
<script src="./js/jquery.qrcode.js"></script>

（2）使用
在页面中设置一个用于放置二维码的容器

<div id=”output”></div>

使用qrcode生成二维码

$("#output").qrcode({
						 text     : "http://jetienne.com",  //设置二维码内容   
						 
						 render   : "table",//设置渲染方式 （有两种方式 table和canvas，默认是canvas）  
						 
						 width       : 256,     //设置宽度   
						 
						 height      : 256,     //设置高度   
						 
						 typeNumber  : -1,      //计算模式   
						 
						 correctLevel    : 2,//纠错等级       0-3  7% 15% 25% 30% 纠错等级越高，越容易被扫描
						 
						 background      : "black",//背景颜色   
						 
						 foreground      : "#fff" //前景颜色 
	})

支持中文

			 function toUtf8(str) {
			 	var out,//输出
			 	 	i,//字符索引
			 	  	len,//长度
			 	   	c;//charCodeAt 编码后的字符
			 	out = "";
			 	len = str.length;
			 	for(i = 0; i < len; i++) {
			 		c = str.charCodeAt(i);
			 		if((c >= 0x0001) && (c <= 0x007F)) {
			 			out += str.charAt(i);
			 		} else if(c > 0x07FF) {
			 			out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
			 			out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
			 			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			 		} else {
			 			out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
			 			out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			 		}
			 	}
			 	return out;
			 }

2.iTyped动态打字效果(无需任何依赖)

github下载地址：https://github.com/luisvinicius167/ityped/commit/b11084c63429a691ed1a7562bf47bcf2246220c2

(1)引入：

<script src="./js/index.min.js"></script>

(2)使用：
光标闪烁：

	.ityped-cursor {
	    font-size: 2.2rem;
	    opacity: 1;
	    animation: blink 0.3s infinite;
	    animation-direction: alternate;
	  }
	
	  @keyframes blink {
	    100% {
	      opacity: 0;
	    }
	  }

初始化：

	<div id="app">
		<span id="ityped"></span>
	</div>
	
<script>
	ityped.init("#ityped", {
		showCursor: true,
		strings: ['Very nice project!', 'Yeah!', 'Shure, awesome!'],
		cursorChar:'||'
	})
</script>

其他参数说明：
Ityped.init("#element", {

	    /**
	     * @param {Array} strings An array with the strings that will be animated 
	     */
	     strings: ['Put your strings here...', 'and Enjoy!']
	    
	    /**
	     * @param {Number} typeSpeed Type speed in milliseconds
	     */
	     typeSpeed:  100,
	   
	    /**
	     * @param {Number} backSpeed Type back speed in milliseconds
	     */
	     backSpeed:  50,
	    
	    /**
	     * @param {Number} startDelay Time before typing starts
	     */
	     startDelay: 500,
	    
	    /**
	     * @param {Number} backDelay Time before backspacing
	     */
	     backDelay:  500,
	    
	    /**
	     * @param {Boolean} loop The animation loop
	     */
	     loop:       false,
	    
	    /**
	     * @param {Boolean} showCursor Show the cursor element
	     */
	     showCursor: true,
	    
	    /**
	     * @param {Boolean} placeholder Write the string in the placeholder content
	     */
	     placeholder: false,
	    
	    /**
	     * @param {Boolean} disableBackTyping Disable back typing for the last string sentence 
	     */
	     disableBackTyping: false,
	    
	    /**
	     * @property {String} cursorChar character for cursor
	     */
	     cursorChar: "|",
	    
	    
	    // optional: The callback called (if `loop` is false) 
	    // once the last string was typed
	    /**
	     * @property {Function} onFinished The callback called , if `loop` is false,
	     * once the last string was typed
	     */
	    onFinished: function(){},
	  }