这题等我要粘贴答案的时候发现倒计时了,最后没来得及贴
题目是做一个添加删除
我做出来的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div1{
background-color:darkgrey;
width: 600px;
height: 500px;
}
#div2{
margin-left: 30px;
width: 400px;
height: 300px;
border-radius: 10px;
background-color: white;
}
.cls{
clear: both;
}
p{
width: 380px;
padding-left: 20px;
text-align: left;
height: 50px;
line-height: 50px;
/*padding: 0px;*/
margin: 0px;
/*padding-left: 20px;*/
border: #999999 1px solid;
vertical-align: middle;
}
p input{
background-color: darkred;
vertical-align: middle;
float: right;
margin-top: 10px;
margin-right: 20px;
color: white;
border-radius: 5px;
box-shadow: none;
vertical-align: middle;
}
#div3{
margin-top:20px;
width: 300px;
}
</style>
</head>
<body>
<div id="div1">
<h1>任务清单:</h1>
<div id="div2">
<p>周一例会<input type="button" value="删除"></p>
<p>周二开发对接<input type="button" value="删除"></p>
<p>周三买牙膏<input type="button" value="删除"></p>
</div>
<div class="cls"></div>
<span style="margin-left: 40px">任务:</span><input id='xxx' type="text" placeholder=" 请填写任务内容" required="required" >
<input id="add" type="button" value="添加" style="background-color: lightskyblue" >
</div>
<script>
btns=document.querySelectorAll("p input")
div2=document.getElementById('div2')
addinput=document.getElementById('xxx')
add=document.getElementById('add')
add.addEventListener('click',addc)
btns.forEach((element)=>{
// console.log(element)
element.addEventListener('click',function (){
div2.removeChild(element.parentNode)
})
})
function addc(){
text=addinput.value
if (text!='') {
// console.log(text)
xx = document.createElement('input')
xx.type = 'button'
xx.value = '删除'
xx.addEventListener('click',function (){
div2.removeChild(xx.parentNode)
})
yy = document.createElement('p')
yy.innerHTML = text
yy.appendChild(xx)
div2.appendChild(yy)
addinput.value = ''
}
}
</script>
</body>
</html>
界面就尽量做的一样
主要是js函数
这里只在增加的地方绑定了一个事件函数,点击添加按钮后,就将任务清单加到那个后面
因为删除按钮有删除功能,所以在这里也给创建的input元素绑定了相应事件。
如果加入的项目太多,页面设置的高度不够用,可以将两个div的height属性改为min-height属性,超过这个值时会 自动延伸
这样就complete啦