×

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

作者:Web前端之家2021.02.10来源:Web前端之家浏览:216评论:0
关键词:js
微信公众号

微信公众号

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

11.jpg

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>

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

温馨提示:本文作者系Web前端之家 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/js20210210a1.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    Windows10要求电脑配置啊。...

  • ab234

    博主辛苦了,这个VUE分享很不错,收藏了。...

  • Web前端之家

    已加上...

  • 访客

    您好,我这边是http://www.liulanqi.com.cn/360/浏览器下载爱站权2,...

  • Web前端之家

    已加上...

  • WordPress主题

    已添加贵站友链网站名称:WordPress主题网站地址:https://www.bigethem...

  • jing35

    不可变数据类型...

  • aboy

    不错的flexbox教程,收藏。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2021 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.6.7 Valyria