广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >js实现web留言板功能
  • 554
分享到

js实现web留言板功能

js留言板 2022-11-12 13:11:50 554人浏览 独家记忆
摘要

本文实例为大家分享了js实现WEB留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input t

本文实例为大家分享了js实现WEB留言板的具体代码,供大家参考,具体内容如下

1.画一个标题栏和一个内容栏,提交按钮,留言板


心情:<br/> <input type="text" id="mood"/><br/>
笔记:<br/> <textarea id="network"></textarea><br/>
<button id="send">发表</button>
<div class="ban"></div>

2.动态获取上面元素。


var mood=document.getElementById ("mood");
var network=document.getElementById ("network");
var send=document.getElementById ("send");
var ban=document.querySelector (".ban");

3.设置提交按钮点击事件,当点击提交按钮时,最下面的留言板显示出填写的内容

(1)善于使用缓存localStorage(),用时间来获取缓存的值。


var time=new Date();

(2)建立一个JSON对象来存放标题和内容的值(value)


var shuju={
  mymood:mood.value,
  mynetwork:network .value,
  now_time:time.toLocaleString()  //2019/7/2 下午7:42:15
  };

(3)JSON对象里的值保存下来,记得用JSON.stringify来转化为字符串形式;

(4)建立一个读取值的函数,获取缓存里的内容,再显示在留言板的界面上。


function readdata(){
    ban.innerhtml ="";
    var length=localStorage.length-1;
    for(var i=length;i>=0;i--){
      var k=localStorage.key(i);  //获取key值
      var data=JSON.parse (localStorage.getItem(k));  //
        console.log(k);
        ban.innerHTML +=data.mymood +" &nbsp;&nbsp;&nbsp;"+data.mynetwork +" &nbsp;&nbsp;&nbsp;"+ data.now_time +"<br/>";
    }
}

源码


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
       .ban{
           width:500px;
           height:auto;
           border:1px solid black;
       }
        #send {
            width:40px;
            height:25px;
            font-size: 12px;
            text-align: center;
            line-height: 25px;
            background: paleturquoise;
        }
    </style>
</head>
<body>
心情:<br/> <input type="text" id="mood"/><br/>
笔记:<br/> <textarea id="network"></textarea><br/>
<button id="send">发表</button>
<div class="ban"></div>
<script>
var mood=document.getElementById ("mood");
var network=document.getElementById ("network");
var send=document.getElementById ("send");
var ban=document.querySelector (".ban");
//localStorage.clear ();
readdata();
send.onclick =function(){
  var time=new Date();
  var shuju={
        mymood:mood.value,
        mynetwork:network .value,
        now_time:time.toLocaleString()  //2019/7/2 下午7:42:15
    };
    // console.log(JSON.stringify (shuju));
     localStorage.setItem (time.getTime(),JSON.stringify (shuju));
    mood.value="";
    network.value ="";

    // alert("发表成功");
     readdata();
}
function readdata(){
    ban.innerHTML ="";
    var length=localStorage.length-1;
    for(var i=length;i>=0;i--){
      var k=localStorage.key(i);  //获取key值
      var data=JSON.parse (localStorage.getItem(k));  //
        console.log(k);
        ban.innerHTML +=data.mymood +" &nbsp;&nbsp;&nbsp;"+data.mynetwork +" &nbsp;&nbsp;&nbsp;"+ data.now_time +"<br/>";
    }
}
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: js实现web留言板功能

本文链接: https://www.lsjlt.com/news/135988.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • js实现web留言板功能
    本文实例为大家分享了js实现web留言板的具体代码,供大家参考,具体内容如下 1.画一个标题栏和一个内容栏,提交按钮,留言板 心情:<br/> <input t...
    99+
    2022-11-12
    js 留言板
  • JS实现简单留言板功能
    本文实例为大家分享了JS实现简单留言板的具体代码,供大家参考,具体内容如下 言归正传,之前的案例相信大家都已经完全弄清楚了,还记得我们之前统计字数的那个案例吗?忘记的可以再去翻阅一下...
    99+
    2022-11-13
    JS 留言板
  • asp留言板功能怎么实现
    ASP留言板功能可以通过以下步骤实现:1. 创建数据库:使用SQL Server或MySQL等数据库软件创建一个数据库,用于存储留言...
    99+
    2023-06-14
    asp留言板
  • php怎么实现留言板功能
    要实现留言板功能,可以使用PHP语言结合数据库操作来实现。以下是一个简单的实现留言板功能的示例:1. 创建数据库表格:创建一个名为&...
    99+
    2023-09-07
    php
  • php+mysql的留言板(仅实现功能)
    php+mysql的留言板(仅实现功能) 基于上次做好的登录注册界面和sql表,进一步实现用户留言功能。 我的思路: 1.以上次的loginaf.php为基础,添加html代码,再做一个form表单用来传输用户的留言。 ...
    99+
    2017-02-02
    php+mysql的留言板(仅实现功能)
  • node.js+express留言板功能实现示例
    目录留言板所需类库开源项目项目结构留言板 基于nodejs+express+art-template的留言板功能。包含列表界面、添加界面和发送留言功能。 所需类库 直接copy以下p...
    99+
    2022-11-12
    node.js express留言板 node.js 留言板
  • php留言板分页功能怎么实现
    实现PHP留言板分页功能可以按照以下步骤进行:1. 获取留言总数:首先,在数据库中查询留言的总数,并存储在变量中。2. 设置每页显示...
    99+
    2023-08-14
    php
  • php怎么实现留言板删除功能
    本文操作环境:Windows7系统、PHP7.1版、DELL G3电脑php怎么实现留言板删除功能?PHP实现小程序留言板功能 之 只能修改删除自己发表的留言PHP实现小程序留言板功能这里我实现了一个只能修改和删除自己的留言,如下图所示 这...
    99+
    2015-04-14
    php
  • php如何实现留言板删除功能
    本篇内容介绍了“php如何实现留言板删除功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!php实现留言板删除功能的方法:1、创建updat...
    99+
    2023-06-25
  • php留言板系统功能怎么实现
    要实现一个基本的PHP留言板系统,可以按照以下步骤进行。1. 创建数据库和数据表:使用MySQL或其他数据库管理工具创建一个数据库,...
    99+
    2023-08-11
    php
  • php留言板编辑功能怎么实现
    要实现留言板的编辑功能,可以按照以下步骤进行:1. 创建一个编辑表单页面,其中包含留言的内容和一个提交按钮。例如,可以创建一个edi...
    99+
    2023-09-07
    php
  • JavaScript实现留言板添加删除留言
    本文分享一个JavaScript的留言板添加留言、删除留言的小案例,内附详细代码分析、但不涉及数据库操作,只解析底层代码实现思路: 实现效果 运行代码界面: 输入留言进行添加:(最...
    99+
    2022-11-12
    js留言板添加删除留言 js留言板添加留言 js留言板删除留言
  • javascript额uh实现留言功能
    这篇文章主要介绍了javascript额uh实现留言功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇javascript额uh实现留言功能文章都会有所收获,下面我们一起来看看...
    99+
    2022-10-19
    javascript
  • php如何实现留言功能
    今天小编给大家分享一下php如何实现留言功能的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。创建留言表单留言需要用户输入标题和...
    99+
    2023-07-05
  • 怎么用Ajax与mysql数据交互实现留言板功能
    本篇内容介绍了“怎么用Ajax与mysql数据交互实现留言板功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所...
    99+
    2022-10-19
    ajax mysql
  • 如何实现ajax留言板
    小编给大家分享一下如何实现ajax留言板,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!代码如下:// JavaScri...
    99+
    2022-10-19
    ajax
  • JavaScriptDOM实现简单留言板
    本文实例为大家分享了JavaScript DOM实现简单留言板的具体代码,供大家参考,具体内容如下 效果图: 先准备html代码: <body>     <tex...
    99+
    2022-11-12
    js DOM 留言板
  • 利用java编写一个留言板功能
    本篇文章为大家展示了利用java编写一个留言板功能,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。JSP+JavaBean的留言板技术<span >Messages.html <HT...
    99+
    2023-05-31
    java 留言板 ava
  • JS怎么实现粘贴板功能
    小编给大家分享一下JS怎么实现粘贴板功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!使用剪贴板是一项基本技能。作为码农都应知道...
    99+
    2022-10-19
    js
  • Flutter开发实现底部留言板
    本文实例为大家分享了Flutter实现底部留言板的具体代码,供大家参考,具体内容如下 前言 现在大家基本上都会去接触抖音那款app,其中抖音中的留言区域的效果也是要前几天工作的需求,...
    99+
    2022-11-13
    Flutter 留言板
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作