利用JS实现评论留言发布表单代码



7 27 10



特效描述:利用JS实现 评论留言 发布表单代码,利用JS实现评论留言发布表单代码

代码结构

1. HTML代码

<div class="wrap">
	<div class="says">
		<h1>来,说说你在做什么,想什么...</h1>
		<textarea>请点击发布试试吧</textarea><input type="button"  value="发布">
		<div class="errmsg">请填写内容后再发布!</div>
	</div>
	<ul>
	</ul>
</div>
<script>
	window.onload=function()
	{
		var oWrap=document.getElementsByClassName("wrap")[0];
		var oTextarea=oWrap.getElementsByTagName("textarea")[0];
		var oBtn=oWrap.getElementsByTagName("input")[0];
		var oUl=oWrap.getElementsByTagName("ul")[0];
		var errMsg=oWrap.getElementsByClassName("errmsg")[0];
		var oA=document.getElementsByTagName("a");
		//console.log(oA);
		var t=new Date();
		var Year=t.getFullYear();
		var Month=t.getMonth()+1;
		var Day=t.getDate();
		var Hours=t.getHours();
		var Minutes=t.getMinutes();
		var Scondes=t.getSeconds();
		var timers=toString(Year)+"年"+toString(Month)+"月"+toString(Day)+"日"+toString(Hours)+":"+toString(Minutes)+":"+toString(Scondes);//将获取到的日期对象拼接。
		//console.log(timers);
		function toString(n)//数字转字符串
		{
			if(n<9)
			{
				n="0"+n;
			}
			else
			{
				n=""+n;
			}
			return n;
		};
		oBtn.onclick=function()
		{
			if(oTextarea.value=="")
			{
				startMove(errMsg,{opacity:100});
				//console.log(errMsg.style.opacity)
				oTextarea.select();
			}
			else
			{
			var aLi=document.createElement("li");
			var aSpan=document.createElement("span");
			//console.log(aLi);
			//console.log(aSpan);
			//oUl.appendChild(aLi);
			//aLi.appendChild(aSpan);
			aLi.innerHTML=oTextarea.value;
			aSpan.innerHTML=timers+"<a href='javascript:;' title='删除这条信息'>删除</a>";
			//aSpan.innerHTML="<a href='javascript:;'>删除</a>"
			if(oUl.children.length>0)
			{
				oUl.insertBefore(aLi,oUl.children[0]);
				aLi.appendChild(aSpan);
				oTextarea.value="";
			}
			else
			{
				oUl.appendChild(aLi);
				aLi.appendChild(aSpan);
				oTextarea.value="";
			};
			var aLiHeight=parseInt(getStyle(aLi,"height"));
			//console.log(aLiHeight);
				aLi.style.height="0";
				startMove(aLi,{height:aLiHeight},function(){
					startMove(aLi,{opacity:100});
				});
			delLi();//添加数据后加载删除模块	
		}
		};
		function delLi()
		{
			for(var i=0;i<oA.length;i++)
			{
				oA[i].onclick=function()
				{	
					liNode=this.parentNode.parentNode//获取到当前A标签的父节点,也就是LI
					var aLiHeight=parseInt(getStyle(liNode,"height"))+1;
					 //console.log(aLiHeight);
					 //链式运动操作:先进行透明化,再进行高度变小,最后删除DOM元素
					 startMove(liNode,{opacity:0},function(){
						startMove(liNode,{height:0},function(){
							oUl.removeChild(liNode);
						});
					 });
				}
			}
		}
	};
	//运动框架
	 function startMove(obj,json,endFn){
		clearInterval(obj.timer);
		obj.timer=setInterval(
			function(){
				var iStop=true;
				for(var curr in json)
				{
					var oNumber=0;
					if(curr=="opacity")
					{
						oNumber=Math.round(parseFloat(getStyle(obj,curr))*100);
					}
					else
					{
						oNumber=parseInt(getStyle(obj,curr));
					}
					var speed=(json[curr]-oNumber)/6;
						speed=speed>0?Math.ceil(speed):Math.floor(speed);
					if(oNumber!=json[curr])
					iStop=false;
					if(curr=="opacity")
					{
						obj.style.filter="alpha(opacity:"+(oNumber+speed)+")";
						obj.style.opacity=(oNumber+speed)/100;
					}	
					else
					{
						obj.style[curr]=oNumber+speed+"px";
					}
				};
				if(iStop)
				{
					clearInterval(obj.timer);
					if(endFn)endFn();
				}
		},30);
	 };
	//获取非行间样式
	function getStyle(obj,name)
	{
		if(obj.currentStyle)
		{
			obj=currentStyle[name];
		}
		else
		{
			obj=getComputedStyle(obj,false)[name];
		}
		return obj;
	};
</script>
<div style="text-align:center;margin:100px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 添加删除

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到