Richard`s 防忘記 Blog: Zero dependency 只有用 HTML, CSS, JavaScript & localStorage 儲存

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>

Richard`s 防忘記 Blog

2021年10月15日星期五

Zero dependency 只有用 HTML, CSS, JavaScript & localStorage 儲存

沒有留言:

2021年10月15日 星期五

Zero dependency 只有用 HTML, CSS, JavaScript & localStorage 儲存

沒有留言:

2021年10月15日星期五