qrcodeurl.html 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>票务二维码</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  6. <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
  7. <script type="text/javascript" src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
  8. <script type="text/javascript" src="http://static.runoob.com/assets/qrcode/qrcode.min.js"></script>
  9. <script>
  10. //designWidth:设计稿的实际宽度值,需要根据实际设置
  11. //maxWidth:制作稿的最大宽度值,需要根据实际设置
  12. //这段js的最后面有两个参数记得要设置,一个为设计稿实际宽度,一个为制作稿最大宽度,例如设计稿为750,最大宽度为750,则为(750,750)
  13. ;
  14. (function (designWidth, maxWidth) {
  15. var doc = document,
  16. win = window,
  17. docEl = doc.documentElement,
  18. remStyle = document.createElement("style"),
  19. tid;
  20. function refreshRem() {
  21. var width = docEl.getBoundingClientRect().width;
  22. maxWidth = maxWidth || 540;
  23. width > maxWidth && (width = maxWidth);
  24. var rem = width * 100 / designWidth;
  25. remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
  26. }
  27. if (docEl.firstElementChild) {
  28. docEl.firstElementChild.appendChild(remStyle);
  29. } else {
  30. var wrap = doc.createElement("div");
  31. wrap.appendChild(remStyle);
  32. doc.write(wrap.innerHTML);
  33. wrap = null;
  34. }
  35. //要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;
  36. refreshRem();
  37. win.addEventListener("resize", function () {
  38. clearTimeout(tid); //防止执行两次
  39. tid = setTimeout(refreshRem, 300);
  40. }, false);
  41. win.addEventListener("pageshow", function (e) {
  42. if (e.persisted) { // 浏览器后退的时候重新计算
  43. clearTimeout(tid);
  44. tid = setTimeout(refreshRem, 300);
  45. }
  46. }, false);
  47. if (doc.readyState === "complete") {
  48. doc.body.style.fontSize = "16px";
  49. } else {
  50. doc.addEventListener("DOMContentLoaded", function (e) {
  51. doc.body.style.fontSize = "16px";
  52. }, false);
  53. }
  54. })(750, 750);
  55. </script>
  56. <link rel="stylesheet" href="./qrcode/style.css">
  57. </head>
  58. <body>
  59. <div class="qr-wrap">
  60. <div class="title">
  61. <img src="qrcode/logo.png" class="logo">
  62. <span>清鹤景区门票</span>
  63. </div>
  64. <div class="box"><div id="qrcode"></div></div>
  65. <div class="info">
  66. <i class="ico"><img src="./qrcode/ico.png" alt=""></i>
  67. 使用说明:
  68. <ul>
  69. <li>1.入园时直接将此二维码出示在闸机前;</li>
  70. <li>2.可到售票中心兑换纸质门票;</li>
  71. <li>3.请在30天内使用此票,截止至2018年12月31日失效;</li>
  72. <li>4.更多请关注官方微信公众号“清鹤智慧旅游”;</li>
  73. </ul>
  74. </div>
  75. </div>
  76. <script type="text/javascript">
  77. function getUrlParms(name) {
  78. var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  79. var r = window.location.search.substr(1).match(reg);
  80. if (r != null)
  81. return unescape(r[2]);
  82. return null;
  83. }
  84. var qrcodeText = getUrlParms("qrcode");
  85. var qrcode = new QRCode(document.getElementById("qrcode"), {
  86. width: 100,
  87. height: 100
  88. });
  89. qrcode.makeCode(qrcodeText);
  90. </script>
  91. </body>
  92. </html>