python/Day21-30/code/new/web1901/js_practice_3.html

88 lines
2.1 KiB
HTML
Raw Normal View History

2024-12-04 00:04:56 +08:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>成都机动车限行查询</title>
<style>
#search {
width: 640px;
margin: 0 auto;
text-align: center;
margin-top: 150px;
}
#carno {
display: inline-block;
width: 460px;
height: 36px;
font: 36px/36px arial;
text-align: center;
vertical-align: middle;
border: none;
outline: none;
border-bottom: 1px dotted darkgray;
}
#search input[type=button] {
width: 80px;
height: 36px;
font: 28px/36px arial;
border: none;
color: white;
background-color: red;
vertical-align: middle;
}
#result {
width: 640px;
margin: 0 auto;
text-align: center;
font: 32px/36px arial;
}
</style>
</head>
<body>
<div id="search">
<input type="text" id="carno" placeholder="请输入车牌号">
<input type="button" value="查询" onclick="showResult()">
<input type="button" value="清除" onclick="clearResult()">
</div>
<hr>
<p id="result"></p>
<script>
const carnoInput = document.getElementById('carno')
const result = document.getElementById('result')
const pattern = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s*[0-9A-Z]{5}$/i
function clearResult() {
carnoInput.value = ''
result.textContent = ''
}
function showResult() {
let carno = carnoInput.value.trim()
if (pattern.test(carno)) {
let num = getLastDigit(carno)
if (num) {
let day = new Date().getDay()
if (day == 0 || day == 6) {
result.textContent = '节假日不限行'
} else if (num % 5 == day || num % 5 == day - 5) {
result.textContent = carno + '今日限行'
} else {
result.textContent = carno + '今日不限行'
}
return
}
}
alert('请输入有效的车牌号')
}
function getLastDigit(carno) {
let len = carno.length
for (let i = len - 1; i >= len - 5; i -= 1) {
if ('0' <= carno[i] && carno[i] <= '9') {
return parseInt(carno[i])
}
}
}
</script>
</body>
</html>