js简易留言板

  <!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>
   
posted @ 2019-01-14 22:04  蔷薇绅士-杰斯  阅读(302)  评论(0)    收藏  举报