1.查询车牌在一周的限行情况
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.box{
width: 700px;
margin: 200px auto;
/* border: 1px solid black; */
}
.carID, .carWeek{
border: none;
border-bottom: 1px solid coral;
display: inline-block;
width: 600px;
height: 50px;
font: 18px/20px monospace, courier;
text-align: center;
outline: none;
}
.carWeek{
margin-top: 30px;
display: none;
}
.btnSearch{
border: 1px solid #FF7F50;
outline: none;
background-color: white;
margin-left: 10px;
width: 80px;
height: 50px;
transition: background-color 1s;
display: none;
}
.btnSearch:hover{
background-color: #FF7F50;
}
p.tip{
/* border: 1px solid black; */
color: #FF7F50;
font: 30px/30px "楷书",sans-serif;
text-align: center;
margin-top: 50px;
display: none;
}
</style>
</head>
<body>
<div class="box">
<input type="text" class="carID" id="cID" placeholder="查询限行车辆，请输入车牌号：" />
<input type="text" class="carWeek" id="cWeek" placeholder="查询限行车辆，请输入星期几：" />
<input type="submit" class="btnSearch" id="bS" value="查询" />
<p class="tip"></p>
</div>
<script>
// carsNumber = window.prompt('查询限行车辆，请输入车牌号：')
let reStr = /^([京津黑吉辽冀豫鲁晋陕宁陇甘新青藏鄂皖苏沪浙闵湘赣川蜀渝黔贵滇云粤桂琼港澳台]|内蒙古)[A-Z]\s[A-Z1-9]{5}$/
let content = document.querySelector('#cID')
content.addEventListener('change', ()=>{
let tip = document.querySelector('.tip')
let week = document.querySelector('#cWeek')
let btn = document.querySelector('#bS')
tip.style.display = "block"
// console.log(text.value)
if (reStr.test(content.value)){
tip.textContent = ''
let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
week.style.display = "inline-block"
btn.style.display = "inline-block"
btn.addEventListener('click', ()=>{
let num = weeks.indexOf(week.value)
if (num!=-1){
let patt1 = /\d\D*$/
resultArr = patt1.exec(content.value)
if (resultArr){
tailNum = parseInt(resultArr[0].slice(0,1))
switch(num){
case 0:
case 6:
tip.textContent = '今天不限行'
break
case 1:
if (tailNum == 1 || tailNum == 5){
tip.textContent = '今天限行尾号1和5，该车牌号限行'
}else{
tip.textContent = '今天限行尾号1和5，该车牌号不限行'
}
break
case 2:
if (tailNum == 2 || tailNum == 6){
tip.textContent = '今天限行尾号2和6，该车牌号限行'
}else{
tip.textContent = '今天限行尾号2和6，该车牌号不限行'
}
break
case 3:
if (tailNum == 3 || tailNum == 7){
tip.textContent = '今天限行尾号3和7，该车牌号限行'
}else{
tip.textContent = '今天限行尾号3和7，该车牌号不限行'
}
break
case 4:
if (tailNum == 4 || tailNum == 8){
tip.textContent = '今天限行尾号4和8，该车牌号限行'
}else{
tip.textContent = '今天限行尾号4和8，该车牌号不限行'
}
break
case 5:
if (tailNum == 0 || tailNum == 9){
tip.textContent = '今天限行尾号0和9，该车牌号限行'
}else{
tip.textContent = '今天限行尾号0和9，该车牌号不限行'
}
break
}
}else{
tip.textContent = '该车牌号不含数字，所以不限行或者是输入有误'
}
}else{
tip.textContent = '请输入有效的星期(如：星期一)'
}
})
}else{
week.style.display = "none"
btn.style.display = "none"
tip.textContent = '请输入有效的车牌号'
}
})
</script>
</body>
</html>
2.制作一个点名系统（随机抽取名字，且每一遍不重复）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
.container{
width: 50%;
height: 400px;
margin: 100px auto;
/* border: 1px solid black; */
}
.thy{
width: 60%;
height: 200px;
/* border: 1px solid red; */
margin: 0 auto;
text-align: center;
font: bold 1em/200px "楷书",monospace;
color: white;
background-color: #5F9EA0;
margin-top: 50px;
}
.begin, .stop, .clearIt{
height: 50px;
line-height: 50px;;
width: 33.3%;
background-color: #5F9EA0;
color: #F0F8FF;
text-align: center;
float: left;
margin-top: 100px;
cursor: pointer;
}
.begin:hover, .stop:hover, .clearIt:hover{
background-color: #268AAF;
}
</style>
</head>
<body>
<div class="container">
<div class="thy" id="thyName">点名册</div>
<div class="begin" id="btnBegin">BEGIN</div>
<div class="stop" id="btnStop">STOP</div>
<div class="clearIt" id="clrIt">ClEAR</div>
</div>
<script type="text/javascript">
const stuNames = ['张义', '赵尔', '孙散', '钱思', '李武', '欧阳溪流', '马东颀', '刘坝', '王玖']
let btnBegin = document.querySelector('#btnBegin')
let btnstop = document.querySelector('#btnStop')
let thyName = document.querySelector('#thyName')
let clrIt = document.querySelector('#clrIt')
let timer = null
let randomNums = []
//click开始按钮
btnBegin.addEventListener('click', ()=>{
timer = window.setInterval(()=>{
if (randomNums.length == stuNames.length){
randomNums = []
}
while(true){
index = parseInt(Math.random()*stuNames.length)
//judgeNoRepeat(idx, arr)方法
result = judgeNoRepeat(index, randomNums)
if (result){
randomNums.push(index)
console.log(stuNames[index])
thyName.textContent = stuNames[index]
break
}
}
}, 200)
})
//判断stuNames中的index不重复
function judgeNoRepeat(idx, arr){
for (num of arr){
if(num == idx){
return false
}
}
return true
}
btnstop.addEventListener('click',()=>{
window.clearInterval(timer)
})
clrIt.addEventListener('click', ()=>{
btnstop.click()
randomNums = []
thyName.textContent = '点名册'
})
</script>
</body>
</html>
