day6 作业 车牌限号查询；大图显示
2018-12-15 本文已影响0人
Gary134
车牌限号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
border: 0;
}
#box1{
border-bottom: 1px solid #808080;
text-align: center;
margin-top: 200px;
}
#box1 input{
font-size: 30px;
outline: none;
text-align: center;
border-bottom: 1px dotted #909090;
margin-bottom: 15px;
/*设置垂直方向的对齐方式*/
vertical-align: middle;
}
#box1 button{
width: 100px;
height: 40px;
background-color: orangered;
font-size: 20px;
font-weight: 600;
color: white;
margin-bottom: 15px;
vertical-align: middle;
}
#box2{
text-align: center;
font-size: 35px;
}
</style>
</head>
<body>
<!--==========html============-->
<div id="box1">
<input type="text" name="" id="" value="" placeholder="请输入车牌号..."/>
<button id="btn1">查询</button>
<button id='btn2'>清除</button>
</div>
<div id="box2"></div>
<!--===========js============-->
<script type="text/javascript">
//1.获取需要的节点
var carNumNode = document.getElementsByTagName('input')[0];
var queryBtnNode = document.getElementById('btn1');
var clearBtnNode = document.getElementById('btn2');
var resultBoxNode = document.getElementById('box2');
var reObj = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}\s+[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}$/
//2.============是否限行============
function idTrafficControls(carNumber){
//a.获取最后一个数字
for(var x=carNumber.length-1;x>=0;x--){
var number1 = carNumber[x];
//如果是数字
if (number1>='0' && number1<='9') {
isNumber = true;
break;
}
}
if(!isNumber){
return carNumber+'不是有效车牌号';
}
//b.判断数字是否限行：1/6 - 1;2/7 - 2;3/8 - 3;4/9 - 4;5/0 - 5;周末不限行
//获取当前时间
var now = new Date();
//var year = now.getFullYear(); 年
//var month now.getFullYear(); 月
//var day = now.getData(); 天/日/号
//获取星期几
var week = now.getDay();
//console.log(year,month+1,day)
if (week > 5) {
return carNumber+'今日不限行'
}
if(week == number1 || (week+5)%10 == number1){
return carNumber+'今日限行';
}else{
return carNumber+'今日不限行';
}
}
//3.=============查询==================
queryBtnNode.onclick = function(){
//a.获取输入框中的内容
var carNum = carNumNode.value;
//创建新节点
var newNode = document.createElement('p');
//b.判断输入的车牌号是否符合要求：地名+大写字母 5个字符
//正则对象.test(字符串) - 匹配,返回值是布尔
console.log(reObj.test(carNum));
if(reObj.test(carNum)){
//判断车牌号是否限行
var message = idTrafficControls(carNum);
newNode.innerText = message;
}else{
newNode.innerText = carNum+'不是有效的车牌号'
}
//c.添加节点
resultBoxNode.appendChild(newNode);
}
//=================4.清除===================
resultBoxNode.onclick = function(){
resultBoxNode.innerHTML = '';
}
</script>
</body>
</html>
大图显示.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: none;
padding: none;
}
#bigImg{
width: 500px;
height: 300px;
}
#font{
font-size: 20px;
font-weight: 700;
}
</style>
</head>
<body>
<div id="smallBox"></div>
<div id="bigBox">
<img id="bigImg"/><br />
<font id="font"></font>
</div>
<script type="text/javascript">
var imgArray = [
{
name:'图一',
small_url:'img/thumb-1.jpg',
big_url:'img/picture-1.jpg'
},
{
name:'图二',
small_url:'img/thumb-2.jpg',
big_url:'img/picture-2.jpg'
},
{
name:'图三',
small_url:'img/thumb-3.jpg',
big_url:'img/picture-3.jpg'
}
]
var smallBoxNode = document.getElementById('smallBox');
var bigBoxNode =document.getElementById('bigBox');
var bigImgNode = document.getElementById('bigImg');
var fontNode = document.getElementById('font');
var currentImgNode = smallImgNode;
for (var x in imgArray) {
var imgNode = imgArray[x];
var smallImgNode = document.createElement('img');
smallImgNode.src = imgNode.small_url;
smallImgNode.info1 = imgNode;
smallBoxNode.appendChild(smallImgNode);
//绑定事件
smallImgNode.onclick = function(){
bigImgNode.src = this.info1.big_url;
fontNode.innerText = this.info1.name;
}
}
bigImgNode.src = imgArray[0].big_url;
fontNode.innerText = imgArray[0].name;
</script>
</body>
</html>
