用户添加评论小程序

这个是偶然打开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>

这个可以动态获取用户评论时间，一个简单的点赞功能

时间： 2024-11-08 01:13:23

用户添加评论小程序的相关文章

【微信小程序】用户首次进入小程序拒绝授权，如何再次调用授权页面，获取用户信息userInfo

前言:微信小程序的app.js里面,最少有2个接口,一个wx.login:一个是wx.getUserInfo: 前者得到腾讯给我们的微信用户唯一的code,通过code获取openid,这个不需要用户授权,我们肯定能得到: 但是,后者是需要用户授权,我们才能通过腾讯得到用户的其他信息,比如nickname.avatarUrl.encryptedData.iv等,如果你只需要openid,下面的代码你可以不用看了,下面重点讲解如何多次调用wx.getUserInfo或者app.getUserIn

群用户通过微信小程序可以更好地协作了

今天,小程序向开发者开放了群ID的接口能力.简单地说,就是当你把小程序分享在群聊中,被点击后开发者可获取群ID和群名称,也方便更好地针对群场景提供个性化服务.不同的群有各自的群ID,那么这个新能力开发者该怎么使用? 群用户间可以更好地协作大家都知道,小程序可以方便地在群聊中分享,但开发者难以识别不同用户的点击路径. 现在,通过最新的接口能力,开发者可以通过群ID判断用户是否来自同一个微信群,同一个群内的用户之间可以更好地使用小程序进行协作,例如共同编辑文档.协同合作.共同点餐等等. 提供更个性化

微信小程序用户身份-微信小程序前端开发工具

一个团队进行小程序的开发,那么团队成员的身份管理是很有必要的. 管理员可在小程序管理后台统一管理项目成员(包括开发者.体验者及其他成员).设置项目成员的权限,包括:开发者/体验者权限.登录小程序管理后台.开发管理.查看小程序数据分析等. 管理入口位于:小程序管理后台 - 用户身份 – 成员管理权限说明开发者权限可使用小程序开发者工具及开发版小程序进行开发体验者权限可使用体验版小程序登录可登录小程序管理后台,无需管理员确认数据分析使用小程序数据分析功能查看小程序数据开发管理

用python3血一个输入用户信息的小程序

今天写一个输入信息的小程序,信息包括用户姓名,key,电话号码,最后形成一个表格的形式 1 s='' 2 while True: 3 temp='{0}\t{1}\t{0}\n' 4 v1=input('name:') 5 v2=input('key:') 6 v3=input('phone:') 7 v=temp.format(v1,v2,v3) 8 s += v 9 Q = input("Enter q to quit the pro!") 10 if Q.lower() == '

添加按钮\小程序查看器.java

//<applet code=ButtonApplet.class width=400 height=300></applet> import java.awt.*;import java.applet.*; public class ButtonApplet extends Applet { int x,y; Button Bt; public ButtonApplet()//加入按钮 { x=y=100;

用户登录验证小程序~

db ={} def newuser(): prompt = 'login desired:' while True: name = raw_input(prompt) if db.has_key(name): prompt = 'name taken,try another.' continue else: break pwd = raw_input('passwd:') db[name] = pwd def olduser(): name = raw_input('login') pwd =

分享为小程序添加自动回复消息的5种方法！自动客服功能的微信小程序

如何通过小程序客服消息引导自动关注公众号? 小程序客服自动回复一个图文链接? 小程序客服可以发小程序卡片吗? 小程序客服能像公众号一样设置关键词回复吗? 收到消息时自动回复? 微信小程序新手如何默认自动回复功能如果你遇到以上问题,请往下看!教大家实现微信小程序客服自动回复消息功能,以帮助我们更好地与客户进行互动. 当我们的小程序接入客服,在小程序前端增加一个客服按钮,用户可以点击按钮主动和我们的客服互动! 但是有个问题,消息那么多,如何才能接待的过来,能否想微信公众号一样自动回复,关键词回复,

小程序开发另类小技巧 --用户授权篇

本文主要帮助大家解决部分功能接口二次授权+统一管理(包含对于wx对象的扩展)问题,例如获取地理位置信息,收获地址,录音等授权问题小程序开发另类小技巧 --用户授权篇 getUserInfo较为特殊,不包含在本文范围内,主要针对需要授权的功能性api,例如:wx.startRecord,wx.saveImageToPhotosAlbum, wx.getLocation 原文地址:https://www.yuque.com/jinxuanzheng/gvhmm5/arexcn 仓库地址:https

第一个小程序：用户登录

看视频跟老师学Python,第一天的视频听的迷迷糊糊,最后老师的作业是自己写一个用户登录的小程序,在百般苦恼了好长时间以后还是反复看视频跟着老师做了出来. 一.作业及要求: 1.写一个用户登录的小程序: 2.要求已经存储用户名和密码的用户可以登录: 3.用户登录尝试次数为三次: 4.尝试超限后锁定该用户: 二.思路及知识点: 1.用户名和密码存储在account.txt文件里面: 2.锁定用户存储在lock.txt文件里面; 3.使用循环限制尝试次数: 4.使用if判断用户输入是否正确: 5.需