js实现留言板 localStorage

最新推荐文章于 2024-06-18 23:11:49 发布
最新推荐文章于 2024-06-18 23:11:49 发布
阅读量657 收藏 6
点赞数 2
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/V1411/article/details/134949146
版权

body部分效果如下：

<body>
    <h3>我的留言板</h3>
    <!-- <p id="ban"></p> -->
    <!-- <input type="textarea" id="ban">-->
    <hr/>
    <textarea id="ban"></textarea>
    <button id="submit" onclick="Submit()">提交留言</button>
    <button id="clear" onclick="Clear()">清除所有留言</button>
    <h3>留言区</h3>
    <hr/>
    <div id="printBd"></div>

</body>

js代码如下：

<script>
    var textA = document.getElementById("ban");
    var printB = document.getElementById("printBd");
    var printBO = document.createElement("ol");
    printBO.setAttribute("id","print");
    

    var arrKey = new Array(); // 我的浏览器Key不能识别调用，故取巧自定义数组表示键值对数
    var count = 0;            // 相当于localStorage.length;
    display();                // 一进来就刷新

    function display(){ // 每次操作的实时更新
        console.log(count);
        // 每次更新应该清除之前的数据
        if(printB.childNodes.length==0){
            printB.appendChild(printBO);
            // printBO.innerHTML="暂无留言。";
        }else{
            // printB.removeChild(printBO);
            printBO.innerHTML=""; //清除之前的数据防止重合
        }
        if(count==0){printBO.innerHTML="暂无留言。";}
        var arr1 = new Array();
        var num = localStorage.length;
        alert("当前localStorage的数量为："+num);
        for(var j=0;j<num;j++){
            arr1[j]=localStorage.getItem(arrKey[j]);
            var olLi = document.createElement("li");
            // alert(arrKey[j]+arr1[j]); 
            olLi.setAttribute("id","li"+j)
            olLi.innerHTML=arrKey[j]+"&nbsp;&nbsp;&nbsp;"+arr1[j]+"&nbsp;&nbsp;&nbsp;"+ '<input type="button" value="删除留言" onclick="reduce('+j+')"/>';
            // alert(olLi.innerHTML);  '<input type="button" value="删除" onclick="reduce('+n+')" />';
            printBO.appendChild(olLi);
            // printB.appendChild(printBO);
            console.log(count);
        }
    }
    
    function reduce(j){
        var Id = "li"+j
        var olLiB = document.getElementById(Id);
        printBO.removeChild(olLiB);
        count = parseInt(count) - 1;
        if(count<0){count=0;}
        console.log(count);
        localStorage.removeItem(arrKey[j]);
        display();
    }

    function Submit(){
        var text = document.getElementById("ban").value;//故为value，而非innnerHTML
        // alert(text);为空，因为innerHtml为标签中间的内容，而非textarea内的内容。
        if(text!=""){
            var d = new Date();
            month = d.getMonth()+1;
            d = d.getFullYear()+"-"+month+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            arrKey[parseInt(count)] = d;
            count = parseInt(count) + 1;
            localStorage.setItem(d,text);
            display();
        }else{
            alert("内容不为能空！");
            display();
        }
    }

    function Clear(){
        var num = localStorage.length;
        for(var i=0;i<num;i++){
            localStorage.clear();
            count = 0;
        }
        display();
    }
</script>

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>作业6</title>
    <style>
        #ban{
            width: 500px;
            height: 300px;
            border: 2px solid black;
            display: block;
            margin-bottom: 20px;
        }
        li{
            font:15px 楷体;
        }
    </style>
</head>
<body>
    <h3>我的留言板</h3>
    <!-- <p id="ban"></p> -->
    <!-- <input type="textarea" id="ban">-->
    <hr/>
    <textarea id="ban"></textarea>
    <button id="submit" onclick="Submit()">提交留言</button>
    <button id="clear" onclick="Clear()">清除所有留言</button>
    <h3>留言区</h3>
    <hr/>
    <div id="printBd"></div>

</body>
<script>
    var textA = document.getElementById("ban");
    var printB = document.getElementById("printBd");
    var printBO = document.createElement("ol");
    printBO.setAttribute("id","print");
    

    var arrKey = new Array(); // 我的浏览器Key不能识别调用，故取巧自定义数组表示键值对数
    var count = 0;            // 相当于localStorage.length;
    display();                // 一进来就刷新

    function display(){ // 每次操作的实时更新
        console.log(count);
        // 每次更新应该清除之前的数据
        if(printB.childNodes.length==0){
            printB.appendChild(printBO);
            // printBO.innerHTML="暂无留言。";
        }else{
            // printB.removeChild(printBO);
            printBO.innerHTML=""; //清除之前的数据防止重合
        }
        if(count==0){printBO.innerHTML="暂无留言。";}
        var arr1 = new Array();
        var num = localStorage.length;
        alert("当前localStorage的数量为："+num);
        for(var j=0;j<num;j++){
            arr1[j]=localStorage.getItem(arrKey[j]);
            var olLi = document.createElement("li");
            // alert(arrKey[j]+arr1[j]); 
            olLi.setAttribute("id","li"+j)
            olLi.innerHTML=arrKey[j]+"&nbsp;&nbsp;&nbsp;"+arr1[j]+"&nbsp;&nbsp;&nbsp;"+ '<input type="button" value="删除留言" onclick="reduce('+j+')"/>';
            // alert(olLi.innerHTML);  '<input type="button" value="删除" onclick="reduce('+n+')" />';
            printBO.appendChild(olLi);
            // printB.appendChild(printBO);
            console.log(count);
        }
    }
    
    function reduce(j){
        var Id = "li"+j
        var olLiB = document.getElementById(Id);
        printBO.removeChild(olLiB);
        count = parseInt(count) - 1;
        if(count<0){count=0;}
        console.log(count);
        localStorage.removeItem(arrKey[j]);
        display();
    }

    function Submit(){
        var text = document.getElementById("ban").value;//故为value，而非innnerHTML
        // alert(text);为空，因为innerHtml为标签中间的内容，而非textarea内的内容。
        if(text!=""){
            var d = new Date();
            month = d.getMonth()+1;
            d = d.getFullYear()+"-"+month+"-"+d.getDay()+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
            arrKey[parseInt(count)] = d;
            count = parseInt(count) + 1;
            localStorage.setItem(d,text);
            display();
        }else{
            alert("内容不为能空！");
            display();
        }
    }

    function Clear(){
        var num = localStorage.length;
        for(var i=0;i<num;i++){
            localStorage.clear();
            count = 0;
        }
        display();
    }
</script>
</html>

李牧谦
关注
  • 2
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现简易留言板
Hedia Pan的博客
08-25 443
<html> <head> <style> span{ cursor:pointer; } </style> </head> <body> <div id="content"> 聊天记录<ul id="words"></ul> </div> <textarea id="msg"></textarea> <button i.
javascript实现留言板功能
11-21
本文实例为大家分享了javascript实现留言板功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .box{ /*设置最外层盒子*/ width: 600px; border: 1px solid #aaa; padding: 20px 10px; margin: 100px auto; } #plTxt{ /*设置
HTML+CSS+PHP实现网页留言板功能（含代码，需要创建数据库）
最新发布
aw2371的博客
06-18 608
话说前头，我这方面很菜滴。这是我网页作业的一部分。
JS——利用JS实现简易留言板
Bonsoir777的博客
08-26 9375
本文主要阐述如何利用js实现简易留言板的实现过程
js实现留言板
xuehaocyuyan的博客
07-02 2643
具体的实现看以下代码，代码包含详细注释。效果图如下 输入内容为空 发布： 删除： 完整代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="w
利用js写一个简单的留言板
个人笔记
03-25 3242
css样式: *{ margin: 0; padding: 0; } ul{ list-style: none; } .root{ width: 500px; /*增加新的留言 父级高度也会变大! 高度不要设置*/ padding: 20px; border: 3px solid red; margin: 30px auto; } #title, #content{ width: 480px; outline: none; border-radius: 5px; bor
js本地存储localStorage的跨页面通信
youyouyouyou44的博客
12-23 2082
localStorage的跨页面通信运用，以购物车为例 说到这里，就不得不说一下onstorage事件了，当存储空间中数据发生变化的时候触发该事件，以下例子中有实际运用。 需要有两个HTML文件，第一个文件用来存数据，第二个文件用来取数据，具体代码如下： 物品界面.html &lt;script&gt; document.addEventListe...
原生JS实现留言板功能
10-15
在本文中，我们将深入探讨如何使用原生JavaScript实现一个简单的留言板功能。首先，我们要了解留言板的基本组成部分：用户输入框、提交按钮以及显示留言的地方。在给出的代码中，这些元素都已通过HTML定义： ```...
LocalStorage实现留言板功能
06-18
通过localStorage实现留言板的功能，点击添加即可新增留言，可对留言进行修改及删除功能。
原生js 带增删动画版 留言板 评论板
10-24
【原生JS实现带增删动画的留言板与评论板】 在网页交互中，留言板和评论板是常见的功能模块，它们允许用户发表意见、交流观点。本项目以原生JavaScript为核心，实现了具有动态增删功能的留言板和评论板，并且加入了...
JS留言板添加和删除代码，简单，漂亮
12-25
简单的js留言板添加删除，页面漂亮简介，无刷新
JS实现简易留言板增删功能
10-15
主要为大家详细介绍了JS实现简易留言板增删功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js在线留言板发表文字评论特效代码
03-20
这个特定的“js在线留言板发表文字评论特效代码”是一个JavaScript实现的解决方案，旨在为网页提供一个动态且用户友好的评论系统。JavaScript，作为前端开发的主要语言之一，能够处理用户的实时交互，为网页增加动态...
前端实现留言板模块功能
09-08
在前端开发中，实现留言板模块是一项常见的任务，它涉及到用户交互、数据管理、以及与后端服务器的通信。在这个过程中，JavaScript（JS）是核心语言，而Vue.js框架则提供了便利的工具和方法来构建这样的功能。以下是...
JavaScript之留言板制作
weixin_44827643的博客
06-27 1417
本文主要介绍留言板的制作，用户可对新闻消息进行评论，发表之后评论会被置于顶端，点击相应删除按钮即可删除。本文主要介绍两种方式，区别在于如何实现评论的删除。1.在函数的局部作用域内完成删除事件的绑定，可以实现“点哪个删哪个评论”的效果。代码如下： 2.通过事件委托的方式，给评论模块的父级绑定事件，通过e.target属性的应用完成删除功能。代码如下：......
JavaScript实现留言板
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 350
JavaScript实现留言板
利用js做简易留言板
yuyangll的博客
05-19 1170
前段时间学习了JavaScript，学的网课视频老师利用js做了简易的留言板 最近趁空闲时间自己也敲了一边 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
使用js实现留言板效果
xiaocantongxue的博客
08-29 580
【代码】使用js实现留言板效果。
js实现关闭浏览器清除当前域名localstorage
07-14
要在关闭浏览器时清除当前域名的 LocalStorage，可以使用 `beforeunload` 事件来监听页面即将被卸载的情况，在该事件中清除 LocalStorage。 以下是一个示例代码： ```javascript // 监听 beforeunload 事件 window.addEventListener("beforeunload", function() { // 清除当前域名的 LocalStorage localStorage.clear(); }); ``` 在这个示例中，我们使用 `beforeunload` 事件来监听页面即将被卸载的情况。当用户关闭浏览器或者离开当前页面时，会触发该事件。在事件处理函数中，我们调用 `localStorage.clear()` 来清除当前域名的 LocalStorage。 请注意，由于浏览器的安全机制，只能清除当前域名的 LocalStorage，而不能清除其他域名的 LocalStorage。如果你需要清除其他域名的 LocalStorage，那么需要在对应的域名下执行相应的脚本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值