原生JS实现简单留言板功能，实现技术：css flex，原生JS。

　　因为主要是为了练手js，所以其中布局上的一些细节并未做处理。

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>原生JS 实现留言板功能</title>

    <style>

        * {

            padding: 0;

            margin: 0;

        }

        .container {

            width: 1000px;

            max-height: 100vh;

            background: lightgray;

            margin: 0 auto;

        }

        .container .content {

            padding: 20px 20px 0 20px;

            display: flex;

            flex-direction: column;

        }

        .container .message {

            display: flex;

            flex-direction: row;

            justify-content: space-between;

            width: 100%;

            height: 200px;

            align-items: flex-end;

        }

        .container .enterMsg {

            width: 76%;

            height: 180px;

            font-size: 18px;

            padding: 10px 2%;

            line-height: 26px;

        }

        .container .sendMsg {

            width: 15%;

            height: 60px;

            line-height: 60px;

            display: inline-block;

            font-size: 18px;

            cursor: pointer;

            text-align: center;

            background: lightcoral;

            border-radius: 6px;

        }

        .container .msgs {

            margin-top: 20px;

            height: calc(100vh - 270px);

            background: lightyellow;

            overflow: auto;

            border-radius: 6px;

            padding: 10px 2%;

        }

        .container .msgs h3 {

            margin-bottom: 25px;

        }

        .container .msgList {

            max-height: calc(100vh - 380px);

            overflow: auto;

        }

        .container .singleMsg {

            border-bottom: thin solid #ccc;

            padding: 15px 0 15px 0;

            display: flex;

            flex-direction: row;

            justify-content: space-between;

        }

        .container .singleMsg .delete {

            color: #999;

            cursor: pointer;

        }

        .container .singleMsg .delete:hover {

            text-decoration: underline;

        }

        .container .total {

            text-align: right;

            height: 60px;

            line-height: 60px;

        }

    </style>

</head>

<body>

<div class="container">

    <div class="content">

        <div class="message">

            <textarea name="msg" id="enterMsg" class="enterMsg" placeholder="请开始你的表演吧......"></textarea>

            <span id="sendMsg" class="sendMsg">留    言</span>

        </div>

        <div class="msgs">

            <h3>留言区</h3>

            <div class="msgList" id="messageList">

                <div class="singleMsg">

                    <p>一个人静静坐在电脑前写代码，有种武林高手闭关修炼的感觉！</p>

                    <p class="delete">删除</p>

                </div>

            </div>

            <div class="total">总共有 <span id="votes">1</span>条留言</div>

        </div>

    </div>

</div>

<script>

    //设置页面高度，保持一屏显示

    var maxH = document.documentElement.clientHeight;

    var container = document.querySelector('.container');

    container.style.height = maxH + 'px';

    //留言

    var enterMsg = document.getElementById('enterMsg');

    var sendMsg = document.getElementById('sendMsg');

    var msgList = document.getElementById('messageList');

    var votes = 0; //统计留言条数

    sendMsg.onclick = function(e){

        var msg = enterMsg.value;

        if(msg === ''){

            alert('您还没有输入内容哦！');

            return;

        }

        new createDiv(msg, msgList);

        votes ++;

        enterMsg.value = '';

        //msg = ''; //把enterMsg的value值保存下来后，msg只是一个副本，与enterMsg没有关系

        document.getElementById('votes').innerHTML = votes;

    };

    function createDiv(obj, el){

        this.div = document.createElement('div');

        this.div.className = 'singleMsg';

        this.p1 = document.createElement('p');

        this.p1.innerHTML = obj;

        this.p2 = document.createElement('p');

        this.p2.className = 'delete';

        this.p2.innerHTML = '删除';

        this.div.appendChild(this.p1);

        this.div.appendChild(this.p2);

        el.insertBefore(this.div, el.childNodes[0]);

        var that = this;

        this.p2.onclick = function(){

            that.div.remove();

            if(votes <= 0){

                votes = 0;

            }

            votes --;

            document.getElementById('votes').innerHTML = votes;

        };

    }

</script>

</body>

</html>

原生JS实现简单留言板功能的更多相关文章

  1. js 实现简易留言板功能

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

  2. JS原生编写实现留言板功能

    实现这个留言板功能比较简单,所以先上效果图: 实现用户留言内容,留言具体时间. <script> window.onload = function(){ var oMessageBox = ...

  3. 原生node实现简易留言板

    原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...

  4. Web开发从零单排之二：在自制电子请帖中添加留言板功能,SAE+PHP+MySql

    在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...

  5. php实现留言板功能

    这个小小的留言板功能适合班级内或者公司内部之间的讨论,对话和留言,非常的方便,更重要的是无需网络,对于公司管理层来说是非常乐于常见的, 下面是这个留言板的写法: 1 首先是登录页面: <form ...

  6. 使用PHP连接数据库实现留言板功能

    PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html>    <head>        <meta charset=&qu ...

  7. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  8. jsp中运用application实现共享留言板功能

    jsp中application的知识点总结: 1.一个Web应用程序启动后,将会自动创建一个application对象,在整个应用程序的运行过程中只有这一个application对象,即所有访问该网站 ...

  9. 利用反馈字段给帝国cms添加留言板功能（图文教程）

    帝国cms的插件中提供信息反馈字段,很多人却不会用.这里谢寒教大家如何来给自己的帝国cms网站添加留言板功能 1.找到添加地址 2.添加字段 3.你可以在字段中添加多种字段类型(有文本域,单行文本框, ...

随机推荐

  1. 并发编程之：Atomic

    大家好,我是小黑,一个在互联网苟且偷生的农民工. 在开始讲今天的内容之前,先问一个问题,使用int类型做加减操作是不是线程安全的呢?比如 i++ ,++i,i=i+1这样的操作在并发情况下是否会有问题 ...

  2. js调试之firbug

    说下几种方法吧: 1.用alert 这个最最直观 把你想要的内容弹出来给你看,但是要看哪里 就要在哪里加,比较麻烦 2.用firefox 或者chrome浏览器 里面有debug工具的 3.如果想用i ...

  3. sublime text 3 中文排序插件

    ST3 的排序不支持中文按拼音排序,所以需要搞一个插件来支持这一特性 pypinyin 这个库可以把中文转成拼音,可惜不支持 python3.3,而 ST3 内置的 python 就是 3.3 我系统 ...

  4. Java最大栈深度有多大？-从一道面试题开始学习JVM

    一.问题:Java最大支持栈深度有多大? 1.分析 有JVM的内存结构我们可知: 随着线程栈的大小越大,能够支持越多的方法调用,也即是能够存储更多的栈帧: 局部变量表内容越多,那么栈帧就越大,栈深度就 ...

  5. TCP可靠传输原理

    停止等待协议 "停止等待"就是发送方在发送完一个分组后停止发送,等待接收方的确认后再继续发送. 超时重传 发送方在等待一定时间后如果还没有收到接收方的确认,此时发送方将认定分组没有 ...

  6. MacOS开启PPTP协议

    ​ 开启PPTP协议: Mac OS X 系统默认开启了完整性保护(System Intregrity Protection,SIP),所以即使是root帐户也无法修改系统目录中的文件.如果需要修改受 ...

  7. JS001. antd vue遍历setFieldsValue表单键值对无效 ( {} -> new Object() )

    问题代码: const tempFieldsValue = this.form.getFieldsValue() Object.keys(tempFieldsValue).map((k) => ...

  8. 硕盟SM-T54| TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞

    硕盟SM-T54是一款 TYPE C转HDMI+VGA+USB3.0+PD3.0四合一多功能扩展坞,支持四口同时使用,您可以将含有USB 3.1协议的电脑主机,通过此产品连接到具有HDMI或VGA的显 ...

  9. 恶意软件开发——突破SESSION 0 隔离的远线程注入

    一.前言 在Windows XP,Windows Server 2003以及更早的版本中,第一个登录的用户以及Windows的所有服务都运行在Session 0上,这样的做法导致用户使用的应用程序可能 ...

  10. IO流实现GBK写入文件然后转换UTF-8

    public static void main(String[] args) throws IOException { File file = new File("olol\\a.txt&q ...