标签的添加与删除
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#barList div{
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 20px;
}
.del{
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<div id="barList">
<div id="" style="background-color: red">
苹果 <span class="del">
X
</span>
</div>
</div>
<div id="">
<input type="" name="" id="input-area" value="" /><button id="btn">确定</button>
</div>
</div>
</body>
<script type="text/javascript">
window.onload=function(){
document.getElementById('barList').getElementsByClassName('del')[0].onclick=function(){this.parentElement.remove()}
btn = document.getElementById('btn')
btn.onclick=function(){
content = document.getElementById('input-area').value
newNode = document.createElement('div')
newNode.innerHTML = content+' <span class="del">X</span>'
colorR = parseInt(Math.random()*255)
colorG = parseInt(Math.random()*255)
colorB = parseInt(Math.random()*255)
newNode.style.backgroundColor='rgba('+colorR+','+colorG+','+colorB+',1)'
document.getElementById('barList').appendChild(newNode)
// delList = document.getElementsByClassName('del')
// for(i in delList){
// delList[i].onclick=function(){
// this.parentElement.remove()
//
// }
// }
document.getElementById('barList').lastChild.getElementsByTagName('span')[0].onclick=function(){
this.parentElement.remove()
}
document.getElementById('input-area').value=''
}
}
</script>
</html>
车牌号限号查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#search{
position: absolute;
top: 200px;
width: 100%;
height: 60px;
border-bottom: 1px solid gray;
}
#input-area{
height: 50px;
width: 400px;
float: right;
margin-right: 0;
}
#btn{
height: 56px;
width: 80px;
background-color: orangered;
border: 0;
float: right;
margin-right: 300px;
}
#clear{
height: 56px;
width: 80px;
background-color: orangered;
border: 0;
float: right;
margin-right: 5px;
}
</style>
</head>
<body>
<div id="" style="width: 100%;height: 300px;">
<div id="search">
<button id="btn">查询</button><button id="clear">清除</button><input type="" name="" id="input-area" value="" />
</div>
</div>
<div id="history" style="width: 100%;position: relative;">
</div>
</body>
<script type="text/javascript">
myDate = new Date()
today = myDate.getDay()
document.getElementById('btn').onclick=function(){
plate = document.getElementById('input-area').value
console.log(plate)
reg = /^[京津冀晋蒙辽吉黑沪苏浙皖闽赣鲁豫鄂湘粤桂琼渝川黔滇藏陕甘青宁新台港澳]{1}[A-Za-z]{1}[0-9A-Za-z]{5}$/
if(reg.test(plate)){
if(today==6 || today==0){
info = '双休日，不限号'
}else{
lastNum = plate[plate.length-1]
if((parseInt(lastNum)+5)%5==today){
info = '车牌'+plate+'今日限号'
}else{
info = '车牌'+plate+'今日不限号'
}
}
}else{
info = '车牌格式输入错误'
}
newNode=document.createElement('div')
newNode.innerText=info
newNode.style='width:100%;text-align:center;font-size:20px;margin-top:10px'
document.getElementById('history').appendChild(newNode)
document.getElementById('input-area').value=''
}
myHistory = document.getElementById('history')
document.getElementById('clear').onclick=function(){
myHistory.innerHTML=''
}
</script>
</html>
