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)