用户添加评论小程序

时间：2017-09-23 19:09:05 阅读：227 评论：0 收藏：0 [点我收藏+]
标签：dash local src 提交 letter tno innertext absolute color
这个是偶然打开JS 时，看到了这个界面，然后想加点东西上去，便做了这个小功能
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>网页追加评论</title>
        <style type="text/css">
            #outside {
                width: 1000px;
                margin: 0 auto;
                border: 1px solid #E7EAEE;
                overflow: hidden;
                padding-bottom: 15px;
            }
            
            #outside h3 {
                width: 95%;
                margin: 15px auto;
                padding-bottom: 10px;
                border-bottom: 1px solid #E7EAEE;
                font-family: "宋体", sans-serif;
            }
            
            #outside .comment1 {
                width: 95%;
                margin: 10px auto;
                color: #BBBBBB;
                font-size: 12px;
                border-bottom: 1px dashed #E7EAEE;
                font-family: "宋体", sans-serif;
                position: relative;
            }
            
            #outside .comment1 time {
                float: right;
            }
            
            #outside .comment1 span {
                color: #5979B2;
                margin-left: 5px;
                font-weight: bold;
            }
            
            #outside .comment1 p {
                font-size: 16px;
                color: black;
            }
            
            #zan{
                width: 60px;
                position: absolute;
                right: 65px;
                bottom: 16px;
            }
            
            #zan img {
                width: 16px;
                height: 16px;
                
                position: absolute;
                bottom: 0;
            }
            
            #zan span {
                color: #97D6C0;
                font-size: 12px;
                font-weight: bold;
                
                position: absolute;
                left: 21px;
                bottom: 0;
            }
            
            #comment1 #span11{
                font-size: 12px;
                letter-spacing: 2px;
                color: #BBBBBB;
                cursor: pointer;
                
                position: absolute;
                right: 35px;
                bottom: 17px;
            }
            
            #outside h4 {
                width: 95%;
                margin: 15px auto;
                color: #404E73;
                font-size: 16px;
                font-weight: bold;
                font-family: "宋体", sans-serif;
            }
            
            #outside #addComment {
                width: 95%;
                margin: 0 auto;
                font-size: 12px;
                color: #BBBBBB;
            }
            
            #outside #name {
                width: 200px;
                border: 1px solid #D9E2EF;
            }
            
            #outside #comContent {
                width: 800px;
                height: 100px;
                resize: none;
                border: 1px solid #D9E2EF;
                vertical-align: text-top;
            }
            
            #outside button {
                width: 100px;
                height: 30px;
                background-color: #2D46A3;
                color: white;
                border: hidden;
                float: right;
                margin: 15px 100px;
            }
        </style>
    </head>

    <body>

        <div id="outside">
            <h3>最新平均</h3>

            <div id="comment">
                <div id="comment1" class="comment1">
                    腾讯网友
                    <span>123</span>
                    <time>2010年10月5日 19:21:12</time>
                    <p>
                        123
                    </p>
                    <div id="zan" class="zan1" onclick="test(this)">
                        <img src="img/zanb.png" class="img1"/>
                        <span id="span1"></span>
                        <!--<span id="span11" class="span11">回复</span>-->
                    </div>
                    <span id="span11" class="span11">回复</span>
                </div>
            </div>

            <h4>发表评论</h4>

            <div id="addComment">
                昵&nbsp;&nbsp;&nbsp;&nbsp;称：<input type="text" id="name" />
                <br /><br /> 评论内容:
                <textarea id="comContent"></textarea>

                <button onclick="addComment()">提交评论</button>
            </div>
        </div>

        <script type="text/javascript">
            var id = 1;
            var span1 = document.getElementById("span1");
            

            function addComment() {
                var name = document.getElementById("name").value;
                var comContent = document.getElementById("comContent").value;
                if(name == "" || comContent == "") {
                    alert("用户名和评论内容不可为空!");
                    return;
                }

                
                id++;
                var dates = new Date();
                var year = dates.getFullYear();
                var month = dates.getMonth();
                var date1 = dates.getDate();
                var hours = dates.getHours() < 10 ? "0" + dates.getHours() : dates.getHours();
                var minutes = dates.getMinutes() < 10 ? "0" + dates.getMinutes() : dates.getMinutes();
                var seconds = dates.getSeconds() < 10 ? "0" + dates.getSeconds() : dates.getSeconds();
                
                var comment1 = document.getElementById("comment1");
                var comments = document.getElementById("comment");
                var clone = comment1.cloneNode(true);
                clone.getElementsByTagName("span")[0].innerText = name;
                clone.getElementsByTagName("time")[0].innerText = year + "年" + (month + 1) + "月" + date1 + "日  " + hours + ":" + minutes + ":" + seconds;
                clone.getElementsByTagName("p")[0].innerText = comContent;
                clone.getElementsByTagName("span")[1].setAttribute("id", "span" + id);
                clone.getElementsByTagName("span")[1].innerText = 0;
                clone.getElementsByTagName("img")[0].setAttribute("class", "img" + id);
                clone.getElementsByTagName("img")[0].setAttribute("src", "img/zanb.png");
                clone.getElementsByTagName("img")[0].parentNode.setAttribute("class", "zan" + id);
                
                clone.setAttribute("id", "comment" + id);
                comments.appendChild(clone);

                document.getElementById("name").value = "";
                document.getElementById("comContent").value = "";
            }
            
            //点赞
            var span1 = document.getElementById("span1");
            window.onload = function(){
                span1.innerText = this.localStorage.count?this.localStorage.count:0;
            }
           
            var count=0;
            function test(that){
                count++;
                if(count%2!=0) {
                    that.getElementsByTagName("img")[0].setAttribute("src","img/zanh.png");
                    that.getElementsByTagName("span")[0].innerText = parseInt(that.getElementsByTagName("span")[0].innerText)+1;
                }
                
                else{
                    that.getElementsByTagName("img")[0].setAttribute("src","img/zanb.png");
                    that.getElementsByTagName("span")[0].innerText = parseInt(that.getElementsByTagName("span")[0].innerText)-1;
                }
                
            }
            
        </script>
    </body>

</html>
这个可以动态获取用户评论时间，一个简单的点赞功能
用户添加评论小程序
标签：dash local src 提交 letter tno innertext absolute color
原文地址：http://www.cnblogs.com/HRurl/p/7581806.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行