<!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. spring data jpa实体类映射配置

    @Entity:用来标志实体类,知名这是一个和数据库表映射的实体类 @Id注解指明这个属性映射为数据库的主键 @GeneratedValue注解默认使用主键生成方式为自增,hibernate会自动生成 ...

  2. Linux学习之socket编程（二）

    Linux学习之socket编程(二) 1.C/S模型——UDP UDP处理模型 由于UDP不需要维护连接,程序逻辑简单了很多,但是UDP协议是不可靠的,实际上有很多保证通讯可靠性的机制需要在应用层实 ...

  3. ECNUOJ 2147 字符环

    字符环 Time Limit:1000MS Memory Limit:65536KBTotal Submit:562 Accepted:146 Description  字符环:就是将给定的一个字符串 ...

  4. UVA10269 Adventure of Super Mario(Floyd+DP)

    UVA10269 Adventure of Super Mario(Floyd+DP) After rescuing the beautiful princess, Super Mario needs ...

  5. Raphaeljs入门到精通（一）

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

  6. android-继承BaseAdapter--自己定义适配器，getView运行多次的解决方法

    定义的getView运行多次的ListView布局: <ListView android:id="@+id/lv_messages" android:layout_width ...

  7. 封装html代码块到js函数中

    有时候想把公共的html封装起来,怎么处理呢? 好多页面都用到,不可能每个页面都写,这样就会有冗余,并且不好统一处理. 那就用js来重构html吧. 代码案例如下: <footer class= ...

  8. vue --- axios发post请求后台接收不到参数的三种解决方案

    最近用vue  做项目使用axios 发送post 请求时遇到了前端传数据后端接收不到的情况: 后来仔细对比发现axios传值是这样的: 而 ajax 传值是这样的: 一个 Request Paylo ...

  9. 外连接OUTER JOIN（三十五）

    外连接OUTER JOIN   LEFT [OUTER] JOIN,左外连接 显示左表的全部记录及右表符合连接条件的记录 下面我们来演示一下,操作命令及部分结果如下: SELECT goods_id, ...

  10. spring-security-oauth2注解详解

    spring-security-oauth2支持的注解有: 1.EnableOAuth2Client 适用于使用spring security,并且想从Oauth2认证服务器来获取授权的web应用环境 ...