利用js实现留言板模块效果

痛定思痛。 2023-07-03 07:24 20阅读 0赞

相信大家都遇见过留言板这个东西,一般来说开发过程中都会要求做这个模块,这里我把留言板的基本的功能做了一下,后续大家可以在里面添加更多的功能.  
成果图展示  
![在这里插入图片描述][20200204135548625.gif]  
代码也在这,样式可以自己按照喜欢的改就行了,这里的样式只是一个成品,希望大家不要介意

<style>
            .box{ 
                position: relative;
                margin: 100px auto;
                width: 300px;
                height: 500px;
                /* border: 1px solid red; */
                background-color: #95a5a6;
            }
            .box h4{ 
                text-align: center;
                color: white;
            }
            .box button{ 
                background-color: #1abc9c;
                position: absolute;
                right: 10px;
                top: 100px;   
                outline: none;
                color: white;
                border: 0;
                cursor: pointer;
            }
            .box textarea{ 
                outline: none;
                resize: none;
                margin-top: 20px;
                margin-left: 30px;
                width: 200px;
                height: 100px;
                color: gray;
            }
            .box li{ 
                height: 30px;
                width: 200px;
                line-height: 30px;
                list-style-type: none;
                background-color: #BDC581;
                padding-left: 8px;
                color: white;
                border-radius: 5px;
                margin-top: 5px;
            }
        </style>
    --------------html------------------------
    <body>
        <div class="box">
            <h4>留言板</h4>
        <textarea rows="30" cols="20" value=""></textarea>
        <button>留言</button>
        <ul></ul>
        </div>  
        --------------JS模块-------------------
        <script>
            var btn = document.querySelector("button");
            var txt = document.querySelector("textarea");
            var ul = document.querySelector("ul");
            
            // console.log(btn);
            // console.log(txt);
            btn.onclick = function(){ 
                if(txt.value == ""){ 
                    alert("您还没有输入内容哦");
                    return false;
                }else{ 
                //创建元素
                var li =document.createElement("li");
                //添加元素
                li.innerHTML =txt.value;
                ul.appendChild(li); //如果想添加在前面显示就可以用insertBefore();
                }
                txt.value = "";
            }
        </script>

[20200204135548625.gif]: https://img-blog.csdnimg.cn/20200204135548625.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关利用js实现留言板模块效果

相信大家都遇见过留言板这个东西,一般来说开发过程中都会要求做这个模块,这里我把留言板的基本的功能做了一下,后续大家可以在里面添加更多的功能. 成果图展示 ![在这里插入

痛定思痛。/ 2023年07月03日 07:24/ 0 赞/ 21 阅读

相关 JavaScript(JS)网页--留言板

JavaScript(JS)网页–留言板在使用网页进行冲浪时，经常会发表自己的留言。发布留言的留言板是怎么做的呢？制作一个简单的留言板。 ![在这里插入图片描述]

一时失言乱红尘/ 2022年12月22日 16:18/ 0 赞/ 208 阅读

相关利用Vue.js实现简单的留言板功能

此案例主要实现点击发送留言的按钮，将我们的留言以及留言人的信息展示在留言板上，下面就是具体的步骤： -------------------- 一、搭建整个留言板页面结构

缺乏、安全感/ 2022年12月22日 09:55/ 0 赞/ 330 阅读

相关实现简易留言板

所用知识点 //声明一个日期函数 var date=new Date(); //分别获取当时的年,月,日,时,分,秒,星期 var year=date.

超、凢脫俗/ 2022年12月13日 04:54/ 0 赞/ 241 阅读

相关留言板JavaScript实现

html代码 <div id="main" class="main"> <ul id="content" class="content">

柔情只为你懂/ 2022年05月27日 12:36/ 0 赞/ 269 阅读

相关 vue实现留言板

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

ゞ浴缸里的玫瑰/ 2022年01月20日 09:55/ 0 赞/ 488 阅读

相关 JS实现简易留言板的增删功能

\\ \\JS实现简易留言板的增删功能\\ 一个很简单的留言板，实现\\增删\\功能，因为没有数据库，所以只是一个静态的留言板功能。 \\修改\\功能其实也可以添加，但

小灰灰/ 2021年12月03日 13:55/ 0 赞/ 373 阅读

相关留言板

![1373932-20190602132101713-1184863044.png][] 转载于:https://www.cnblogs.com/charlypage/ar

太过爱你忘了你带给我的痛/ 2021年11月19日 15:08/ 0 赞/ 510 阅读

相关留言板

HN-CJ高二 QQ：347605798 网名：xzy、xzyxzy、lalaxu、饕餮传奇，曾在情人节那天改名成`睡觉` 不喜欢二次元，喜欢Taylor Swift

深碍√TFBOYSˉ_/ 2021年09月29日 14:02/ 0 赞/ 565 阅读

相关留言板模块设计

暂定周末前完成，11.18 留言界面设计： ![2789632-3025db2b9abd65f8.png][] 留言显示：参考：暂时不设计头像和回复功能

刺骨的言语ヽ痛彻心扉/ 2021年06月24日 16:11/ 0 赞/ 683 阅读