简单js新浪微博发布评论代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是简单js新浪微博发布评论代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> contentEditable=true</title>

<script src="js/xml.js"></script>

<link href="css/reset.css" rel="stylesheet">
<style>
	.main{
		width: 800px;
		margin:20px auto;
	}
	span{
		display: inline-block;
		width: 200px;
		height: 25px;
		line-height: 25px;
		vertical-align: center;
		text-align: left;
		margin-bottom: 10px;
	}
	.tag{
		font-size: 13px;
		margin-left: 370px;
		vertical-align: bottom;
		text-align: center;
		margin-bottom: 0;
	}
	.text{
		width: 750px;
		height: 180px;
		margin:0 auto;

		resize:none;
	}
	
	input{
		display: inline-block;
		width: 80px;
		height: 50px;
		background: #E2526F;
		border: 0;
		margin-left: 670px;
		margin-top: 10px;
	}
	.creatediv{
		width: 675px;
		height: 80px;
		border: 1px solid gray;
		position: relative;
		margin-top: 10px;
		padding-left: 75px;
	}
	.createinput{
		width: 80px;
		height: 30px;
		position:absolute;
		right: 5px;
		bottom:5px;
	}
	.createimg{
		width: 50px;
		height: 50px;
		position: absolute;
		top: 15px;
		left: 15px;
	}
	.createdivs{
		width:600px;
		height:50px;
		position: absolute;
		top: 15px;
		left: 85px;
	}
</style>

</head>
<body id="body">
<div class="main">
	<span>你想对楼主说点什么</span>
	<span class="tag">你最多可以输入30个字符</span>
	<textarea id="text" cols="30" rows="10" maxlength="30" class="text"></textarea><br>
	<input type="button" value="发 表" id="ipt">
	<div id="txt" >
		

	</div>
</div>

<script>
	var ipt = document.getElementById("ipt");
	var txt = document.getElementById('txt');
	var textarea = document.getElementById("text");
	ipt.onclick = function(){
		var textValue = textarea.value.LTrim();		
		textarea.value="";
		if(textValue.length>0 ){
			var divs = document.createElement("div");
			var imgs = document.createElement("img");
			var ps = document.createElement("p");
			var inputs = document.createElement("input");
			divs.setAttribute("class","creatediv");
			imgs.setAttribute('class',"createimg");
			ps.setAttribute("class","createdivs");
			inputs.setAttribute("class","createinput");
			imgs.src="pic/1.jpg";
			inputs.type="button";
			inputs.value="删除";
			ps.innerHTML=textValue;
			divs.appendChild(imgs);
			divs.appendChild(ps);
			divs.appendChild(inputs);
			if(txt.children.length==0){
				txt.appendChild(divs);

			}else{
				txt.insertBefore(divs,get_firstChild(txt))
			}
			inputs.onclick = function(){
				this.parentNode.parentNode.removeChild(this.parentNode)
			}
		}
	}
</script>
</body>
</html>

JS代码(xml.js):

function get_previousSibling(n){
	y=n.previousSibling;
	while (y.nodeType!=1){
	y=y.previousSibling;
}
return y;
}
function get_nextSibling(n){
	y=n.nextSibling;
	while (y.nodeType!=1){
	y=y.nextSibling;
}
return y;
}
function get_lastChild(n){
	y=n.lastChild;
	while (y.nodeType!=1){
	y=y.previousSibling;
}
return y;
}
function get_firstChild(n){
	y=n.firstChild;
	while (y.nodeType!=1){
	y=y.nextSibling;
}
return y;
}
// Trim(),Ltrim(),RTrim()String.prototype.Trim = function(){
	return this.replace(/(^\s*)|(\s*$)/g,"");
}
String.prototype.LTrim = function(){
	return this.replace(/(^\s*)/g,"");
}
String.prototype.RTrim = function(){
	return this.replace(/(\s*$)/g,"");
}

附件:下载该文件资源,减少时间成本(增值服务)