原生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. freecodecamp挑战

    freecodecamp挑战 2020年3月21初次挑战 完成45关挑战 2020年3月22日 完成至101关 2020年3月23日 完成至144关 2020年3月24日 完成至187关 css结束 ...

  2. Lambda Expressions and Functional Interfaces: Tips and Best Practices

    转载自https://www.baeldung.com/java-8-lambda-expressions-tips 1. Overview   Now that Java 8 has reached ...

  3. PHP小数点后保留位数并四舍五入

    ceil() 函数向上舍入为最接近的整数,进一(k>0).ceil(0.60) --> 1ceil(0.40) --> 1ceil(5) --> 5ceil(5.1) --&g ...

  4. JAVA 之 每日一记 之 算法 （ 长按键入 ）

    题目详解: 你的朋友正在使用键盘输入他的名字 name.偶尔,在键入字符 c 时,按键可能会被长按,而字符可能被输入 1 次或多次. 你将会检查键盘输入的字符 typed.如果它对应的可能是你的朋友的 ...

  5. Structs2的作用是什么？？

    struts2是一种重量级的框架,位于MVC架构中的controller,可以分析出来,它是用于接受页面信息然后通过内部处理,将结果返回. 同时struts2也是一个web层的MVC框架,那么什么是s ...

  6. Redis详解（二）——

    https://www.cnblogs.com/yeya/p/14274948.html https://www.cnblogs.com/liang24/tag/redis/

  7. VS Code 搭建stm32开发环境

    MCU免费开发环境 一般芯片厂家会提供各种开发IDE方案,通常其中就包括其自家的集成IDE,如: 意法半导体 STM32CubeIDE NXP Codewarrior TI CCS 另外也可以用ecl ...

  8. Selenium系列（十八） - Web UI 自动化基础实战（5）

    如果你还想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识, ...

  9. es6语法中promise的使用方法

    Promise是一个构造函数,它有resolve,reject,race等静态方法;它的原型(prototype)上有then,catch方法,因此只要作为Promise的实例,都可以共享并调用Pro ...

  10. 第25篇-虚拟机对象操作指令之putstatic

    之前已经介绍了getstatic与getfield指令的汇编代码执行逻辑,这一篇介绍putstatic指令的执行逻辑,putfield将不再介绍,大家可以自己去研究,相信大家有这个实力. putsta ...