百度雲盤 傳送門 密碼:304e
輸入網址點選按鈕生成二維碼，預設為我的部落格首頁
二維碼格式示範
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>qrcode.js插件将你的内容轉換成二維碼格式</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="lanren">
<h1>Gary_請在下面輸入框中輸入内容</h1>
<input type="text" placeholder="請在這裡輸入内容" id="demo">
<button id="send">點選生成二維碼</button>
<br></br><br></br>
<div id="qrcode"></div>
</div>
<p></p>
<script src="js/qrcode.min.js"></script>
<script>
window.onload =function(){
(function(){
var defaultContent = 'http://www.cnblogs.com/1138720556Gary/';
var content = document.getElementById("qrcode");
var qrcode = new QRCode(content,{
width:200,
height:200
});
document.getElementById("send").onclick =function(){
var value = document.getElementById("demo").value || defaultContent;
qrcode.makeCode(value);
content.style.display = "block";
}
})();
}
</script>
</body>
</html> index.html
實作過程：
設定二維碼的長寬
var qrcode = new QRCode(content,{
width:200,
height:200
}); 把輸入網址或者預設網址傳給二維碼
document.getElementById("send").onclick =function(){
var value = document.getElementById("demo").value || defaultContent;
qrcode.makeCode(value);
content.style.display = "block";
} 頁面内容加載完成之後立即執行window.onload加載事件相應的函數
<script src="js/qrcode.min.js"></script>
<script>
window.onload =function(){
(function(){
var defaultContent = 'http://www.cnblogs.com/1138720556Gary/';
var content = document.getElementById("qrcode");
var qrcode = new QRCode(content,{
width:200,
height:200
});
document.getElementById("send").onclick =function(){
var value = document.getElementById("demo").value || defaultContent;
qrcode.makeCode(value);
content.style.display = "block";
}
})();
}
</script> 将Js事件綁定到按鈕
<div class="lanren">
<h1>Gary_請在下面輸入框中輸入内容</h1>
<input type="text" placeholder="請在這裡輸入内容" id="demo">
<button id="send">點選生成二維碼</button>
<br></br><br></br>
<div id="qrcode"></div>
</div> 轉載于:https://www.cnblogs.com/1138720556Gary/p/9383358.html
![自定義時間選擇器-前端元件預覽效果[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)