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

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

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>原生JS 实现留言板功能</title>
  6.     <style>
  7.         * {
  8.             padding: 0;
  9.             margin: 0;
  10.         }
  11.         .container {
  12.             width: 1000px;
  13.             max-height: 100vh;
  14.             background: lightgray;
  15.             margin: 0 auto;
  16.         }
  17.         .container .content {
  18.             padding: 20px 20px 0 20px;
  19.             display: flex;
  20.             flex-direction: column;
  21.         }
  22.         .container .message {
  23.             display: flex;
  24.             flex-direction: row;
  25.             justify-content: space-between;
  26.             width: 100%;
  27.             height: 200px;
  28.             align-items: flex-end;
  29.         }
  30.         .container .enterMsg {
  31.             width: 76%;
  32.             height: 180px;
  33.             font-size: 18px;
  34.             padding: 10px 2%;
  35.             line-height: 26px;
  36.         }
  37.         .container .sendMsg {
  38.             width: 15%;
  39.             height: 60px;
  40.             line-height: 60px;
  41.             display: inline-block;
  42.             font-size: 18px;
  43.             cursor: pointer;
  44.             text-align: center;
  45.             background: lightcoral;
  46.             border-radius: 6px;
  47.         }
  48.         .container .msgs {
  49.             margin-top: 20px;
  50.             height: calc(100vh - 270px);
  51.             background: lightyellow;
  52.             overflow: auto;
  53.             border-radius: 6px;
  54.             padding: 10px 2%;
  55.         }
  56.         .container .msgs h3 {
  57.             margin-bottom: 25px;
  58.         }
  59.         .container .msgList {
  60.             max-height: calc(100vh - 380px);
  61.             overflow: auto;
  62.         }
  63.         .container .singleMsg {
  64.             border-bottom: thin solid #ccc;
  65.             padding: 15px 0 15px 0;
  66.             display: flex;
  67.             flex-direction: row;
  68.             justify-content: space-between;
  69.         }
  70.         .container .singleMsg .delete {
  71.             color: #999;
  72.             cursor: pointer;
  73.         }
  74.         .container .singleMsg .delete:hover {
  75.             text-decoration: underline;
  76.         }
  77.         .container .total {
  78.             text-align: right;
  79.             height: 60px;
  80.             line-height: 60px;
  81.         }
  82.     </style>
  83. </head>
  84. <body>
  85.  
  86. <div class="container">
  87.     <div class="content">
  88.         <div class="message">
  89.             <textarea name="msg" id="enterMsg" class="enterMsg" placeholder="请开始你的表演吧......"></textarea>
  90.             <span id="sendMsg" class="sendMsg">留    言</span>
  91.         </div>
  92.         <div class="msgs">
  93.             <h3>留言区</h3>
  94.             <div class="msgList" id="messageList">
  95.                 <div class="singleMsg">
  96.                     <p>一个人静静坐在电脑前写代码，有种武林高手闭关修炼的感觉！</p>
  97.                     <p class="delete">删除</p>
  98.                 </div>
  99.             </div>
  100.             <div class="total">总共有 <span id="votes">1</span>条留言</div>
  101.         </div>
  102.     </div>
  103. </div>
  104.  
  105. <script>
  106.     //设置页面高度，保持一屏显示
  107.     var maxH = document.documentElement.clientHeight;
  108.     var container = document.querySelector('.container');
  109.     container.style.height = maxH + 'px';
  110.  
  111.     //留言
  112.     var enterMsg = document.getElementById('enterMsg');
  113.     var sendMsg = document.getElementById('sendMsg');
  114.     var msgList = document.getElementById('messageList');
  115.     var votes = 0; //统计留言条数
  116.  
  117.     sendMsg.onclick = function(e){
  118.         var msg = enterMsg.value;
  119.         if(msg === ''){
  120.             alert('您还没有输入内容哦！');
  121.             return;
  122.         }
  123.         new createDiv(msg, msgList);
  124.         votes ++;
  125.         enterMsg.value = '';
  126.         //msg = ''; //把enterMsg的value值保存下来后，msg只是一个副本，与enterMsg没有关系
  127.         document.getElementById('votes').innerHTML = votes;
  128.     };
  129.  
  130.     function createDiv(obj, el){
  131.         this.div = document.createElement('div');
  132.         this.div.className = 'singleMsg';
  133.         this.p1 = document.createElement('p');
  134.         this.p1.innerHTML = obj;
  135.         this.p2 = document.createElement('p');
  136.         this.p2.className = 'delete';
  137.         this.p2.innerHTML = '删除';
  138.         this.div.appendChild(this.p1);
  139.         this.div.appendChild(this.p2);
  140.         el.insertBefore(this.div, el.childNodes[0]);
  141.  
  142.         var that = this;
  143.         this.p2.onclick = function(){
  144.             that.div.remove();
  145.             if(votes <= 0){
  146.                 votes = 0;
  147.             }
  148.             votes --;
  149.             document.getElementById('votes').innerHTML = votes;
  150.         };
  151.     }
  152. </script>
  153.  
  154. </body>
  155. </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. Oracle基本用法（一）

    一.简介 数据库:Oracle数据库的概念和其他数据库不一样,这里的数据库是一个操作系统只有一个库,可以看做Oracle就是一个大的数据库. 实例:一个Oracle实例有一系列的后台进程和内存结构组成 ...

  2. ArcGIS地形分析--TIN及DEM的生成，TIN的显示

    DEM是对地形地貌的一种离散的数字表达,是对地面特性进行空间描述的一种数字方法.途径,它的应用可遍及整个地学领域.通过对本次实习的学习,我们应加深对TIN建立过程的原理.方法的认识:熟练掌握ArcGI ...

  3. SpringBoot 优雅配置跨域多种方式及Spring Security跨域访问配置的坑

    前言 最近在做项目的时候,基于前后端分离的权限管理系统,后台使用 Spring Security 作为权限控制管理, 然后在前端接口访问时候涉及到跨域,但我怎么配置跨域也没有生效,这里有一个坑,在使用 ...

  4. Spring源码浅析之bean实例的创建过程(二)

    在上一篇内容中,介绍了doGetBean方法的源码内容,知道了bean在创建的过程中,有三个范围,单例.多例.Scope,里面都使用到了createBean.下面本篇文章的主要内容,就是围绕creat ...

  5. mysql绕过root密码登录

    绕过密码登录步骤: 一.Mysql8.0之前: 关闭服务 执行参数:mysqld --skip-grant-tables 新开窗口执行mysql,即可进入mysql 二.Mysql8.0之前: 关闭服 ...

  6. TOMCAT WEB请求乱码

    post乱码: 原因: ​ 对于POST方式,它采用的编码是由页面来决定的即ContentType("text/html; charset=GBK").当通过点击页面的submit ...

  7. Mysql常用sql语句（15）- cross join 交叉连接

    测试必备的Mysql常用sql语句 https://www.cnblogs.com/poloyy/category/1683347.html 前言 交叉连接就是求多表之间的笛卡尔积 讲道理..这个我都 ...

  8. Git 系列教程（11）- 分支简介

    前言 很多版本控制系统都有分支这个概念 使用分支意味着可以将日常工作从主线上脱离,从而避免影响主线 Git 鼓励在工作流程中频繁使用分支和合并 Git 是如何保存数据的 Git 保存的不是文件的变化或 ...

  9. C# Dapper基本三层架构使用 （一、架构关系）

    Dapper是一款轻量级ORM工具.如果你在小的项目中,使用Entity Framework.NHibernate 来处理大数据访问及关系映射,未免有点杀鸡用牛刀.你又觉得ORM省时省力,这时Dapp ...

  10. Vue设置全局js/css样式

    ''' 配置全局js mian.js: import settings from '@/assets/js/settings' Vue.prototype.$settings = settings; ...