-
先说明：最近公司给后台做的一个条形码和二维码的页面，在安卓手机上使用本地的话，是可以打开页面并显示的，但是在iOS上使用本地解压后，页面不显示条形码和二维码，但是在服务器上的话，是可以在iOS上显示的，我们可以使用xampp进行调试，下面直接上代码，引入的js文件需要自己下载
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>二维码链接</title>
<script src="./jquery-2.2.3.min.js"></script>
<script src="./JsBarcode.all.min.js"></script>
<script src="./qrcode.min.js"></script>
<style>
body,div,img,P{
margin: 0;
padding: 0;
}
.box{
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
appearance: none;
}
.img1{
width: 4rem;
height: 4rem;
margin-top: 1rem;
margin-bottom: 0.2rem;
}
#canvascode{
width:5.16rem;
height:1.3rem;
margin-bottom:0.4rem;
}
.qrcode{
width: 3.16rem !important;
height:3.16rem !important;
}
.qrcode canvas{
width: 100%;
height: 100%;
}
.qrcode img{
width: 3.16rem !important;
height:3.16rem !important;
}
.pin{
font-size: .1rem;这是密码的字体小的话，可以进行修改
font-weight: bold;
text-align: right;
margin-top: .2rem;
margin-left: 3.8rem;
}
#card{
font-size: .1rem;
margin-bottom:0.4rem ;
font-weight: bold;
margin-top: -.1rem;
}
</style>
</head>
<body>
<div class="box">
这是头部的一个图片，成功图片
<img class="img1" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1594974918&di=bc89ac7a989e861aa8b6b1c2e29fef00&src=http://bpic.588ku.com/back_pic/00/09/47/77562eea631a31c.jpg" alt="">
这是生成条形码，使用图片的格式
<img id="canvascode"></img>
这是条形码下显示的字体，要是条形码本身显示的字体有点模糊，可以单独的在加一个，将下面的js中显示字体改为false就可以了，要是不在乎字体的话，可以讲这个p标签注释掉
<p id="card"></p>
这是生成二维码，使用图片的格式
<div id="qrcode" class="qrcode"></div>
这是密码
<p class="pin">PIN：355692</p>
</div>
</body>
</html>
<script type="text/javascript">
// 移动端自适应rem布局
(function () {
var resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';
var rescale = function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
}
rescale();
window.addEventListener(resizeEvent,rescale,false);
document.addEventListener('DOMContentLoaded',rescale,false);
})();
// try{
// 一维码（条形码）,前台扫描一维码的时候，不会出现数据，在后台的时候，设置后就可以了
$(window).load(function(){
var card="12300000000000000000"；
$("#card").text(card);
JsBarcode("#canvascode", card, {
format: "CODE39",//选择要使用的条形码类型
width:1,//设置条之间的宽度
height:100,//高度
displayValue:true,//是否在条形码下方显示文字
text:card,//覆盖显示的文本
// fontOptions:"bold italic",//使文字加粗体或变斜体
// font:"fantasy",//设置文本的字体
textAlign:"center",//设置文本的水平对齐方式
textPosition:"bottom",//设置文本的垂直位置
textMargin:5,//设置条形码和文本之间的间距
fontSize:30,//设置文本的大小，有的手机显示有间隔，可以将字体大小修改小一点
// background:"#eee",//设置条形码的背景
// lineColor:"#2196f3",//设置条和文本的颜色。
// margin:10//设置条形码周围的空白边距
});
//直接生成二维码
new QRCode(document.getElementById("qrcode"),"http://www.runoob.com "); // 设置要生成二维码的链接
要想将二维码中的链接改变成卡号或者是数字，将他转化成字符串
//let a='111';//字符串数字
//let b='http://www.baidu.com'
// new QRCode(document.getElementById("qrcode"),a);
//new QRCode(document.getElementById("qrcode"),b);
})
// }catch(e){
// console.log(e);
// throw e;
// }
</script>
网友评论