HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
}
body{
background: lightblue;
}
.one{
position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 300px;
height: 300px;
background: linear-gradient(45deg,#74b9ff,#a29bfe,#fd79a8);
border-radius: 5px;
align-items: center;
justify-content: center;
}
.one ul{
position: absolute;
font-size: 10px;
top: 60%;
left: 6%;
list-style-position: inside; /*点的位置*/
color: white;
text-transform: uppercase;
}
button{
margin: auto 5px;
width: 40px;
background: linear-gradient(45deg,#74b9ff,#a29bfe,#fd79a8);
border: 0;
outline: none;
color: white;
user-select: none;
}
input{
background: transparent;
border:0; /*无边框*/
outline: none;
border-bottom: 1px solid #00b894;
color: pink;
}
</style>
<title>Document</title>
</head>
<body>
<div class="one">
<input type="text">
<button>创建</button>
<button>删除</button>
<ul>
</ul>
</div>
<script>
var ul=document.getElementsByTagName('ul')[0];
let ipu=document.getElementsByTagName('input')[0];
let btn=document.getElementsByTagName('button')[0];
let btn1=document.getElementsByTagName('button')[1];
var lis=0;
btn.onclick=function(){ //添加按钮
if(ipu.value!=""){
li=document.createElement("li");
ul.appendChild(li);
li.innerHTML=ipu.value;
ipu.value="";
ipu.focus();
lis=document.getElementsByTagName('li');
}else{
btn.disabled=true;
setTimeout(function(){
btn.disabled=false;
},1000)
}
}
btn1.addEventListener('click',function(){ //删除按钮
let c=lis.length-1;
console.log(c);
if(isNaN(c)||c==-1){
btn1.disabled=true;
setTimeout(function(){
btn1.disabled=false;
},1000)
}else{
ul.removeChild(lis[c]);
}
})
</script>
</body>
</html>
ScreenShot_20210522125602.png
----21/05/22
