JS 增删留言案例_js增删留言-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_45972539/article/details/120273317

HTML部分

<body>
		<div id="box">
			<input type="text" name="" id="inpu" value="" />
			<button type="button">发送</button>
			<ul id="leave">

			</ul>
		</div>
	</body>

JS部分

<script type="text/javascript">
		var inpval = document.querySelector('#inpu')
		var ul = document.querySelector('ul')
		var bu = document.querySelector('button')
		bu.addEventListener('click', function() {
			var trufal = nul()
			//判断输入是否为空
			if (trufal != true) {
				return alert('您输入为空')
			}
			//调用时间函数
			var thistime = gettime()
			var valuee = inpval.value
			//创建盒子容器
			var li = document.createElement('li')
			ul.appendChild(li)
			//创建头像
			var imgsrc = document.createElement('img')
			imgsrc.src = 'img/人.jpg'
			li.appendChild(imgsrc)
			//创建内容
			var tex = document.createElement('div')
			tex.className = 'tex'
			var timerl = document.createElement('p')
			var textv = document.createElement('p')
			tex.appendChild(timerl)
			//写入内容 时间
			timerl.innerText = thistime
			tex.appendChild(textv)
			//写入内容
			textv.innerText = valuee
			li.appendChild(tex)

			var del = document.createElement('a')
			del.innerText = '删除'
			//删除事件
			del.onclick = function() {
				li.remove()
			}
			//添加页面元素

			if (ul.children.length == 0) {
				li.insertBefore(del)
			} else {
				li.appendChild(del)
			}
			inpval.value = ''

		})
		function gettime() {
			var tim = new Date
			var year = tim.getFullYear() //年
			var month = tim.getMonth() + 1 //月
			var day = tim.getDate() //日
			var h = tim.getHours() //小时
			var min = tim.getMinutes() //分
			return year + '年' + month + '月' + day + '日' + h + '时' + min + '分'
		}

		function nul() {
			//清楚空格
			var valuee = inpval.value.trim()
			//判断是否输入了
			if (valuee.length == 0) {
				return false
			} else {
				return true
			}
		}
	</script>