JavaScript 生成二维码并弹窗显示，附带倒计时功能
这是一个需要使用第三方库的功能，需要使用'jsQR'和'qrcode.js'库来生成和解析二维码。以下是示例代码：
HTML:
<body>
<button onclick='generateQRCode()'>生成二维码</button>
<div id='qrcode'></div>
<div id='countdown'></div>
</body>
JS:
function generateQRCode() {
var text = 'Hello, World!';
var qrcode = new QRCode(document.getElementById('qrcode'), {
text: text,
width: 256,
height: 256,
colorDark: '#000000',
colorLight: '#ffffff',
correctLevel: QRCode.CorrectLevel.H
});
var countdown = document.getElementById('countdown');
var remainingTime = 30 * 60; // 30 minutes in seconds
var timer = setInterval(function() {
var minutes = Math.floor(remainingTime / 60);
var seconds = remainingTime % 60;
countdown.innerHTML = '剩余时间: ' + minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
remainingTime--;
if (remainingTime < 0) {
clearInterval(timer);
countdown.innerHTML = '时间到!';
}
}, 1000);
var modal = document.createElement('div');
modal.style.position = 'fixed';
modal.style.top = '0';
modal.style.left = '0';
modal.style.width = '100%';
modal.style.height = '100%';
modal.style.backgroundColor = 'rgba(0,0,0,0.5)';
modal.style.display = 'flex';
modal.style.alignItems = 'center';
modal.style.justifyContent = 'center';
var img = document.createElement('img');
img.src = qrcode.toDataURL();
modal.appendChild(img);
document.body.appendChild(modal);
}
原文地址: https://www.cveoy.top/t/topic/oghx 著作权归作者所有。请勿转载和采集!