注册 登录 充值会员 退出
网站、APP、小程序等定制开发,联系QQ 1206995177 毕业设计 java源码 PHP源码

充值

原生js发布对话消息列表代码

作者/代码整理:  (源码已亲测,不会安装的可以向QQ1915635791要安装视频教程) 发布日期:2024-01-21
原生js发布对话消息列表代码
这是一款简单的原生js发布对话消息列表代码,发布留言评论效果,点击头像昵称切换发布对话消息。


js代码

<script type="text/javascript">

	var btn1 = document.getElementById('btn1');
	var messageContent = document.getElementById('messageContent');
	var text = document.getElementById('text');
	var avtar = document.getElementById('avtar');
	var nickname = document.getElementById('nickname');

	btn1.onclick = function() {

		var mes = text.value;
		var imgSrc = avtar.src;
		var nick = nickname.innerHTML;

		if (f == 1) {
			messageContent.innerHTML = messageContent.innerHTML + '<p> <img src = " ' + imgSrc + ' " alt = "" ><span> ' + nick + ' </span> <span>:' + mes + '</span> </p> ';
		} else {
			messageContent.innerHTML = messageContent.innerHTML + '<p class="aui-right"><img src = " ' + imgSrc + ' " alt = "" > <span>: ' + nick + '</span><span>' + mes + '</span>  </p> ';
		}
		text.value = '';
	}

	var f = 1;

	nickname.onclick = avtar.onclick = function() {

		if (f == 1) {
			nickname.innerHTML = '阿呆';
			avtar.src = 'images/ad.png';
			f = 0;
		} else {
			nickname.innerHTML = '萌主';
			avtar.src = 'images/mz.png';
			f = 1;
		}

	}
</script>