前端小案例(留言板)

便利贴小案例

代码（html+css+js）：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>留言墙</title>
  <!-- 步骤2：写样式 -->
  <style type="text/css">
   * {
    margin: 0;
    padding: 0;
   }

   body {
    background-color: skyblue;
   }

   /*输入框的样式*/
   #info {
    width: 40%;
    min-width: 300px;
    height: 40px;
    border-radius: 5px;
    padding-left: 10px;
    position: fixed;
    /*固定定位，参考窗口*/
    bottom: 5%;
    left: 50%;
    /*向右移动窗口的一半*/
    transform: translateX(-50%);
    /*自己向左移动自己的宽度的一半*/
    border: 1px solid #cccccc;
   }

   .main {
    position: relative;
    width: 100%;
    min-height: 754px;
   }

   .main>.note {
    width: 170px;
    height: 170px;
    background-color: rgb(255, 0, 127);
    box-sizing: border-box;
    /*设置边框，填充都不会把盒子撑大，而是减少content的值*/
    padding: 20px 10px;
    /*上下  左右*/
    border-radius: 4px;
    /*圆角半径*/
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.4);
    /*盒子阴影效果*/
    border-bottom-right-radius: 50px 10px;
    /*右下角的翘起的效果*/
    position: absolute;
    /*绝对定位*/
    word-wrap: break-word;
    /*换行*/
    word-break: break-all;
    overflow: hidden;
    /*超过便利贴的内容隐藏*/
   }

   .main>.note>.closeBtn {
    position: absolute;
    right: 7px;
    top: 5px;
    font-size: 14px;
    color: #333333;
    cursor: pointer;
   }

   .main>.note>.closeBtn::after {
    content: "×";
   }
  </style>
 </head>
 <body>

  <!-- 步骤1：写HTML -->
  <!-- main墙 -->
  <div class="main">
   <!-- note留言纸 -->
   <!-- <div class="note">
    gfdsuaf
    <div class="closeBtn"> 
    </div>
   </div> -->
  </div>
  <input type="text" id="info" placeholder="输入内容" />

  <script type="text/javascript">
   //找父元素，因为要删除子元素
   var mainDiv = document.querySelector(".main");
   // 思路：1>根据ID找到文本输入框
   var inputTag = document.querySelector("#info");
   //  2>为input框绑定键盘事件，按回车键触发一个功能的执行
   inputTag.onkeydown = function(event) {
    // 13对应的是回车键
    if (event.keyCode == 13) {
     //获取用户输入的内容
     var inputContent = inputTag.value;
     if (inputContent == "") {
      alert("不能为空!");
      return;
     }
     //new RegExp('^[ ]+$').test(inputContent)
     // 
     if (/^[ ]+$/.test(inputContent)) {
      alert("不能空格!");
      return;
     }
     //调用动态创建便利贴的方法
     createDiv(inputContent);
     //                     //要把输入框中的内容清除
     inputTag.value = "";
    }
   }
   //3> 定义一个函数 createDiv(msg) 动态的创建div，参数是输入框中的值
   // 定义一个函数
   function createDiv(msg) {
    var noteDiv = document.createElement("div"); // <div> </div>
    noteDiv.className = "note"; //<div class="note"></div>
    noteDiv.innerHTML = msg; //内容插入div的内部  <div class="note">内容</div>
    noteDiv.style.backgroundColor = randomColor();

    var h = window.innerHeight - 300; //窗体的高度-从输入框开始的高度
    var w = window.innerWidth - 200;
    noteDiv.style.left = Math.random() * w + "px";
    noteDiv.style.top = Math.random() * h + "px";


    var closeBtnDiv = document.createElement("div"); //<div></div>
    closeBtnDiv.className = "closeBtn"; //<div class="closeBtn"></div>
    //把closeBtnDiv追加到noteDiv中
    noteDiv.appendChild(closeBtnDiv); // <div class="note">内容<div class="closeBtn"></div></div>
    mainDiv.appendChild(noteDiv);
    //为closeBtnDiv设置单击事件
    closeBtnDiv.onclick = function(event) {
     event.stopPropagation();
     //单击关闭移除掉note（留言纸）元素
     mainDiv.removeChild(noteDiv);
    }
    
    // 点击时,会出现在最上层
    noteDiv.onclick = function() {
     var allNote = this.parentNode.children;
     for (var i = 0; i < allNote.length; i++) {
      allNote[i].style.zIndex = allNote[i].style.zIndex--;
     }
     this.style.zIndex = 999;
    }

   }
   //随机背景色
   function randomColor() {
    var red = Math.round(Math.random() * 255);
    var green = Math.round(Math.random() * 255);
    var blue = Math.round(Math.random() * 255);
    return "rgb(" + red + "," + green + "," + blue + ")";
   }
  </script>

 </body>
</html>

效果图：