<!DOCTYPE html>
  <html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  .wrap {
  width: 400px;
  margin: 30px auto;
  }
  textarea {
  display: block;
  width: 100%;
  height: 60px;
  }
  input {
  display: block;
  width: 60%;
  margin: 15px auto;
  }
  li {
  padding: 5px 10px;
  position: relative;
  word-break: break-all;
  }
  .red {
  color: #000;
  background: #f1f1f1;
  }
  .pink {
  color: #000;
  background: #ccc;
  }
  a {
  position: absolute;
  right: 0;
  top: -20px;
  background: yellow;
  color: #fff;
  }
  #list {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 14px/26px "宋体";
  }
  .clos {
  position: absolute;
  top: 0;
  right: -50px;
  width: 50px;
  color: #fff;
  background: #000;
  padding: 5px 0;
  text-decoration: none;
  text-align: center;
  }
  .clos:hover {
   
  }
  </style>
  <script type="text/javascript">
  window.onload = function(){
  var btn = document.querySelector('input');
  var text = document.querySelector('textarea');
  var list = document.querySelector('#list');
  var colors = ["red","pink"];
  var nub = 0;
  btn.onclick = function(){
  if(text.value.trim() == ""){
  alert("输入内容不能为空");
  return false;
  }
  var li = document.createElement("li");
  li.innerHTML = text.value;
  // li.className = colors[nub%colors.length];
  /* 判断a标签已经被添加，就让a标签显示出来，否则就添加 */
  if(list.children[0]&&list.children[0].className=="red"){
  li.className = "pink";
  } else {
  li.className = "red";
  }
  var a = null;
  li.onmouseover = function(){
  if(a) {
  a.style.display = "block";
  } else {
  a = document.createElement("a");
  a.href = "javascript:;";
  a.className = "clos";
  a.innerHTML = "删除";
  a.onclick = function (){
  list.removeChild(this.parentNode);
  };
  this.appendChild(a);
  }
  };
  li.onmouseout = function(){
  a.style.display = "none";
  };
  list.insertBefore(li,list.children[0]);
  text.value = "";
  nub++;
  };
  };
  </script>
  </head>
  <body>
  <div>
  <div class="wrap">
  <textarea id="text"></textarea>
  <input type="button" value="留言">
  <ul id="list"></ul>
  </div>
  </body>
  </html>
   

js简易留言板的更多相关文章

  1. DOM操作相关案例 模态对话框,简易留言板,js模拟选择器hover,tab选项卡,购物车案例

    1.模态框案例 需求: 打开网页时有一个普通的按钮,点击当前按钮显示一个背景图,中心并弹出一个弹出框,点击X的时候会关闭当前的模态框 代码如下: <!DOCTYPE html> <h ...

  2. 原生node实现简易留言板

    原生node实现简易留言板 学习node,实现一个简单的留言板小demo 1. 使用模块 http模块 创建服务 fs模块 操作读取文件 url模块 便于path操作并读取表单提交数据 art-tem ...

  3. php实现简易留言板效果

    首先是Index页面效果图 index.php <?php header('content-type:text/html;charset=utf-8'); date_default_timezo ...

  4. JSP简易留言板

    写在前面 在上篇博文JSP内置对象中介绍JSP的9个内置对象的含义和常用方法,但都是比较理论的知识.今天为大家带来一个小应用,用application制作的简易留言板. 包括三个功能模块:留言提交.留 ...

  5. Flask学习之旅--简易留言板

    一.写在前面 正所谓“纸上得来终觉浅,方知此事要躬行”,在看文档和视频之余,我觉得还是要动手做点什么东西才能更好地学习吧,毕竟有些东西光看文档真的难以理解,于是就试着使用Flask框架做了一个简易留言 ...

  6. 微信小程序实现简易留言板

    微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是H ...

  7. js制作留言板

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. js 实现简易留言板功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. vue实现简易留言板

    首先引入vue.js <script src="vue.js"></script> 布局 <div id="div"> &l ...

随机推荐

  1. Objective-C 小记（10）__weak

    本文使用的 runtime 版本为 objc4-706. __weak 修饰的指针最重要的特性是其指向的对象销毁后,会自动置为 nil,这个特性的实现完全是依靠运行时的.实现思路是非常简单的,对于下面 ...

  2. Debian9.5 系统配置FTP

    FTP 是File Transfer Protocol(文件传输协议)的英文简称,而中文简称为“文传协议”.用于Internet上的控制文件的双向传输.同时,它也是一个应用程序(Application ...

  3. 【转载】GitHub详细教程

    1 Git详细教程   1.1 Git简介   1.1.1 Git是何方神圣?   Git是用C语言开发的分布版本控制系统.版本控制系统可以保留一个文件集合的历史记录,并能回滚文件集合到另一个状态(历 ...

  4. 解析XML文件之使用DOM解析器

    在前面的文章中.介绍了使用SAX解析器对XML文件进行解析.SAX解析器的长处就是占用内存小.这篇文章主要介绍使用DOM解析器对XML文件进行解析. DOM解析器的长处可能是理解起来比較的直观,当然, ...

  5. rac重新启动遭遇ORA-01078、ORA-01565、ORA-17503、ORA-12547

    今天測试环境server重新启动导致一个节点集群无法重新启动,遭遇ORA-12547错误.详细例如以下: server重新启动后,rac1集群无法启动,rac2正常启动: [root@rac1 ~]# ...

  6. PostgreSQL数据库创建/删除

    方法1 - 系统命令 sudo su - postgres #切换到postgres用户(系统用户) createdb weichen #创建数据库 psql #直接訪问数据库(默认进入本地postg ...

  7. Azure 配置高可用的准备系列工作-建立不同区域的存储账户和建立网络！

     我们谈到我们的业务,常常谈到一个词.三层架构,就是我们的UI层.数据訪问层和数据存储层的分离,通常情况下我们的业务高可用必须满足这三层的所有高可用的情况下才干达到最高级别的高可用. 那么谈到Az ...

  8. HBase源代码分析之HRegion上MemStore的flsuh流程（二）

    继上篇<HBase源代码分析之HRegion上MemStore的flsuh流程(一)>之后.我们继续分析下HRegion上MemStore flush的核心方法internalFlushc ...

  9. 26. Intellij IDEA 启动项目ClassNotFoundException

    转自:https://blog.csdn.net/zhw0596/article/details/81388147 使用Intellij IDEA  的过程中,新创建的项目启动时报 严重: Error ...

  10. HTTP 协议基础及发展历史

    一. 5层网络模型介绍 低三层 物理层:主要作用是定义物理设备如何传输数据. 数据链路层:在通信的实体间建立数据链路连接. 网路层:为数据在结点之间传输创建逻辑链路. 传输层: 想用户提供可靠的端到端 ...