js to realize web message board function

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)

Recommend

Tutorial on resetting the root password of Mac MySQL

Disclaimer: This password reset method can direct...

Vue3 compilation process-source code analysis

Preface: Vue3 has been released for a long time. ...

Commonplace talk about the usage of MYSQL pattern matching REGEXP and like

like LIKE requires the entire data to match, whil...

Detailed explanation of mysql filtering replication ideas

Table of contents mysql filtered replication Impl...

JQuery implements hiding and displaying animation effects

This article shares the specific code of JQuery t...

Detailed explanation of using Nginx reverse proxy to solve cross-domain problems

question In the previous article about cross-doma...

Summary of 50+ Utility Functions in JavaScript

JavaScript can do a lot of great things. This art...

How to pull the docker image to view the version

To view the version and tag of the image, you nee...

Summary of shell's method for determining whether a variable is empty

How to determine whether a variable is empty in s...

How to get the current time using time(NULL) function and localtime() in Linux

time(); function Function prototype: time_t time(...

MySQL 5.7.20 zip installation tutorial

MySQL 5.7.20 zip installation, the specific conte...

The docker container directly runs to obtain the public IP operation through ping

Get the local public IP address through the conta...

Detailed steps to change the default password when installing MySQL in Ubuntu

Step 1: Enter the directory: cd /etc/mysql, view ...

Detailed explanation of how to use Nginx + consul + upsync to achieve dynamic load balancing

Table of contents Prerequisites DNS domain name r...

Innodb system table space maintenance method

Environmental Description: There is a running MyS...