Web前端开发Tips：实现一个简单的留言本功能

作者：Terry2021.02.10来源：Web前端之家浏览：9514评论:1

关键词：js

一年到头了，终于放假了，外面下暴雨，出不了门，学点东西吧。今天分享个Web前端开发小应用：实现一个简单的留言本功能。先看看效果图如下：

DEMO代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Web前端开发Tips：实现一个简单的留言本功能 - WEB前端之家/https://www.jiangweishan.com</title>
 <style>
 * {
  margin: 0;
  padding: 0;
 }
 
 body {
  padding: 100px;
 }
 .box{
     width:80%;
     margin:50px auto;
 }
 h2{
     text-align:center;
 }
 textarea {
  width: 94%;
  height: 100px;
  border: 1px solid #ccc;
  outline: none;
  resize: none;
  padding:10px 3%;
  font-size:14px;
  color:#666;
 }
 
 .ulist {
  margin-top: 10px;
 }
 
 .ulist li {
  list-style: none;
  padding: 5px;
  background-color:#f5f5f5;
  color: #333;
  font-size: 14px;
  margin: 5px 0;
 }
 h4{
     margin-top:30px;
 }
 .ulist li a {
  float: right;
  text-decoration: none;
 }
 .box button{
     margin-top:10px;
     display: block;
     border:none;
     width:100%;
     line-height:40px;
     background: #84bef3;
     color:#fff;
 }
 .item{
     margin-top:30px;
 }
 </style>
</head>
<body>
    <div class="box">
        <h2>Web前端之家 - 留言本</h2>
        <div class="item">
            <textarea name="" id=""></textarea>
            <button>发布</button>
        </div>
        <h4>留言列表：</h4>
        <ul class="ulist"></ul>
    </div>

    
<script type="text/javascript">
    var btn=document.querySelector('button')
    var textarea=document.querySelector('textarea')
    var ul=document.querySelector('ul')
    btn.onclick=function () {
        if (textarea.value==''){
            alert('没有输入内容~~~~')
            return false
        }else{
            var li=document.createElement('li')
            li.innerHTML=textarea.value+"<a href='javascript:;'>删除</a>"
            ul.insertBefore(li,ul.children[0])
            var as=document.querySelectorAll('a')
            for (var i=0;i<as.length;i++){
                as[i].onclick=function () {
                    ul.removeChild(this.parentNode)
                }
            }
        }
    }
</script>
</body>
</html>

试试吧，您需要需要更多的功能，可以在这个上面进行优化哟。

赏您的支持是我们创作的动力！