jQuery输入网址生成二维码代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery输入网址生成二维码代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery输入网址生成二维码代码 </title>
</head>
<body>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.qrcode.js"></script> 
<script type="text/javascript" src="js/qrcode.js"></script> 
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
a:hover{text-decoration:underline;}
body{font:12px/180% Arial, Helvetica, sans-serif , "新宋体";}

.demo{width:200px;margin:40px auto;}
.demo h2{font-size:18px;height:50px;text-align:center;}
.demo input{width:198px;outline:medium;border:1px solid #336699;}
.demo a{width:200px;height:24px;line-height:24px;text-align:center;letter-spacing:4px;background:#336699;color:#fff;font-weight:bold;display:block;margin:5px 0;}
</style>

<div class="demo">
    <input type="text" id="url" value="www.baidu.com"/>
	<a href="javascript:void();" onclick="creat();">生成</a>
	<h2>拿手机扫一扫</h2> 
	<div id="qrcodeTable"></div> 
</div>

<script type="text/javascript">
   function creat(){
      $("#qrcodeTable").html("");
       var url=$("#url").val();

	   $("#qrcodeTable").qrcode({
		render	: "table",
		text	: url,
		width:"200",
		height:"200"
	});
	
   }

$(document).ready(function(){

	$("#qrcodeTable").qrcode({
		render	: "table",
		text	: "www.baidu.com",
		width:"200",
		height:"200"
	});	
	
});
</script>
</body>
</html>

JS代码(jquery.qrcode.js):

(function( $ ){
	$.fn.qrcode = function(options){
	// if options is string,if( typeof options === 'string' ){
	options={
	text:options}
;
}
// set default values// typeNumber < 1 for automatic calculationoptions= $.extend({
}
,{
	render:"canvas",width:256,height:256,typeNumber:-1,correctLevel:QRErrorCorrectLevel.H,background:"#ffffff",foreground:"#000000"}
,options);
	var createCanvas= function(){
	// create the qrcode itselfvar qrcode= new QRCode(options.typeNumber,options.correctLevel);
	qrcode.addData(options.text);
	qrcode.make();
	// create canvas elementvar canvas= document.createElement('canvas');
	canvas.width= options.width;
	canvas.height= options.height;
	var ctx= canvas.getContext('2d');
	// compute tileW/tileH based on options.width/options.heightvar tileW= options.width / qrcode.getModuleCount();
	var tileH= options.height / qrcode.getModuleCount();
	// draw in the canvasfor( var row = 0;
	row < qrcode.getModuleCount();
	row++ ){
	for( var col = 0;
	col < qrcode.getModuleCount();
	col++ ){
	ctx.fillStyle = qrcode.isDark(row,col) ? options.foreground:options.background;
	var w = (Math.ceil((col+1)*tileW) - Math.floor(col*tileW));
	var h = (Math.ceil((row+1)*tileW) - Math.floor(row*tileW));
	ctx.fillRect(Math.round(col*tileW),Math.round(row*tileH),w,h);
}
}
// return just built canvasreturn canvas;
}
// from Jon-Carlos Rivera (https://github.com/imbcmdth)var createTable= function(){
	// create the qrcode itselfvar qrcode= new QRCode(options.typeNumber,options.correctLevel);
	qrcode.addData(options.text);
	qrcode.make();
	// create table elementvar $table= $('<table></table>').css("width",options.width+"px").css("height",options.height+"px").css("border","0px").css("border-collapse","collapse").css('background-color',options.background);
	// compute tileS percentagevar tileW= options.width / qrcode.getModuleCount();
	var tileH= options.height / qrcode.getModuleCount();
	// draw in the tablefor(var row = 0;
	row < qrcode.getModuleCount();
	row++ ){
	var $row = $('<tr></tr>').css('height',tileH+"px").appendTo($table);
	for(var col = 0;
	col < qrcode.getModuleCount();
	col++ ){
	$('<td></td>').css('width',tileW+"px").css('background-color',qrcode.isDark(row,col) ? options.foreground:options.background).appendTo($row);
}
}
// return just built canvasreturn $table;
}
return this.each(function(){
	var element= options.render == "canvas" ? createCanvas():createTable();
	jQuery(element).appendTo(this);
}
);
}
;
}
)( jQuery );

附件:下载该文件资源,减少时间成本(增值服务)