当前位置: 无忧屋首页 > 文章中心 > 前端 >

聚合支付JS判断微信 支付宝 QQ代码示例

来源:网络

发布人:天道酬勤

发布时间:2024-02-14

  1. <!doctype html>   
  2. <html lang="en">   
  3. <head>   
  4. <meta charset="UTF-8">   
  5. <meta name="viewport"   
  6. content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">   
  7. <meta http-equiv="X-UA-Compatible" content="ie=edge">   
  8. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"   
  9. integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">   
  10. <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>   
  11. <script type="text/javascript" src="jquery.qrcode.min.js"></script>   
  12. <style>   
  13. body {   
  14. background-color: #eee;   
  15. margin: 0;   
  16. padding: 0;   
  17. }   
  18. .header {   
  19. position: relative;   
  20. height: 42px;   
  21. line-height: 42px;   
  22. padding: 0 15px;   
  23. border-bottom: 1px solid #f6f6f6;   
  24. background-color: #1E9FFF;   
  25. color: #fff;   
  26. border-radius: 2px 2px 0 0;   
  27. font-size: 14px;   
  28. }   
  29. .body {   
  30. position: relative;   
  31. padding: 10px 15px;   
  32. line-height: 24px;   
  33. background-color: #fff;   
  34. }   
  35. .card {   
  36. margin: 20% auto;   
  37. }   
  38. </style>   
  39. <title>三合一聚合扫码支付 自动识别 微信 支付宝 QQ</title>   
  40. </head>   
  41. <body>   
  42. <div class="container">   
  43. <div class="row">   
  44. <div class="col-md-4">   
  45. </div>   
  46. <div class="col-md-4 text-center">   
  47. <div class="card">   
  48. <div class="header">三合一聚合扫码支付</div>   
  49. <div class="body">   
  50. <div id="wan_Neng" ></div>   
  51. </div>   
  52. </div>   
  53. </div>   
  54. <div class="col-md-4">   
  55. </div>   
  56. </div>   
  57. </div>   
  58. <div id="code"></div>   
  59. </body>   
  60. </html>   
  61. <script>   
  62. $(function () {   
  63. var Ma = {   
  64. qq: "",   
  65. zfb: "",   
  66. wx: "",   
  67. testma: ""   
  68. }   
  69. if(navigator.userAgent.match(/Alipay/i)) {   
  70. // 支付宝   
  71. window.location.href=Ma.zfb   
  72. } else if(navigator.userAgent.match(/MicroMessenger//i)) {   
  73. // 微信   
  74. $('#wan_Neng').qrcode(Ma.wx)   
  75. $(".header").html("请使用微信扫码支付")   
  76. } else if(navigator.userAgent.match(/QQ//i)) {   
  77. // QQ   
  78. $('#wan_Neng').qrcode(Ma.qq)   
  79. $(".header").html("请使用QQ扫码支付")   
  80. } else {   
  81. // 其它   
  82. $url = window.location.href   
  83. // $("#wan_Neng").attr("src", Ma.testma +$url)   
  84. $('#wan_Neng').html("请使用微信QQ支付宝打开支付")   
  85. }   
  86. //获取网页中的canvas对象   
  87. var mycans=$('canvas')[0];   
  88. var img=img_can(mycans);   
  89. $('#wan_Neng').append(img);   
  90. $('canvas')[0].remove()   
  91. })   
  92. //禁用右击   
  93. document.oncontextmenu = function () {   
  94. return false;   
  95. }   
  96. //禁用f12   
  97. document.onkeydown = function () {   
  98. if (window.event &amp;&amp; window.event.keyCode == 123) {   
  99. window.event.returnValue = false;   
  100. }   
  101. }   
  102. /*****************************************   
  103. * 画布转img   
  104. * 输入参数:画布对象   
  105. * 输出参数:img   
  106. ****************************************/   
  107. function img_can(canvas) {   
  108. var image = new Image();   
  109. image.src = canvas.toDataURL("image/png");   
  110. return image;   
  111. }   
  112. </script>

免责声明:文中图文均系网友发布,转载来自网络,如有侵权请联系右侧客服QQ删除,无忧屋网友发布此文仅为传递信息,不代表无忧屋平台认同其观点。