<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta -equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{ margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
}
main{
width: 600px;
padding: 30px 50px;
background-color: antiquewhite;
margin: 0 auto;
}
div{width: 600px;
height: 30px;
background-color: #eee;
border-radius: 5px;
margin: 10px 0px;
}
input{
width: 600px;
height: 30px;
border: 0;
outline: none;
background-color:transparent;
text-align: center;
}
.sure{
width: 400px;
}
.sure:hover{
cursor: pointer;
background-color: blue
;
}
.btn{
width: 400px;
margin: 0 auto;
}
.btn>input{
width: 400px;
}
ul{width: 700px;
margin: 20px auto;}
li{ width: 700px;
height: 60px;
background-color: #eee;
box-sizing: border-box;
padding: 0px 10px;
margin-top: 20px;}
li>p{
height: 30px;
line-height: 30px;
overflow: hidden;
}
li p span:nth-child(1)
{float: left;}
li p span:nth-child(2)
{float: right;}
li p span:nth-child(2) button
{width: 50px;
background-color: aquamarine;}
</style>
</head>
<body>
<main>
<div><input type="text" placeholder="请输入内容"></div>
<div><input type="text" placeholder="请输入名字"></div>
<div class="btn"><input type="button" value="确定" class="sure"></div>
</main>
<ul>
<li>
<p><span>我在石家庄</span><span>我</span></p>
<p><span id="time">2022-08-29 15:38</span><span id="del">删除</span></p>
</li>
<!-- <li>
<p><span>我在石家庄</span><span>我</span></p>
<p><span id="time">2022-08-29 15:38</span><span id="del">删除</span></p>
</li> -->
</ul>
</body>
<script>
//1.获取元素
//2.绑定事件
//3.创建li标签
//4.丰富li标签内容
//5.将li元素添加到父元素
var inp=document.querySelectorAll('input')
console.log(inp);
var list=document.querySelector('ul')
console.log(list);
inp[2].οnclick=function()
{
var newLi=document.createElement('li')
newLi.innerHTML=
`<p>
<span>${inp[0].value}</span>
<span>${inp[1].value}</span>
</p>
<p>
<span id="time">${getNowTime()}</span>
<span id="del" οnclick='delFun(this)'><button>删除</button></span>
</p>`
// 5.将li添加到父元素中 当父元素中没有子节点 直接添加 appendchild 如果有 将第一个当做参照节点 通过inserbefir()添加
console.log(list.children);
if(list.children.length>0)
{ list.insertBefore(newLi,list.children[0])}
else{
list.appendChild(newLi)
}
}
//封装函数 当前时间
function getNowTime(){
//1.创建时间对象
var now=new Date()
// 获取年
var y=now.getFullYear()
var m=now.getMonth()+1
var d=now.getDate()
var h=now.getHours()
var min=now.getMinutes()
var s=now.getSeconds()
m=m<10? '0'+m:m
d=d<10? '0'+d:d
h=h<10? '0'+h:h
min=min<10? '0'+min:min
return(y+"-"+m+'-'+d+' '+h+':'+min+':'+s);
}
function delFun(t) {
var span=t.parentNode.parentNode
list.removeChild(span)
}
//删除函数
</script>
</html>