原生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. 如何用Mybatis逆向工程实现分页查询（更改生成的Example）

    如何用Mybatis逆向工程实现分页查询  一个很简单的方法,如果要mysql实现分页查询的话,执行下述语句即可 select * from table limit (offset)5,(limit) ...

  2. Spring第一课：配置文件及IOC引入（一）

    Spring最核心的特点就是控制反转:(IOC)和面向切面(AOP) 首先作为一个Spring的项目需要导入的四个核心包,一个依赖: 四核心:core.context.beans.expression ...

  3. Promise.resolve（）与Promise

    //Promise.resolve()和Promise.reject()常用来生成已经被决议为失败或者成功的promise案例 //Promise.reject()简单一些,不管传给它什么值,它决议为 ...

  4. Ubuntu下安装Python3（与旧Python2版本共存）

    官网下载Python3的源码 进行配置,在源码目录运行如下命令. ./configure --prefix=/usr/local/python3 --enable-shared 进行编译,在源码目录运 ...

  5. ubuntu apt-get Failed to fetch Temporary failure resolving 'security.ubuntu.com'

    发现是因为代理设置原因,导致无法上网,设置代理后问题解决. System Setting -> Network -> Network Proxy -> input IP+Port - ...

  6. Pytest 系列（29）- 详解 allure.dynamic 动态生成功能

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 前言 @allure.title  ...

  7. Mysql常用sql语句（5）- as 设置别名

    测试必备的Mysql常用sql语句系列 https://www.cnblogs.com/poloyy/category/1683347.html 需要注意,创建数据库和创建表的语句博文都在前面哦 整个 ...

  8. 异步处理方式之信号（三）：kill、raise、alarm、pause函数简介

    文章目录 6. 函数kill和raise 7. 函数alarm和pause 7.1 alarm() 7.2 pause() 6. 函数kill和raise kill函数用来将信号发送给进程或者进程组. ...

  9. 使用AOP+自定义注解完成spring boot的接口权限校验

    记使用AOP+自定义注解完成接口的权限校验,代码如下: pom文件添加所需依赖: 1 <dependency> 2 <groupId>org.aspectj</group ...

  10. （2）java Spring Cloud+Spring boot+mybatis企业快速开发架构之SpringCloud-Spring Cloud是什么？Spring Cloud版本介绍

    ​ Spring Cloud 是一系列框架的有序集合.它利用 Spring Boot 的开发便利性,巧妙地简化了分布式系统基础设施的开发,如服务注册.服务发现.配置中心.消息总线.负载均衡.断路器.数 ...