JS实现一个简单的消息发送

最新推荐文章于 2024-09-11 07:57:51 发布

原创最新推荐文章于 2024-09-11 07:57:51 发布 · 1.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #html5

本文介绍了如何利用JavaScript实现一个简单的微信消息发送功能，通过HTML结构和JS代码的结合，达到模拟消息交互的效果。

实现简单的微信发送功能
html结构

<div id="aa">
	<ul></ul>
	<textarea></textarea>
	<button>发送</button>
</div>

JS代码

const text = document.querySelector('textarea')
const btn = document.querySelector('button')
const ul = document.querySelector('ul')
//绑定点击事件
btn.onclick = function(){
	//非空验证
	if(text.value == ''){
		 alert('请输入内容')
	}
	//添加 创建li
	//createElement创建指定添加文本的html元素
	//appendChild向子节点添加最后一个子节点
	let Li = document.createElement('ul')
	Li.innerHTML = text.value + '<span>撤回</span>'
	ul.appendChild(Li)
	//撤回操作，获取所有span节点
	let span = ocument.querySelectorAll('span')
	//给每个span添加事件
	for(let i = 0; i<span.length; i++){
		span[i].onclick = function(){
			//parentNode.remove删除指定的DOM节点
			this.parentNode.remove()
		}
	}
	//发送后清空输入框
	text.value = ''
}