使用qrcode.js生成随机二维码OnClick使用qrcode.js
我正在使用生成qrcode。我想每次点击添加新选项卡而不是添加新的QR码时生成随机QR码。我创建了一个随机数的代码,但是当我尝试添加onclick函数时,它添加了新的不随机数。使用qrcode.js生成随机二维码OnClick使用qrcode.js
的jsfiddle:https://jsfiddle.net/aice09/L8pp9336/
Github上:https://github.com/Ailyn09/project102/blob/master/qrcode.html
CODEPEN:https://codepen.io/aice09/pen/Ogqajr
$('#lithird').click(function() {
var qrcode = new QRCode("qrcode");
function makeCode() {
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
var value = randomNumber(13);
var elText = value;
qrcode.makeCode(elText);
}
makeCode();
});
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="lifirst" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">List</a></li>
<li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
</ul>
<!--/ Nav tabs /-->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="margin-top: 10px;">
IN THE NEXT TABA THE AR CODE
</div>
<div role="tabpanel" class="tab-pane" id="editable">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div id="qrcode"></div>
</div>=
</div>
</div>
</div>
尝试增加$('#qrcode').html('');
作为.click(function(){}
像这样的第一个项目:
$('#lithird').click(function(){
$('#qrcode').html(''); // <---Add this, which should clear it out on the next click
var qrcode = new QRCode("qrcode");
function makeCode() {
function randomNumber(len) {
var randomNumber;
var n = '';
for(var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
var value = randomNumber(13);
var elText = value;
qrcode.makeCode(elText);
}
makeCode();
});
你失踪在onclick
定义的函数transfer_new
这是造成JavaScript错误。
function transfer_new() {
$('#qrcode').html('');
}
$('#lithird').click(function() {
var qrcode = new QRCode("qrcode");
function makeCode() {
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
var value = randomNumber(13);
var elText = value;
qrcode.makeCode(elText);
}
makeCode();
});
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
#qrcode img {
margin: 15px;
border: 5px solid black;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="lifirst" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">List</a></li>
<li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" onclick='transfer_new()'>Add New</a></li>
</ul>
<!--/ Nav tabs /-->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="margin-top: 10px;">
IN THE NEXT TABA THE AR CODE
</div>
<div role="tabpanel" class="tab-pane" id="editable">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div id="qrcode"></div>
</div>=
</div>
</div>
</div>
谢谢工作正常。 – Ailyn
产生新的
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
$('#lithird').click(function() {
var value = randomNumber(13);
$("#qrcode").html("");
var qrcode = new QRCode("qrcode");
qrcode.makeCode(value);
});
#qrcode {
width:160px;
height:160px;
margin-top:15px;
}
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" id="main">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="lifirst" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">List</a></li>
<li role="presentation" id="lithird"><a href="#editable" aria-controls="editable" role="tab" data-toggle="tab" >Add New</a></li>
</ul>
<!--/ Nav tabs /-->
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home" style="margin-top: 10px;">
IN THE NEXT TABA THE AR CODE
</div>
<div role="tabpanel" class="tab-pane" id="editable">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
<div id="qrcode"></div>
</div>
</div>
</div>
</div>
谢谢工作正常! – Ailyn
不客气。 –
$(".generatetext").click(function(e) {
e.preventDefault();
var x = randomNumber(13);
$('#output').html('').qrcode(x);
});
function randomNumber(len) {
var randomNumber;
var n = '';
for (var count = 0; count < len; count++) {
randomNumber = Math.floor(Math.random() * 10);
n += randomNumber.toString();
}
return n;
}
#output{border:1px solid #eee;min-height:200px;width:200px;}
.container{padding:10px;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<div class="container">
<form class="form-inline">
<div class="form-group">
<button class="btn btn-primary generatetext">Generate Random QR Code</button>
</div>
</form>
<div class="container">
<div id="output" class="text-center"></div>
</div>
</div>
谢谢它也可以。 – Ailyn
请为我的答案投票。 非常感谢 –
谢谢工作正常 – Ailyn