动态添加评论 

<style type="text/css">
body { margin:0; padding:0; font-size:12px; line-height:25px; font-family:宋体; }
h1,h2,h4,dl,dt,dd { margin:0; padding:0; }
img { border:none; }
.wrap { width:960px; margin:0 auto; }
h1 { line-height:60px; font-size:28px; text-align:center; }
#header { border-bottom:1px solid #e1e1e1; padding:10px 0; }
#main { float:left; width:650px; background:#fbfcff; border:1px solid #c3ccd5; }
#side { float:right; width:295px; background:#f3f8fe; border:1px solid #dee3e9; }
#main .top { line-height:28px; padding:5px; background:#fff; border-bottom:1px solid #c3ccd5; }
#main .top img { vertical-align:middle; }
#main .top span { margin-left:10px; color:#313330; }
#main .top span strong { color:#cc0100; padding:0 2px; }
#main h2 { margin:0 10px; padding:0 10px; font-size:16px; line-height:35px; border-bottom:1px solid #c3ccd5; }
#commentList { margin:0 10px; }
#commentList dl { padding:10px; border-bottom:1px dashed #c1c4bd; }
#commentList dl dt { color:#8d8d8b; }
#commentList dl dt .author { color:#0c3b89; margin:0 5px; }
#commentList dl dt .time { float:right; }
#commentList dl dd { font-size:14px; }
#reply { margin:10px 20px; }
#reply h4 { font-size:14px; color:#1e2c5b; line-height:40px; }
#reply dl { line-height:34px; }
#reply dl dt { float:left; clear:left; width:60px; }
#reply dl dd span { color:#666; margin:0 10px; }
#reply dl dd { margin-left:60px; }
#reply dl input, #reply dl textarea { border:1px solid #a3b6d4; margin:6px 0; vertical-align:middle; }
#reply dl .input-text { width:150px; }
#reply dl textarea { width:545px; height:80px; overflow:hidden; }
#reply dl dd.button { text-align:right; }
#reply dl dd.button input { background:url(images/button_save.gif); width:82px; height:23px; border:none; color:#fff; cursor:pointer; }
#reply dl dd.button .btnover { background:url(images/button_save_over.gif); }
</style>
<script type="text/javascript">
function CommentSave()
{
    var commentList = document.getElementById("commentList");
    var nick = document.getElementById("nick");
    var content = document.getElementById("content");
    
    if(nick.value == "" || content.value == "") return false;
    // 创建基本标签
    var _dl = document.createElement("dl");
    var _dt = document.createElement("dt");
    var _dd = document.createElement("dd");
    var _span = document.createElement("span");
    // 创建当前时间标签
    var _span_time = _span.cloneNode();
    _span_time.className = "time";
    _span_time.appendChild(document.createTextNode(getTimeString()));
    // 创建评论作者标签
    _span_author = _span.cloneNode();
    _span_author.className = "author";
    _span_author.appendChild(document.createTextNode(nick.value));
    // 将标签及文字附加到dt、dd内
    _dt.appendChild(_span_time);
    _dt.appendChild(document.createTextNode("腾讯网友"));
    _dt.appendChild(_span_author);
    _dd.appendChild(document.createTextNode(content.value));
    // 将dt、dd添加到dl
    _dl.appendChild(_dt);
    _dl.appendChild(_dd);
    // 将dl添加到list
    commentList.appendChild(_dl);
    // 清空原内容
    nick.value = "";
    content.value = "";
    // 更改评论条数
    var num = parseInt(document.getElementById("commentNum").innerHTML);
    num++;
    document.getElementById("commentNum").innerHTML = num;
}

function getTimeString()
{
    // 取得当前时间
    var now = new Date();
    return now.getYear() + "年" + (now.getMonth() + 1) + "月" + (now.getDate() + 1) + "日 " + (now.getHours() + 1) + ":" + (now.getMinutes() + 1) + ":" + (now.getSeconds() + 1);
}
</script>
</head>

<body>
<div id="header">
    <div class="wrap">
        <img src="images/logo.gif" />
    </div>
</div>
<h1>王琳：“公务员热”背后的正常与不正常</h1>
<div class="wrap">
    <div id="main">
        <div class="top">
            <a href="#comment"><img src="images/button_comment.gif" /></a><span>（评论<strong id="commentNum">1</strong>条）</span>
        </div>
        <h2>最新评论</h2>
        <div id="commentList">
            <dl>
                <dt>
                    <span class="time">2010年11月5日 19:26:11</span>
                    腾讯网友<span class="author">杨二郎</span>
                </dt>
                <dd>公务员好啊，可以为人民服务。</dd>
            </dl>
        </div>
        <a name="comment"></a>
        <div id="reply">
            <h4>发表评论</h4>
            <dl>
                <dt>昵　　称：</dt>
                <dd><input id="nick" class="input-text" type="text" /><span>文明上网，理性发言</span></dd>
                <dt>评论内容：</dt>
                <dd><textarea id="content"></textarea></dd>
                <dt></dt>
                <dd class="button"><input type="button" value="发表评论" onclick="CommentSave()" onmouseover="this.className='btnover'" onmouseout="this.className=''" /></dd>
            </dl>
        </div>
    </div>
    <div id="side">
        
    </div>
</div>
</body>

 

posted @ 2013-11-16 15:51  914556495  阅读(231)  评论(0)    收藏  举报