JavaScript 案例留言板

最新推荐文章于 2022-08-18 10:36:06 发布

《嘘》安静

最新推荐文章于 2022-08-18 10:36:06 发布

阅读量1.1k

点赞数 3

文章标签： javascript css html

本文链接：https://blog.csdn.net/weixin_65257540/article/details/123571226

版权

这篇博客介绍了如何使用JavaScript创建一个动态留言板。首先通过点击事件获取本地储存的留言，并将其转换为数组。接着，根据本地储存是否有值来处理ID，然后判断文本框是否包含内容。如果文本框有值，会获取当前时间、用户名和内容，并将这些信息存储为对象。随后，利用时间函数和渲染函数更新留言框并清空输入。为了实现删除功能，每个删除按钮都有自定义属性。当点击删除按钮时，根据自定义属性找到相应的ID，从数据数组中移除该ID的留言，再将更新后的数组存回本地并重新渲染页面。

摘要由CSDN通过智能技术生成

思路

1、设置点击事件。点击留言按钮获取本地储存并转为数组。

2、判断本地储存是否有值，如果有获取最后一个元素的id，如没有就把他赋值为一个新数组，把id值赋为1.

3、在判断文本框是否有值，有值才能操作。

4、调用时间函数，得到当前时间，当前用户名，以及当前内容以对象的方式存入数组。

5、调用渲染函数，每次调用都把留言框的值为空，让他重新获取重新渲染。

6、获取本地储存的数据数组，遍历每一个元素，就创建一个节点，赋值并添加进如节点。

7、为了删除操作，需要给每个删除按钮一个自定义属性。

8、点击删除后，得到当前按钮的自定义属性，由于自定义属性和当前的对象Id是一样的。

9、得到id后，获取本地储存的数据数组，进行筛选，把每一个对象id不等于当前id的值返回，就去除了对应的对象。

10，把结束（数组），重新存入本地，再次调用渲染函数即可。

HTML部分

    <section>
        <div id="message"> </div>
        <div class="input">
            <textarea name="" id="txt" cols="30" rows="10" value="" placeholder="留下足迹吧"></textarea>
            <input