用JS实现一个简单的留言功能

  1、今天给你们展示一个简单的留言功能,如下图一般,我们点击留言可以在下面插入你所留言的内容,还有点击下面的删除按钮可以你说所留言。

2、首先我们用HTML和CSS简单的搭建一个留言模块,代码如下:

   

   

             
                 

    看到这儿 你们可能会疑惑我为啥要敲一个

      这个是用来装你留言的盒子,到时候我们把留言的内容传到ul中的
    • 中就可以了。

      3、框架敲好了之后我们就需要用js代码来实现他们了,首先我们先来获取到这些元素

      var oT=document.getElementById('t1');

      var oBtn=document.getElementById('btn');

      var oUl=document.querySelector('ul');

      4、给按钮添加一个onclick事件,点击按钮之后,我们首先获取input中的值,然后在判断它是否为空,如果为空我们责给出提示,如果不为空的话我们责将它添加到ul中的

    • 中,添加好之后我们还需要获取li中的删除按钮,然后再给他添加事件。当点击‘删除’按钮时我们需要将li删除,然后就完成了这个功能的简单部分。下面了是js部分。


      5、下面了是所有的代码:


      你可能感兴趣的:(用JS实现一个简单的留言功能)