{
    分享网正式开通,我们为大家提供免费资源,欢迎大家踊跃投稿!

原生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>


在线预览
资源均来自第三方,谨慎下载,前往第三方网站下载


米微资源分享网 , 版权所有丨本站资源仅限于学习研究,严禁从事商业或者非法活动!丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:原生js发布对话消息列表代码
喜欢 ()分享 (0)