参照网易博客留言评论功能，求一个思路。

xulili123 2010-11-03 01:58:53

我想做一个类似于网易博客评论的功能，如
http://sangxiujing.popo.blog.163.com/blog/static/58926591201010251052766/?touping
.每点击一个评论后面的回复都出现一个用户评论框，我想知道怎样才能实现点击一下回复评论框就会在相应的位置实现呢，并且怎么才能完成用户评论提交的动作，这个问题我思考很久了，可还是一点头绪也没有，真心希望有哪位前辈能指点我一下。

...全文

270 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

xulili123 2010-11-03

打赏
举报

自己顶起来，希望有更多的人来关注一下。

wwfgu00ing 2010-11-03

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>模拟妙味课堂留言本 - 妙味课堂 - www.miaov.com</title>

<style type="text/css">

* { padding: 0; margin: 0; }

li { list-style: none; }

body { background: #f9f9f9; font-size: 14px; }



#explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: center; line-height: 60px; }

#explain a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; }

#explain a:hover { border-bottom: 2px solid #990000; }

#explain strong { color: #990000; }



#box { width: 450px; padding: 10px; border: 1px solid #ccc; background: #f4f4f4; margin: 10px auto; }

#fill_in { margin-bottom: 10px; }

#fill_in li { padding: 5px 0; }

#fill_in .text { width: 380px; height: 30px; padding: 0 10px; border: 1px solid #ccc; line-height: 30px; font-size: 14px; font-family: arial; }

#fill_in textarea { width: 380px; height: 100px; line-height: 20px; padding: 5px 10px; border: 1px solid #ccc; font-size: 14px; font-family: arial; overflow: auto; vertical-align: top; }

#fill_in .btn { border: none; width: 100px; height: 30px; border: 1px solid #ccc; background: #fff; color: #666; font-size: 14px; position: relative; left: 42px; }



#message_text { display: none; }

#message_text h2 { font-size: 14px; padding: 6px 0 4px 10px; background: #ddd; border-bottom: 1px solid #ccc; }

#message_text li { background: #f9f9f9; border-bottom: 1px solid #ccc; color: #666; overflow: hidden; }

#message_text h3 { padding: 10px; font-size: 14px; line-height: 24px; }

#message_text p { padding: 0 10px 10px; text-indent: 28px; line-height: 20px; }

</style>



<script type="text/javascript">



var oBtn = null;

var oForm = null;

var oText = null;

var oTextarea = null;

var timer = null;

var speed = 0;

var oLi = null

var oH3 = null;

var oP = null;



window.onload = function()

{

	oBtn = document.getElementById("btn");

	oBtn.onclick = getValue;

};



function getValue()

{

	document.getElementById("message_text").style.display = "block";



	oForm = document.getElementsByTagName("form")[0];

	oText = document.getElementById("text");

	oTextarea = document.getElementsByTagName("textarea")[0];

	oUl = document.getElementById("message_text").getElementsByTagName("ul")[0];



	oForm.onsubmit = function(){ return false; };



	if( oText.value == "" || oTextarea.value == "" )

	{

		alert("就二个框，你还不写全了啊？");

		return;

	}



	oLi = document.createElement("li");

	oH3 = document.createElement("h3");

	oP = document.createElement("p");



	oH3.innerHTML = oText.value;

	oP.innerHTML = oTextarea.value;



	if(oUl.childNodes[0])

	{

		oUl.insertBefore(oLi,oUl.childNodes[0]);

	}

	else

	{

		oUl.appendChild(oLi);

	}

	oLi.appendChild(oH3);

	oLi.appendChild(oP);



	oText.value = "";

	oTextarea.value = "";



	var h = oLi.offsetHeight;

	oLi.style.height = '0px';

	

	if(timer)

	{

		clearInterval(timer);

	}

	timer = setInterval("goTime("+h+")", 35);

	goTime(h);

}



function goTime(target)

{

	var top = oLi.offsetHeight;

	speed += 3;

	top += speed;

	

	if(top > target)

	{

		top = target;

		speed *= -0.7;

	}



	if(top===target && Math.abs(speed) < 3)

	{

		clearInterval(timer);

		timer = null;

		oLi.style.height = target + "px";

	}

	oLi.style.height = top + "px";

}

</script>

</head>



<body>



<div id="explain">

	<strong>妙味课堂</strong><a href="http://www.miaov.com">(www.miaov.com)</a>-<strong>模拟妙味课堂留言本</strong> -

	不妨多提交几次留言试试看……

</div>



<div id="box">

    <ul id="fill_in">

        <form>

            <li>姓名：<input id="text" type="text" class="text" /></li>

            <li>内容：<textarea></textarea></li>

            <li><input id="btn" type="submit" value="提交" class="btn" /></li>

        </form>

    </ul>

    <div id="message_text">

        <h2>显示留言</h2>

        <ul></ul>

    </div>

</div>

</body>

</html>

xulili123 2010-11-03

打赏
举报

[Quote=引用 2 楼 cpp2017 的回复:]
1.办法有很多．最常用的一种就是在点回复的时候把当前对象或当前对象的父对象传到方法中,

然后在父对象中追加一个div这里面有些回复框，提交按纽之类的元素

如果你这些不会，你可搜索一下动态创建html元素

2.用ajax提交就可．
[/Quote]

你说的第一种方法我没有做过，也不知道凭自己现在的能力能不能实现，能给个QQ吗，如果在实现的过程中有什么问题，我也可请教你。