Javascript 仿腾讯/新浪微博发留言效果代码

作者：袖梨 2022-06-25

提示：您可以先修改部分代码再运行

EventUtil.addLoadHandler(function ()
{
	var oMsgBox = get.byId("msgBox");
	var oUserName = get.byId("userName");
	var oConBox = get.byId("conBox");
	var oSendBtn = get.byId("sendBtn");
	var oMaxNum = get.byClass("maxNum")[0];
	var oCountTxt = get.byClass("countTxt")[0];
	var oList = get.byClass("list")[0];
	var oUl = get.byTagName("ul", oList)[0];
	var aLi = get.byTagName("li", oList);
	var aFtxt = get.byClass("f-text", oMsgBox);
	var aImg = get.byTagName("img", get.byId("face"));
	var bSend = false;
	var timer = null;
	var oTmp = "";
	var i = 0;
	var maxNum = 140;
	
	//禁止表单提交
	EventUtil.addHandler(get.byTagName("form", oMsgBox)[0], "submit", function () {return false});
	
	//为广播按钮绑定发送事件
	EventUtil.addHandler(oSendBtn, "click", fnSend);
	
	//为Ctrl+Enter快捷键绑定发送事件
	EventUtil.addHandler(document, "keyup", function(event)
	{
		var event = event || window.event;
		event.ctrlKey && event.keyCode == 13 && fnSend()
	});
	
	//发送广播函数
	function fnSend ()
	{
		var reg = /^s*$/g;
		if(reg.test(oUserName.value))
		{
			alert("u8bf7u586bu5199u60a8u7684u59d3u540d");
			oUserName.focus()
		}
		else if(!/^[u4e00-u9fa5w]{2,8}$/g.test(oUserName.value))
		{
			alert("u59d3u540du75312-8u4f4du5b57u6bcdu3001u6570u5b57u3001u4e0bu5212u7ebfu3001u6c49u5b57u7ec4u6210uff01");
			oUserName.focus()
		}
		else if(reg.test(oConBox.value))
		{
			alert("u968fu4fbfu8bf4u70b9u4ec0u4e48u5427uff01");
			oConBox.focus()
		}
		else if(!bSend)
		{
			alert("u4f60u8f93u5165u7684u5185u5bb9u5df2u8d85u51fau9650u5236uff0cu8bf7u68c0u67e5uff01");
			oConBox.focus()
		}
		else
		{
			var oLi = document.createElement("li");
			var oDate = new Date();
			oLi.innerHTML = "<div class="userPic"><img  src="" + get.byClass("current", get.byId("face"))[0].src + "">
							 <div class="content">
							 	<div class="userName"><a href="javascript:;">" + oUserName.value + ":
								<div class="msgInfo">" + oConBox.value.replace(/<[^>]*>| /ig, "") + "
								<div class="times"><span>" + format(oDate.getMonth() + 1) + "u6708" + format(oDate.getDate()) + "u65e5 " + format(oDate.getHours()) + ":" + format(oDate.getMinutes()) + "<a class="del" href="javascript:;">u5220u9664
							 ";
			//插入元素
			aLi.length ? oUl.insertBefore(oLi, aLi[0]) : oUl.appendChild(oLi);
			
			//重置表单
			get.byTagName("form", oMsgBox)[0].reset();
			for (i = 0; i < aImg.length; i++) aImg[i].className = "";
			aImg[0].className = "current";
			
			//将元素高度保存
			var ipaddingTop")) - parseFloat(css(oLi, "paddingBottom"));
			var alpah = count = 0;
			css(oLi, {"opacity" : "0", "height" : "0"});	
			timer = setInterval(function ()
			{
				css(oLi, {"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
				if (count > iHeight)
				{
					clearInterval(timer);
					css(oLi, "height", iHeight + "px");
					timer = setInterval(function ()
					{
						css(oLi, "opacity", (alpah += 10));
						alpah > 100 && (clearInterval(timer), css(oLi, "opacity", 100))
					},30)
				}
			},30);
			//调用鼠标划过/离开样式
			liHover();
			//调用删除函数
			delLi()
		}
	};
	
	//事件绑定, 判断字符输入
	EventUtil.addHandler(oConBox, "keyup", confine);	
	EventUtil.addHandler(oConBox, "focus", confine);
	EventUtil.addHandler(oConBox, "change", confine);
	
	//输入字符限制
	function confine ()
	{
		var iLen = 0;		
		for (i = 0; i < oConBox.value.length; i++) iLen += /[^x00-xff]/g.test(oConBox.value.charAt(i)) ? 1 : 0.5;
		oMaxNum.innerHTML = Math.abs(maxNum - Math.floor(iLen));	
		maxNum - Math.floor(iLen) >= 0 ? (css(oMaxNum, "color", ""), oCountTxt.innerHTML = "u8fd8u80fdu8f93u5165", bSend = true) : (css(oMaxNum, "color", "#f60"), oCountTxt.innerHTML = "u5df2u8d85u51fa", bSend = false)
	}
	//加载即调用
	confine();		
	
	//广播按钮鼠标划过样式
	EventUtil.addHandler(oSendBtn, "mouseover", function () {this.className = "hover"});

//广播按钮鼠标离开样式
	EventUtil.addHandler(oSendBtn, "mouseout", function () {this.className = ""});
	
	//li鼠标划过/离开处理函数
	function liHover()
	{
		for (i = 0; i < aLi.length; i++)
		{
			//li鼠标划过样式
			EventUtil.addHandler(aLi[i], "mouseover", function (event)
			{
				this.className = "hover";
				oTmp = get.byClass("times", this)[0];
				var aA = get.byTagName("a", oTmp);
				if (!aA.length)
				{
					var oA = document.createElement("a");					
					oA.innerHTML = "删除";
					oA.className = "del";
					oA.href = "javascript:;";
					oTmp.appendChild(oA)
				}
				else
				{
					aA[0].style.display = "block";
				}
			});

//li鼠标离开样式
			EventUtil.addHandler(aLi[i], "mouseout", function ()
			{
				this.className = "";
				var oA = get.byTagName("a", get.byClass("times", this)[0])[0];
				oA.style.display = "none"	
			})
		}
	}
	liHover();
	
	//删除功能
	function delLi()
	{
		var aA = get.byClass("del", oUl);
		
		for (i = 0; i < aA.length; i++)
		{
			aA[i].onclick = function ()
			{
				var oParent = this.parentNode.parentNode.parentNode;
				var alpha = 100;
				var iHeight = oParent.offsetHeight;
				timer = setInterval(function ()
				{
					css(oParent, "opacity", (alpha -= 10));
					if (alpha < 0)
					{
						clearInterval(timer);						
						timer = setInterval(function ()
						{
							iHeight -= 10;
							iHeight < 0 && (i);
							css(oParent, "height", iHeight + "px");
							iHeight == 0 && (clearInterval(timer), oUl.removeChild(oParent))
						},30)
					}	
				},30);			
				this.onclick = null	
			}			
		}
	}
	delLi();
	
	//输入框获取焦点时样式
	for (i = 0; i < aFtxt.length; i++)
	{
		EventUtil.addHandler(aFtxt[i], "focus", function ()	{this.className = "active"});		
		EventUtil.addHandler(aFtxt[i], "blur", function () {this.className = ""})
	}
	
	//<a href="https://www.111cn.net/zhuanti/geshihua/" target="_blank">格式化时间, 如果为一位数时补0
	function format(str)
	{
		return str.toString().replace(/^(d)$/,"0$1")
	}
	
	//头像
	for (i = 0; i < aImg.length; i++)
	{
		aImg[i].onmouseover = function ()
		{
			this.className += " hover"
		};
		aImg[i].onmouseout = function ()
		{
			this.className = this.className.replace(/s?hover/,"")
		};
		aImg[i].onclick = function ()
		{
			for (i = 0; i < aImg.length; i++) aImg[i].className = "";
			this.className = "current"	
		}
	}
});
</script>

<div id="msgBox">
    <form>
        <h2>来 , 说说你在做什么 , 想什么</h2>
        <div>
            <input id="userName" class="f-text" value="">
            <p id="face"></p>
        </div>
        <div><textarea id="conBox" class="f-text">

还能输入140个字

大家在说

:

新增删除广播功能。

07月05日 15:14

Javascript 仿腾讯/新浪微博发留言效果代码

大家在说

相关文章

精彩推荐