<!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. Sql 问题---在尝试加载程序集 ID 65537 时 Microsoft .NET Framework 出错.服务器可能资源不足

    新库是直接复制的模板库 执行存储过程时报如下错 消息 10314,级别 16,状态 11,过程sp_Sync_CmsArticleToSearchs,第 30 行在尝试加载程序集 ID 65645 时 ...

  2. ACM-ICPC 2017 Asia Urumqi（第八场）

    A. Coins Alice and Bob are playing a simple game. They line up a row of nnn identical coins, all wit ...

  3. Chromium Graphics: Multithreaded Rasterization

    Multithreaded Rasterization @nduca, @enne, @vangelis (and many others) Implementation status: crbug. ...

  4. 昼猫笔记 JavaScript -- 异步执行 | 定时器真的定时执行？

      本篇主要内容:异步.定时器引发的思考 预计阅读时间:8分钟 了解 我们都知道在js中定时器有两种  setInterval()  . setTimeout()   setInterval() :按 ...

  5. 「POJ3237」Tree(树链剖分）

    题意 给棵n个点的树.边有边权然后有三种操作 1.CHANGE i v 将编号为i的边权变为v 2.NEGATE a b 将a到b的所有边权变为相反数. 3.QUERY a b 查询a b路径的最大边 ...

  6. Git学习笔记 1，GitHub常用命令1

    廖雪峰Git教程 莫烦Git教程 莫烦Git视频教程 --------------- init > apt-get install git # 安装 > mkdir /home/yzn_g ...

  7. Python 批处理文本文件、进行查找

    去年换了一部手机,老手机终于光荣退休了,但是里面的便签里还存有很多文字记录,这个手机还不能备份到云,只能将每个便签保留为一个个的文本文件,我想要把所有的文本文件归到一个文本文件中,手动操作太麻烦了,刚 ...

  8. LocalDateTime与mysql日期类型的交互（基于mybatis）

    众所周知,在实体Entity里面,可以使用Java.sql.Date.java.sql.Timestamp.java.util.Date来映射到数据库的date.timestamp.datetime等 ...

  9. 3D打印技术之切片引擎（6）

    [此系列文章基于熔融沉积( fused depostion modeling, FDM )成形工艺] 这一篇文章说一下填充算法中的网格填充.网格填充在现有的较为成熟的引擎中是非常普遍的:skeinfo ...

  10. volatile的含义

    从词面上来讲.volatile的意思是易变的,也就是说.在程序执行的过程中,有一些变量可能会被莫名其妙的改变,而优化器为了节约时间.有时候不会重读这个变量的真实值,而是去读在寄存器的备份,这种话,这个 ...