<!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. P3157 [CQOI2011]动态逆序对 CDQ分治

    一道CDQ分治模板题简单来说,这道题是三维数点对于离线的二维数点,我们再熟悉不过:利用坐标的单调递增性,先按更坐标排序,再按纵坐标排序更新和查询时都直接调用纵坐标.实际上,我们是通过排序将二维中的一维 ...

  2. windows server 打开 FTP 服务器上的文件夹时发生错误。请检查是否有权限访问该文件夹。

    解决方案1: 打开高级安全windows防火墙,设置出入站规则. 然后,再打开windows防火墙界面,点击左上角“允许程序或功能通过windows防火墙”,勾选上设置的出入站名称和FTP服务器. 如 ...

  3. URAL 1513. Lemon Tale(简单的递推)

    写几组数据就会发现规律了啊. .但是我是竖着看的.. .还找了半天啊... 只是要用高精度来写,水题啊.就当熟悉一下java了啊. num[i] = 2*num[i-1]-num[i-2-k]. 15 ...

  4. 计蒜客第一场A

    #include <cstdio> #include <iostream> #include <cstring> using namespace std; char ...

  5. iOS经常使用设计模式——工厂方法(简单工厂模式,工厂方法模式, 抽象工厂模式)

    1. 简单工厂模式 怎样理解简单工厂,工厂方法. 抽象工厂三种设计模式? 简单工厂的生活场景.卖早点的小摊贩.他给你提供包子,馒头,地沟油烙的煎饼等,小贩是一个工厂.它生产包子,馒头,地沟油烙的煎饼. ...

  6. 如何测试WCF Rest

    使用SoapUI 1.新建一个rest项目 2.双击上图中的Request1 查询的时候,Method选择post resource的地方要调整到对应的方法 查询的内容是用json格式发送 查询的的结 ...

  7. git帮助命令

    git帮助命令 零.自己实例 cd D://software/code/PHP/phpStudy/PHPTutorial/WWW/github/m_Orchestrate git checkout - ...

  8. 分享js中的 sort 另一种用法

    // 看上去正常的结果: ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft']; // apple排 ...

  9. 使用js实现简单放大镜的效果

    实现原理:使用2个div,里面分别放大图片和小图片,在小图片上应该还有一个遮罩层,通过定位遮罩层的位置来定位大图片的相对位置,而且,遮罩层的移动应该和大图片的移动方向相反 关键: 大图片和小图片大小比 ...

  10. 开发板ping得通本地,但是不能上网

    在3531D的开发板上面接入LAN7500的USB转以太网口,加载完驱动后. 然后开启eth1 查看一下ifconfig,发现没有ip,配置一下ip 直接ping本地发现可以ping得通,代表链路是连 ...