js to realize web message board function

This article example shares the specific code of js to implement the web message board for your reference. The specific content is as follows

1. Draw a title bar and a content bar, submit button, message board

Mood:<br/> <input type="text" id="mood"/><br/>
Notes: <br/> <textarea id="network"></textarea><br/>
<button id="send">Publish</button>
<div class="ban"></div>

2. Dynamically obtain the above elements.

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

3. Set the submit button click event. When you click the submit button, the message board at the bottom will display the filled content.

(1) Be good at using cache localStorage() and use time to obtain cached values.

var time = new Date();

(2) Create a JSON object to store the value of the title and content

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

(3) Save the value in the JSON object and remember to use JSON.stringify to convert it into a string;

(4) Create a function to read the value, obtain the content in the cache, and then display it on the message board interface.

function readdata(){
    ban.innerHTML = "";
    var length = localStorage.length - 1;
    for(var i=length;i>=0;i--){
      var k=localStorage.key(i); //Get key value 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/>";
    }
}

Source code:

<!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>
Mood:<br/> <input type="text" id="mood"/><br/>
Notes: <br/> <textarea id="network"></textarea><br/>
<button id="send">Publish</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 PM
    };
    // console.log(JSON.stringify (shuju));
     localStorage.setItem(time.getTime(),JSON.stringify(shuju));
    mood.value="";
    network.value = "";

    // alert("Published successfully");
     readdata();
}
function readdata(){
    ban.innerHTML = "";
    var length = localStorage.length - 1;
    for(var i=length;i>=0;i--){
      var k=localStorage.key(i); //Get key value 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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript event delegation principle
Detailed explanation of js event delegation
A brief analysis of event delegation examples in JS
JavaScript to implement web message board function
Native JS implementation of message board
This article tells you how to use event delegation to implement JavaScript message board function

<<: JS realizes the effect of picture waterfall flow

>>: How to uninstall and reinstall Tomcat (with pictures and text)

Complete steps for uninstalling MySQL database

js to realize web message board function

Complete steps for uninstalling MySQL database

Application of dynamic image loading technology and use case of jquery.lazyload plug-in

Analysis of JavaScript's event loop mechanism

Detailed explanation of LVM seamless disk horizontal expansion based on Linux

MySQL data types full analysis

How to change the host name in Linux

JavaScript macrotasks and microtasks

An example of elegant writing of judgment in JavaScript

Uninstalling MySQL database under Linux

How to simulate enumeration with JS

Recommend

Examples of two ways to implement a horizontal scroll bar

The implementation of event binding this in React points to three methods

Detailed explanation of how to exit Docker container without closing it

Detailed explanation of how to deploy SpringBoot in docker and replace jar packages

Tutorial on installing mysql5.7.23 on Ubuntu 18.04

Sample code for implementing a background gradient button using div+css3

Implementation of Docker deployment of SQL Server 2019 Always On cluster

MySQL column to row conversion tips (share)

Compilation process analysis of Remax framework for writing small programs using React (recommended)

MySQL 8.0.2 offline installation and configuration method graphic tutorial

Rules for registration form design

Simple summary of tomcat performance optimization methods

Summary of solutions for MySQL not supporting group by

Detailed process of building nfs server using Docker's NFS-Ganesha image

Detailed explanation of uniapp painless token refresh method