留言板的javascript写法

最新推荐文章于 2022-06-27 15:21:21 发布
最新推荐文章于 2022-06-27 15:21:21 发布
阅读量641 收藏 1
点赞数
文章标签： javascript javascript留言板写法 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcm1457225624/article/details/52625318
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{margin:0;padding:0;}

        div{width:500px;

        height:auto!important;

        min-height: 800px;

        height:800px;

        margin: 50px auto;

            -webkit-user-select: none;

            -moz-user-select: none;

            -ms-user-select: none;

            user-select: none;

        }

        #txt{

            width:440px;

            height:169px;

        }

        #list{

        width:400px;

        height:auto!important;

            min-height:400px;

            height:400px;

            border:1px solid #ccc;

            list-style: none;

        }

        li{

        border-bottom: 1px solid #ccc;

        overflow: hidden;

        margin-bottom: 8px;

        height:45px;}

        p{

        font-size:12px;

        color:#f5e79e;

        float:right;}

        b{

        font-size:20px;

        color:red;}

        span{

        margin-bottom: 5px;

        }

    </style>

</head>

<body>

    <div>

        输入你的名字:<input type="text" id="Name">

        <textarea name="" id="txt" cols="30" rows="10">

        </textarea><br>

        <input type="button" value="添加" id="add">

        <input type="button" value="删除" id="clear">

        <ul id="list"></ul>

    </div>

</body>

<script>

    var txt=document.getElementById("txt");

    var add=document.getElementById("add");

    var clear=document.getElementById("clear");

    var list=document.getElementById("list");

    var Name=document.getElementById("Name");

    //Name.value+txt.value



    data();

    add.onclick=function(){

        var time=new Date();

        var val=Name.value+"|"+txt.value;//string

        console.log(val);

        localStorage.setItem(time,val);

        console.log(localStorage.getItem(time));

        data();

    };

    clear.onclick=function(){

        localStorage.clear();

        list.innerHTML="";

        txt.value="";

    };

    function data(){


        var str="";

        //先存取数据

        console.log(localStorage.length);//3

        for(var i=0;i<localStorage.length;i++){

            var keys=localStorage.key(i);//获取循环下所有key值;

            console.log(keys);

            //取到value

            var value=localStorage.getItem(keys);//value  Name.value+"|"+txt.value;

            if(value.split("|")[0]==""){

                str+="<li><b>匿名人</b>:<span>"+value.split("|")[1]+"</span><p>"+keys+"</p></li>"

            }else{

                str+="<li><b>"+value.split("|")[0]+"</b>:<span>"+value.split("|")[1]+"</span><p>"+keys+"</p></li>"

            }


        }

        list.innerHTML=str;

        var lis=list.getElementsByTagName("li");

        for(var i=0;i<lis.length;i++){

            lis[i].index=i;

            lis[i].ondblclick=function(){

                list.removeChild(this);

                var ks=localStorage.key(this.index);

                localStorage.removeItem(ks);

            }

        }

    }

</script>

</html>


????1996
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript留言板
LILI_JU88的博客
12-28 610
新建一个html文件 先写div将，做一个包裹住内容的容器，给它个类 再写个文本域textarea，与一个发送留言的按钮button 放个ul标签来放置留言信息，并给div包裹层的标签都给个id 给它们写样式 JavaScript：先获取包裹层内，文本域、按钮、无序列表里的li标签 然后就是按钮点击事件 设置一个函数，函数等于文本域的内容，还有楼层的自加 还有无内容函数，与判断 最后设置li标签内容 ...
JavaScript制作留言板
m0_48639378的博客
07-03 527
JavaScript制作留言板
JavaScript之留言板制作
weixin_44827643的博客
06-27 1429
本文主要介绍留言板的制作，用户可对新闻消息进行评论，发表之后评论会被置于顶端，点击相应删除按钮即可删除。本文主要介绍两种方式，区别在于如何实现评论的删除。1.在函数的局部作用域内完成删除事件的绑定，可以实现“点哪个删哪个评论”的效果。代码如下： 2.通过事件委托的方式，给评论模块的父级绑定事件，通过e.target属性的应用完成删除功能。代码如下：......
JavaScript实现简易留言板
dy799的博客
02-27 1225
留言板 需要实现的功能 Ⅰ，最新留言显示在最上边 Ⅱ，有删除功能 Ⅲ，点击留言后清空input内容 实现功能 Ⅰ，HTML部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="vie
JavaScript(JS)网页--留言板
Dreamer
11-20 3037
JavaScript(JS)网页–留言板 在使用网页进行冲浪时，经常会发表自己的留言。发布留言的留言板是怎么做的呢？ 制作一个简单的留言板。 首先需要一个textarea框，旁边放置一个按钮，然后需要一个ul标签，里面不需要放置li元素，用CSS加以简单的修饰。 紧接着获取元素，在点击按钮后，创建一个li，将文本框里面的赋值给li，将li插入到ul的第一个孩子的前面。 <!DOCTYPE html> <html lang="zh-CN"> <head> <
JavaScript实现动态留言板
10-15
JavaScript实现动态留言板的知识点涵盖了前端开发的多个方面，包括HTML、CSS、JavaScript基础及DOM操作。以下是对给定文件内容中知识点的详细介绍： 1. HTML基础 在实现动态留言板的过程中，首先需要了解的是基本的...
基于JavaScript实现留言板功能
10-15
3. JavaScript事件处理：JavaScript是实现留言板功能的核心。首先，通过获取页面元素的DOM引用，然后为发送按钮添加点击事件监听器，在事件触发时，从textarea获取用户输入的留言内容，创建新的li元素，并将其添加到...
详解javascript函数写法大全
10-17
JavaScript是一种广泛使用的前端开发语言，其函数写法多样，适应不同的场景和需求。在JavaScript中，函数既是对象，也是可以赋值给变量的实体。下面，我们将详细介绍几种常见的JavaScript函数写法，并给出示例代码。...
用Node.实现留言板功能
10-10
输入姓名和留言内容，能够实时显示在留言板上面显示留言人，和留言的内容、留言的日期。 //1、/ index.html //2、开发public 目录中的静态资源 // 当请求/public/xxx的时候，读取响应public目录中的具体资源 //3、/...
javascript实现留言板功能
11-21
本文实例为大家分享了javascript实现留言板功能的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title&...
ASP javascript留言板
12-22
虽然不会ASP，可还是花了2小时用dreamweaver CS4做了个ASP javascript留言板出来。附带黑风ASP服务器，直接在根目录运行即可启动。
用javascript实现的留言板模块
12-26
留言板中留言的模块,有表情,图片,大部分的文字处理都有...
JS实现简易留言板（节点操作）
11-21
本文实例为大家分享了JS实现简易留言板的具体代码，供大家参考，具体内容如下 今天的案例主要是对节点进行操作 创建节点、添加节点、删除节点以及为节点添加内容的操作。  就是一个简单的留言板功能，可以发布留言，删除留言。 主要思路：两个鼠标点击事件——点击发布按钮事件和点击删除按钮事件 发布按钮事件：首先在文档中创建li节点。然后第二步，先把文本域中的内容获取出来赋给li，这里要注意，文本域是表单元素，获取表单元素的内容是使用表单的特有属性value，要与普通元素获取内容的innerHTML进行区分；再把删除链接添加到li中，利用字符串拼接的方式。最后把li节点添加到ul中，添加的方式有两种，是直
用Javascript实现留言板案例（附带删除留言）
茂茂的博客
02-01 2914
用Javascript实现留言板案例（附带删除留言） 正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教 在一些网站的讨论品论区，我们通常可以看见会有留言板这个功能，然后当用户评论时，空评论不能评论，发布的评论将会最新显示，把旧的评论抵下去，然后博主可以对评论进行删除 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&
JavaScript（留言板功能内附备注，每一步都很详细)
ZZY192921533的博客
05-11 751
JavaScript的节点操作
javascript留言板
weixin_30879169的博客
08-06 96
用DOM相关方法创建的留言板 1 <html xmlns="http://www.w3.org/1999/xhtml"> 2 <head> 3 <style> 4 #ul1 {margin:0; padding:0;} 5 #ul1 li {list-style:none; width:300px; background:...
javascript留言板制作
最新发布
06-17
在JavaScript中制作留言板，通常涉及到前端的HTML、CSS和JavaScript，以及后端的服务器端脚本（如Node.js、PHP等，根据具体需求）。以下是简单步骤： 1. **设计界面**: 使用HTML创建一个基本布局，包括输入框让...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值