標簽的添加與刪除
<!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>
