一个使用JavaScript和HTML实现点击付款方式选择扫码付款弹出付款二维码图片的示例代码 - 小武站
管理员 系统 关注 创始人 10级
发表于NEW版块

一个使用JavaScript和HTML实现点击付款方式选择扫码付款弹出付款二维码图片的示例代码

以下是一个使用JavaScript和HTML实现点击付款方式选择扫码付款弹出付款二维码图片的示例代码:


```html

<!DOCTYPE html>

<html>

<head>

 <title>扫码付款</title>

 <style type="text/css">

  #pay-modal {

   display: none;

   position: fixed;

   z-index: 1;

   left: 0;

   top: 0;

   width: 100%;

   height: 100%;

   overflow: auto;

   background-color: rgba(0,0,0,0.4);

  }

  #pay-modal-content {

   background-color: #fefefe;

   margin: 15% auto;

   padding: 20px;

   border: 1px solid #888;

   width: 80%;

    max-width: 600px;

  }

 </style>

</head>

<body>

 <button onclick="showPayModal()">点击付款</button>

 <div id="pay-modal" class="hide">

  <div id="pay-modal-content">

   <h2>请选择支付方式</h2>

   <button onclick="showQRCode()">扫码付款</button>

   <img id="qrcode" src="" alt="付款二维码">

  </div>

 </div>

 <script type="text/javascript">

  function showPayModal() {

   var modal = document.getElementById("pay-modal");

   modal.style.display = "block";

  };


  function showQRCode() {

      var qrcodeUrl = 'https://api.example.com/qrcode?amount=10&currency=CNY'; // 这里需要替换成实际的二维码生成接口地址和参数

      var qrcode = document.getElementById("qrcode");

      qrcode.src = qrcodeUrl;

      qrcode.alt = "付款二维码";

      qrcode.style.display = "block";

      qrcode.className = "show"; // 让二维码有动画效果,显示出来后添加类名“show”

      var timer = setInterval(function() { qrcode.className = "hide"; clearInterval(timer); }, (Math.random() * 3000) + 1000); // 让二维码有动画效果,随机隐藏时间在1秒到4秒之间

  };

 </script>

</body>

</html>

```


将上述代码保存为一个HTML文件,然后在浏览器中打开即可看到一个简单的点击付款方式选择扫码付款弹出付款二维码图片的页面。你可以根据需要修改样式、二维码链接等。需要注意的是,这里使用的二维码链接是示例链接,实际应用中需要替换成真实的二维码生成接口地址和参数。

福建,厦门,集美区

已有0次打赏
(0) 分享
分享

请保存二维码或复制链接进行分享

取消