https://github.com/onlinemad/5000-lottery
- Zero dependency 只有用 HTML, CSS, JavaScript
- No tracking code 連 Google Analytics 都不裝
- 支援多組身分證字號（請使用 , 分隔多組身分證字號）
- 用 localStorage 儲存身分證字號，下次就不用再輸入
- 一鍵碼掉身分證字號，快速分享
🤣 - Mobile friendly
- 極度最小化 2.4K
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>振興五倍加碼券速查</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> | |
| <meta property="og:image" content="https://onlinemad.github.io/5000-lottery/cover.webp" /> | |
| <style type="text/css"> | |
| body { | |
| width: 25%; | |
| margin: auto; | |
| } | |
| button { | |
| width: 100%; | |
| height: 25pt; | |
| } | |
| .main { | |
| text-align: center; | |
| } | |
| .main textarea { | |
| width: 95%; | |
| font-size: 20pt; | |
| } | |
| .result-title { | |
| text-align: center; | |
| } | |
| .footer { | |
| color: dimgrey; | |
| text-align: center; | |
| margin: 20pt auto; | |
| } | |
| #result { | |
| margin-bottom: 20pt; | |
| } | |
| @media only screen and (max-device-width : 375px) { | |
| body { | |
| width: 95%; | |
| } | |
| } | |
| @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { | |
| body { | |
| width: 75%; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body onload="loadUid()"> | |
| <div class="main"> | |
| <h1>振興五倍加碼券速查</h1> | |
| <div> | |
| <textarea id="uid" rows="5" placeholder="請輸入身分證字號（至少輸入末三碼），用 , 分開多筆"></textarea> | |
| </div> | |
| <div> | |
| <button onclick="query()">查詢</button> | |
| </div> | |
| </div> | |
| <div> | |
| <h2 class="result-title">查詢結果</h2> | |
| <div id="result"> | |
| </div> | |
| <div id="mask" style="display: none;"> | |
| <button onclick="mask()">碼掉身分證字號 for 截圖分享</button> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <small>無廣告、無追蹤碼<br/>網站以<a href="https://github.com/onlinemad/5000-lottery" target="_blank">開放原始碼方式釋出</a></small> | |
| </div> | |
| </body> | |
| <script> | |
| let coupons = [{ | |
| name: '國旅券', | |
| codes: ['21', '32', '98', '67', '97', '410'] | |
| }, { | |
| name: 'i原券', | |
| codes: ['64', '85'] | |
| }, { | |
| name: '農遊券', | |
| codes: ['89', '32', '54', '597', '453', '152'] | |
| }, { | |
| name: '藝fun券(數位)', | |
| codes: ['96', '15', '07', '30', '73', '98', '19', '11'] | |
| }, { | |
| name: '藝fun券(紙本)', | |
| codes: ['39', '37', '23', '36', '79', '08', '14', '75'] | |
| }, { | |
| name: '動滋券', | |
| codes: ['97', '13', '19', '55', '71', '93', '381', '734', '644', '453', '985'] | |
| }, { | |
| name: '客庄劵2.0', | |
| codes: ['81', '900'] | |
| }, { | |
| name: '地方創生券', | |
| codes: ['081','105','594','188','089','396','521','467','912','798','358','441','367','941','335'] | |
| }] | |
| let rs = [] | |
| let search = (ids, coupons) => { | |
| let rs = [] | |
| ids.map((id) => { | |
| let winning = [] | |
| coupons.map((coupon) => { | |
| coupon.codes.map((code) => { | |
| if (id.slice(-code.length) === code) { | |
| winning.push(`${coupon.name}[${code}]`) | |
| } | |
| }) | |
| }) | |
| rs.push({ | |
| id: id, | |
| winning: winning | |
| }) | |
| }) | |
| return rs | |
| } | |
| function loadUid() { | |
| let uid = localStorage.getItem('uid') | |
| document.getElementById('uid').value = uid | |
| } | |
| function render(rs) { | |
| let result = document.getElementById('result') | |
| result.innerHTML = '' | |
| rs.map((r) => { | |
| let h3 = document.createElement('h3') | |
| h3.appendChild(document.createTextNode(r.id)) | |
| result.appendChild(h3) | |
| let span = document.createElement('span') | |
| let winning = r.winning.length > 0 ? `中：${r.winning.join(', ')}` : '都沒中' | |
| span.appendChild(document.createTextNode(winning)) | |
| result.appendChild(span) | |
| }) | |
| let mask = document.getElementById('mask') | |
| mask.style.display = null; | |
| } | |
| function query() { | |
| let ele = document.getElementById('uid') | |
| ele.style.display = null | |
| let uids = ele.value.split(',') | |
| uids = uids.map((uid) => uid.trim()) | |
| localStorage.setItem('uid', uids.toString()) | |
| rs = search(uids, coupons) | |
| render(rs) | |
| } | |
| function mask() { | |
| let uid = document.getElementById('uid') | |
| uid.style.display = 'none' | |
| render(rs.map((r) => { | |
| r.id = r.id.replace(/[a-z\d]/gi, '*') | |
| return r | |
| })) | |
| } | |
| </script> | |
| </html> |
