添加节点、删除节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#content{
margin-top: 20px;
margin-left: 20px;
}
#content div{
width: 120px;
height: 30px;
color: white;
background-color: aquamarine;
text-align: center;
padding-top: 8px;
margin-bottom: 5px;
}
#content div span{
float: right;
margin-right: 10px;
cursor: pointer;
}
.btn input{
width: 150px;
height: 30px;
border: none;
border-bottom: 2px solid #eeeeee;
text-align: center;
}
.btn button{
width: 50px;
height: 30px;
background-color: orange;
color: white;
border: 1px solid #EEEEEE;
}
</style>
</head>
<body>
<div id="content">
<div>香蕉<span onclick="close()">X</span></div>
<div>火龙果<span>X</span></div>
<div>西瓜<span>X</span></div>
</div>
<div class="btn">
<input type="text" id="input1" value="" />
<button id="btn1">确定</button>
</div>
</body>
</html>
<script type="text/javascript">
btnNode = document.getElementById('btn1')
spanNodes = document.getElementsByTagName('span')
for(x in spanNodes){
spanNodes[x].onclick = function(){
this.parentElement.remove()
}
}
// function close(){
// console.log(this)
// }
btnNode.onclick = function(){
console.log(btnNode)
input1 = document.getElementById('input1').value
if(input1){
spanNode = document.createElement('div')
spanNode.innerHTML = input1+'<span>X</span>'
red = parseInt(Math.random()*256)
green = parseInt(Math.random()*256)
blue = parseInt(Math.random()*256)
spanNode.style.backgroundColor = 'rgba('+red+','+green+','+blue+',0.6)'
divNode = document.getElementById('content')
divNode.insertBefore(spanNode, divNode.firstElementChild)
spanNode.children[0].onclick = function(){
this.parentElement.remove()
}
}
}
</script>
效果图
制作车牌号验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.input{
height: 200px;
text-align: center;
position: relative;
}
.input div{
height: 40px;
position: absolute;
bottom: 2px;
margin-left: 300px;
}
#input1{
width: 200px;
height: 30px;
border: none;
border-bottom: 2px solid #eeeeee;
display: inline-block;
text-align: center;
}
.input div button{
background-color: red;
color: white;
width: 30px;
height: 20px;
border: 1px solid #EEEEEE;
margin-right: 8px;
}
.show{
height: 500px;
margin-left: 300px;
border: none;
}
</style>
</head>
<body>
<div class="content">
<div class="input">
<div id="">
<input type="text" id="input1" value="" placeholder="请输入车牌号"/>
<button id="btn1" onclick="seatch()">查询</button>
<button id="btn2" onclick="clear()">清除</button>
</div>
</div>
<hr />
<div class="show">
<textarea name="" rows="10" cols="40" id="textarea1">
</textarea>
</div>
</div>
</body>
</html>
<script type="text/javascript">
input1 = document.getElementById('input1')
btn1 = document.getElementById('btn1')
btn2 = document.getElementById('btn2')
text1 = document.getElementById('textarea1')
text1.value=''
myDate =new Date()
btn1.onclick = function(){
str1 = input1.value
re = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领]{1}[A-Z]{1}[A-Z0-9]{5}$/
if(!str1.match(re)){
text1.value += str1+'不是有效的车牌号'+'\n'
}else{
code = parseInt(str1[6])
if(myDate.getDay()%2==code%2){
text1.value += str1+'今日不限行'+'\n'
}else{
text1.value += str1+'今日限行'+'\n'
}
}
}
btn2.onclick = function(){
input1.value = ''
}
</script>
效果图
