02-12js应用-车牌号限行案例
2019-02-12 本文已影响0人
ychaochaochao
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--样式-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#top{
height: 200px;
/*background-color: darkgoldenrod;*/
border-bottom: 1px solid gray;
position: relative;
}
#box{
/*定位*/
position: absolute;
bottom: 10px;
/*水平方向居中*/
width: 100%;
text-align: center;
}
#carNo{
width: 400px;
text-align: center;
font-size: 35px;
border: 0;
border-bottom: 1px dotted lightgray;
vertical-align: bottom;
}
#carNo:focus{
outline: 0;
}
button{
border: 0;
width: 70px;
height: 40px;
background-color: red;
color: white;
font-size: 25px;
}
/*结果的样式*/
.reslut{
text-align: center;
font-size: 30px;
color: darkcyan;
}
</style>
</head>
<body>
<div id="top">
<div id="box">
<input type="text" name="" id="carNo" value="" placeholder="请输入车牌号"/>
<button onclick="search()">查询</button>
<button onclick="clearResult()">清除</button>
</div>
</div>
<div id="bottom">
</div>
<!--js代码-->
<script type="text/javascript">
//查询
function search(){
//1.检查输入的车牌号是否合法
//获取输入框
carNoNode = document.getElementById('carNo')
//获取输入框输入的内容
carNumber = carNoNode.value
//确定车牌号的正则表达式
reObj = /^[京津沪渝辽吉黑冀鲁豫晋陕甘闽粤桂川云贵苏浙皖湘鄂赣青新宁蒙藏琼][A-Z]\s*[A-Z0-9]{5}$/
//正则对象.test(字符串) - 判断字符串和正则表达式是否匹配，匹配返回true，否则返回false
result = reObj.test(carNumber)
message = '车牌号不合法!'
//如果车牌号合法
if(result){
//获取今天的星期
date = new Date()
week = date.getDay()
//获取最后一个的数字
var num = 0
for(i = carNumber.length-1; i>=0; i--){
ch = carNumber[i]
if(ch >= '0' && ch <= '9'){
num = ch
break
}
}
//判断今日是否限行
if(week == 6 || week == 7){
message = '今日不限行'
}else{
if(num == week || num == (week+5 >= 10?0:week+5)){
message = '今日限行!'
}else{
message = '今日不限行'
}
}
}
//将消息展示在网页上
messageNode = document.createElement('p')
messageNode.innerText = carNumber+message
//设置标签的class值
messageNode.className = 'reslut'
resultDivNode = document.getElementById('bottom')
resultDivNode.appendChild(messageNode)
}
//清除
function clearResult(){
resultDivNode = document.getElementById('bottom')
//清空内容
resultDivNode.innerHTML = ''
}
</script>
</body>
</html>
