js 二维码操作加上图标

最新推荐文章于 2023-09-21 17:30:11 发布

原创最新推荐文章于 2023-09-21 17:30:11 发布 · 970 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js 二维码加上图标

js 专栏收录该内容

31 篇文章

订阅专栏

//在这上面有可以生成两个二维码，具体可以自己看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>紫光云计算</title>
		<script src="src/jquery-2.1.1.js" type="text/javascript">
</script>
		<script src="src/qrcode.js" type="text/javascript">
</script>
		<script src="src/jquery.qrcode.js" type="text/javascript">
</script>
		<style type="text/css">
/**二维码**/
html {
	background-attachment: fixed;
}

/*解决IE6下滚动抖动的问题*/ /*解决IE6下不兼容 position:fixed 的问题*/
#code_img {
	width: 208px;
	height: 208px;
	background: #ccc;
	position: fixed;
	right: 565px;
	bottom: 200px;
}

#div_div {
	width: 208px;
	height: 208px;
	background: #ccc;
	position: fixed;
	left: 200px;
	bottom: 200px;
}

#qrcode,#qrcodef {
	margin: 4px;
}

#qrcodef {
	margin: 4px;
}

#codeico {
	position: fixed;
	margin: 75px;
	width: 48px;
	height: 48px;
	background: url(img/delete.png) no-repeat;
}

#codeicof {
	position: fixed;
	margin: 75px;
	width: 48px;
	height: 48px;
	background: url(img/cross.png) no-repeat;
}
</style>
		<script type="text/javascript">
$(document).ready(function(e) {
	$("#codeico").hide();
	$("#codeicof").hide();

});
$(function() {
	$("#bt").bind("click", function() {
		text = $("#text").val();
		$("#qrcodef").empty();
		$("#qrcodef").append("<div id='codeicof'></div>");
		$("#qrcode").empty();
		$("#qrcode").append("<div id='codeico'></div>");
		jQuery("#qrcodef").qrcode( {
			render : "table",
			width : 200,
			height : 200,
			text : utf16to8(text)
		});
		//二维码显示
			jQuery('#qrcode').qrcode( {
				render : "table", //这里通过表格显示二维码 兼容低版本ie
				width : 200,
				height : 200,
				text : "youurl"
			});
			$("#codeico").show();
			$("#codeicof").show();
		});
})
function utf16to8(str) { //转码 
	var out, i, len, c;
	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;
}
</script>
	</head>
	<body>
		<input type="text" id="text" />
		<input type="button" value="生成二维码" id="bt" />
		<div id="div_div">
			<div id="qrcodef">
				<div id="codeicof"></div>
			</div>
		</div>
		<div id="code_img">
			<div id="qrcode">
				<div id="codeico"></div>
			</div>
		</div>

	</body>
</html>

<img border="3" hspace="12" vspace="12" src="https://img-blog.youkuaiyun.com/20141023162245754?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMjI1MTQyMQ==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" width="240" height="120" alt="" />