原生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. STM32+Air202+Air530+HXDZ-30102-ACC心率血氧GPS采集上传到阿里云

    所有资料都在QQ群1121445919 主要功能 HXDZ-30102-ACC采集心率血氧数据 STM32通过串口将数据转发到air202模块 air202将数据上传到阿里云平台进行展示与处理 整合合 ...

  2. [SWMM]出现问题及解决

    1,节点顺序 [错误]:如下图,在SWMM软件中普通节点到出水口的连接线不能正常连接,提示找不到出水口节点,但在inp文件中是存在的! [解决]:需要先写入点节点再写入线节点,即先写入[JUNCTIO ...

  3. IDEA不自动提示仓库中有的包maven

  4. 从拟阵基础到 Shannon 开关游戏

    从拟阵基础到 Shannon 开关游戏 本文中的定理名称翻译都有可能不准确!如果有找到错误的同学一定要联系我! 本文长期征集比较好的例题,如果有比较典型的题可以联系我 目录 从拟阵基础到 Shanno ...

  5. Python 3.10 is coming！

    看看Python 官网的文档 whatsnew,Python 3.10 已然距离我们越来越近了,然我们看看 Python 3.10 相较于 Python 3.9 有哪些改变吧 新特性 通过括号来组织多 ...

  6. ES6 class——name属性与new.target属性

    name属性与new.target属性 name属性: 1.类.name,输出的是类的名字. 2.如果是在类表达式中,类有名字,那么输出结果是类的名字:类没有名字的话,那么输出结果会是表达式中变量或者 ...

  7. Java线程池工作原理

    前言 当项目中有频繁创建线程的场景时,往往会用到线程池来提高效率.所以,线程池在项目开发过程中的出场率是很高的. 那线程池是怎么工作的呢?它什么时候创建线程对象,如何保证线程安全... 什么时候创建线 ...

  8. 关于Quartus构建nios软核以及eclipse建立c语言工程以及成功下载到FPGA芯片过程遇到的各种问题以及解决方法详解

    这不是一篇构建nios的教程,而是遇到的各种问题以及解决方法.至于构建教程,网上一大把,我推荐正点原子的FPGA教程,比较新,比较详细,通俗易懂!!! 这里以一个点亮LED灯的Nios软核为例,很明显 ...

  9. Python之sqlite3模块

    python自带有sqlite3模块,该模块可以方便我们操作sqlite数据库,下面一起跟随示例了解sqlite3模块的具体用法. import sqlite3 # 连接数据库 connection ...

  10. 哲学家就餐问题-Java语言实现死锁避免

    哲学家就餐问题-Java语言实现死锁避免 我死锁预防是至少破坏死锁产生的四个必要条件之一,带来的问题就是系统资源利用率低且不符合开发习惯,而死锁避免不是事先釆取某种限制措施破坏死锁的必要条件,只是注意 ...