网页中添加二维码生成功能 - 使用 JavaScript 和 QRCode 库 - 常规

在网页中添加二维码生成功能

本教程将演示如何在网页中添加一个二维码生成功能。用户可以通过输入文本，点击按钮来生成二维码，并以居中方式显示。

1. 添加按钮、文本输入框和二维码容器

首先，我们需要在网页中添加三个关键元素：

生成二维码按钮

<button id='generate-qrcode-btn'>生成二维码</button>

文本输入框

<input type='text' id='qrcode-text-input' placeholder='请输入需要生成二维码的文本'>

二维码容器

<div id='qrcode-container' style='display: flex; justify-content: center; align-items: center;'>
  <img id='qrcode-img' src='' alt='二维码'>
</div>

2. 使用 CSS 实现二维码居中

使用 CSS 的 Flexbox 可以轻松实现二维码容器居中：

#qrcode-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. 使用 JavaScript 生成二维码

以下 JavaScript 代码实现二维码生成、显示和倒计时功能：

function select_city(addressId,provience,city,disctrict,address_line,phone,isdefault,name){
  
    // 获取页面中的元素
    const qrcodeModal = document.getElementById('qrcode-modal');
    const qrcodeImg = document.getElementById('qrcode-img');
    const countdown = document.getElementById('countdown');

// 定义倒计时时间
const countDownTime = 30 * 60 * 1000;
// 定义生成二维码函数
function generateQRCode(text) {
    // 生成二维码图片
    QRCode.toDataURL(text, (err, url) => {
        if (err) {
            console.error(err);
            return;
        }

        // 将二维码图片添加到模态框中
        qrcodeImg.src = url;

        // 显示模态框
        qrcodeModal.style.display = 'block';
        //提取订单号
        var orderSn=text.split('/')[4];

        // 开始倒计时
        startCountDown(orderSn);
    });
}
let timer = null;

function startCountDown(orderSn) {
    let remainingTime = countDownTime;

    // 更新倒计时显示
    countdown.innerText = formatTime(remainingTime);

    // 向服务器查询支付状态
    checkPaymentStatus(orderSn);

    // 开始倒计时
    timer = setInterval(() => {
        remainingTime -= 1000;
        if (remainingTime <= 0) {
            // 倒计时结束，关闭模态框
            clearInterval(timer);
            qrcodeModal.style.display = 'none';
        } else {
            // 更新倒计时显示
            countdown.innerText = formatTime(remainingTime);

            // 向服务器查询支付状态
            checkPaymentStatus(orderSn);
        }
    }, 1000);
}
// 定义格式化时间函数
function formatTime(time) {
    const minutes = Math.floor(time / 60000);
    const seconds = Math.floor((time % 60000) / 1000);
    return `${minutes}:${seconds.toString().padStart(2, '0')}`;
}
// 定义查询支付状态函数
async function checkPaymentStatus(orderSn) {
    const response = await fetch('/qrcode/queryOrderStatus');
    const json = await response.json();
    if (json.status === 'paid') {
        // 支付成功，关闭模态框
        clearInterval(timer);
        qrcodeModal.style.display = 'none';
    }
}

// 调用生成二维码函数
generateQRCode('Hello, world!');

4. 绑定事件监听器

最后，我们需要绑定事件监听器，当用户点击按钮时，获取输入框中的文本并生成二维码：

const generateQrcodeBtn = document.getElementById('generate-qrcode-btn');
const qrcodeTextInput = document.getElementById('qrcode-text-input');

generateQrcodeBtn.addEventListener('click', () => {
    const text = qrcodeTextInput.value;
    generateQRCode(text);
});

总结

通过以上步骤，我们就成功地在网页中添加了一个二维码生成功能。用户可以输入文本，点击按钮生成二维码，并以居中方式显示。

注意：

确保你已经引入了 QRCode 库。
checkPaymentStatus 函数是示例代码，你需要根据自己的实际情况修改。
可以根据需要调整 CSS 样式来改变二维码容器的显示效果。