zoukankan      html  css  js  c++  java
  • js生成二维码

    <!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    		<title>生成二维码</title>
    		<link rel="stylesheet" href="css/reset.css" />
    		<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    		<script type="text/javascript" src="https://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    	</head>
    	<style type="text/css">
    		.qr-card {
    			min-height: 500px;
    			min- 320px;
    			max-height: 600px;
    			max- 375px;
    		}
    		
    		.qr-card-con {
    			padding: 0 10%;
    		}
    		
    		.qr-card-con input[type='text'] {
    			height: 35px;
    			border: 1px solid #DDDDDD;
    			 calc(100% - 20px);
    			border-radius: 3px;
    			padding: 0 10px;
    			margin-top: 50px;
    			background: #fff;
    		}
    		
    		.qr-card-con input[type='button'] {
    			height: 35px;
    			border: none;
    			 100%;
    			margin-top: 20px;
    			text-align: center;
    			color: #fff;
    			border-radius: 3px;
    			background: #eb414a;
    		}
    		
    		.qr-card-img {
    			margin-top: 50px;
    			 250px;
    			margin: calc((100% - 250px)/2);
    			text-align: center;
    		}
    		
    		#qrCardImgCon {
    			 100%;
    			height: 250px;
    			margin-bottom: 10px;
    		}
    		
    		#gohack {
    			margin-top: 60px;
    			text-align: center;
    			color: #999;
    		}
    		
    		.qr-card-img {
    			display: none;
    		}
    	</style>
    
    	<body>
    		<div class="qr-card">
    			 
    			<div class="qr-card-con">
    				<input id="qrText" type="text" placeholder="请输入数字券码" />
    				<input id="qrBtn" type="button" value="生成二维码" />
    			</div>
    			<div class="qr-card-img">
    				<div id="qrCardImgCon"></div>
    				<p id="qrCardImgText"></p>
    				<div id="gohack">返回</div>
    			</div>
    
    		</div>
    		<script>
    			var cardCon = document.getElementsByClassName("qr-card-con")[0];
    			var cardImg = document.getElementsByClassName("qr-card-img")[0];
    			var qrBtn = document.getElementById("qrBtn");
    			var gohack = document.getElementById("gohack");
    			var elText = document.getElementById("qrText");
    			var qrCardImgText = document.getElementById("qrCardImgText");
    
    			var qrcode = new QRCode(document.getElementById("qrCardImgCon"), {
    				 250,
    				height: 250
    			});
    
    			function makeCode() { 
    				if(elText.value != '') {
    					qrCardImgText.innerHTML = elText.value;
    					qrcode.makeCode(elText.value);
    					cardCon.style.display = 'none';
    					cardImg.style.display = 'block';
    				} else {
    					alert('输入框不能为空');
    					return false
    				}
    			}
    
    			qrBtn.onclick = function() {
    				makeCode();
    			}
    			gohack.onclick = function() {
    				cardCon.style.display = 'block';
    				cardImg.style.display = 'none';
    				elText.value = '';
    			}
    		</script>
    	</body>
    
    </html>
    

      

  • 相关阅读:
    洛谷P1441 砝码称重(搜索,dfs+bitset优化)
    洛谷P1441 砝码称重(搜索,dfs+dp)
    洛谷P1242 新汉诺塔(dfs,模拟退火)
    洛谷P1415 拆分数列(dp)
    openstack-往已有集群中添加控制节点,实现控制节点的高可用
    第九步:使用nfs作为cinder-controller后端存储
    第八步:安装openstack-dashboard
    第七步(2):安装openstack-cinder服务-控制节点
    第七步(1):安装openstack-cinder服务-存储节点
    第六步:创建实例进行测试
  • 原文地址:https://www.cnblogs.com/yjgbk/p/9237783.html
Copyright © 2011-2022 走看看