原生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. Linux基础——用户和用户组

    Linux基础--用户和用户组 一.用户和用户组 用户在/etc/passwd中 用户组在/etc/group/中注意:在创建用户时,系统默认生成一个用户组(组名和用户名一致) 1.用户 1.1查看用 ...

  2. Asp.NetCore3.1 WebApi 获取配置json文件中的数据

    下面只是做一个简单的测试: 1:定义好appsetting.Json文件的配置信息如下: { "Logging": { "LogLevel": { " ...

  3. 用C++实现的增强Euler筛法程序

    运行示例 PS H:\Read\num\x64\Release> .\eulerSievePro EulerSievePro: a method to find out all primes b ...

  4. Linux常用命令（一）之文件处理命令

    分时的多用户.多任务的操作系统 多数的网络协议的支持(unix和tcp/ip协议是同时发展起来的),方便的远程管理(可以通过图形.命令行) 强大的内存管理和文件管理系统 大量的可用软件和免费软件(游戏 ...

  5. Git入门配置

    1.账户注册: 无论是GitHub还是码云(下称Gitee),要使用他们,我们都需要先注册账户,已有账户的可以跳过此步骤. Gitee GitHub 2.创建仓库: a.创建远程仓库 登入Gitee后 ...

  6. Python安装环境配置和多版本共存

    Python安装环境配置和多版本共存 1.环境变量配置: (1) 右键点击"计算机",然后点击"属性" (2) 然后点击"高级系统设置" ( ...

  7. 从源码角度分析 MyBatis 工作原理

    一.MyBatis 完整示例 这里,我将以一个入门级的示例来演示 MyBatis 是如何工作的. 注:本文后面章节中的原理.源码部分也将基于这个示例来进行讲解.完整示例源码地址 1.1. 数据库准备 ...

  8. java IO操作，看完你应该就清晰了。

    前言: java中IO里的一些知识对于一个java新手来说,是比较难理解的.因为里面存在一些很绕的概念,比如: 1.到底是读入写出,还是读出写入: 2.我要将一个文件的内容拷贝到另一个文件是先用Inp ...

  9. Vuex的同步异步存值取值

    1. vue中各个组件之间传值 1.父子组件 父组件-->子组件,通过子组件的自定义属性:props 子组件-->父组件,通过自定义事件:this.$emit('事件名',参数1,参数2, ...

  10. Asp.Net 5上传文件 (Core API方式)

    参考文档 首先在控制器中注入IWebHostEnvironment IWebHostEnvironment提供有关正在运行应用程序的Web托管环境的信息. 属于命名空间Microsoft.AspNet ...