zoukankan      html  css  js  c++  java
  • 模仿贴吧评论系统

    刚开始看到这个的时候感觉非常神奇哈哈

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    margin: 0;
    padding: 0;
    }
    #div1{
    500px;
    border: 1px solid;
    margin: 10px;
    }
    #topic{
    text-indent: 70px;
    font-size: 22px;
    padding: 20px 0;
    border-bottom: 2px solid grey;
    }
    #response{
    text-align: right;
    padding: 5px;
    }
    .txtArea{
    480px;
    margin: 0 auto;
    }
    textarea{
    480px;
    }
    button{
    margin-left: 460px;
    margin-bottom: 5px;
    }
    #commentForm{
    margin-top: 10px;
    display: none;
    }
    </style>
    </head>
    <body>
    <div id="div1">
    <div>老师说:</div>
    <div id="topic">今天考试客户端</div>
    <div id="response"><a href="#" id="responseBtn">回复</a></div>
    <form action="" id="commentForm">
    <div class="txtArea"><textarea name="" id="comment" cols="30" rows="10"></textarea></div>
    <div><button id="commentBtn">评论</button></div>
    </form>
    </div>
    <script>
    var div1 = document.getElementById("div1");
    var responseBtn = document.getElementById("responseBtn");
    var response = document.getElementById("response");
    var commentForm = document.getElementById("commentForm");
    var commentBtn = document.getElementById("commentBtn");
    var comment = document.getElementById("comment");
    var topic = document.getElementById("topic");
    responseBtn.addEventListener("click",function(){
    commentForm.style.display = "block";
    })
    commentBtn.addEventListener("mousedown",function(){
    var commentItem = document.createElement("div");
    commentItem.style.padding = "10px 0";
    commentItem.style.borderBottom = "2px solid grey";
    commentItem.innerHTML = "&nbsp;"+comment.value;
    div1.insertBefore(commentItem,response);
    commentForm.style.display = "none";
    response.style.display = "block";
    comment.value = "";
    })
    </script>
    </body>
    </html>
  • 相关阅读:
    数组和切片
    if else,for循环,switch语句
    数据库介绍以及MySQL数据库的使用
    Django Rest Framwork的认证组件 权限组件以及频率组件
    Django Rest Frawwork框架的CBV FBV分析
    事务介绍
    celery介绍
    多道技术 进程 线程 协程 GIL锁 同步异步 高并发的解决方案 生产者消费者模型
    win10安装mysql8.0版本
    安装VMware Tools的注意事项
  • 原文地址:https://www.cnblogs.com/zhubaixue/p/6623893.html
Copyright © 2011-2022 走看看