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)

How to configure mysql5.6 to support IPV6 connection in Linux environment

js to realize web message board function

How to configure mysql5.6 to support IPV6 connection in Linux environment

jQuery plugin to implement minesweeper game (2)

The easiest way to debug stored procedures in Mysql

JS implements multiple tab switching carousel

Detailed explanation of how to efficiently import multiple .sql files into MySQL

Basic usage and examples of yum (recommended)

Solve the problem that images and other resources are automatically deleted after Tomcat is redeployed

CSS naming conventions (rules) worth collecting Commonly used CSS naming rules

Implementing custom radio and check box functions with pure CSS

Detailed explanation of Truncate usage in MYSQL

Recommend

How to quickly deploy Gitlab using Docker

Detailed explanation of MySql 5.7.17 free installation configuration tutorial

Perfect solution for theme switching based on Css Variable (recommended)

【Web Design】Share E-WebTemplates exquisite foreign web page templates (FLASH+PSD source file+HTML)

Summary of precautions when writing EDM in HTML (general precautions for sending emails)

Summary of common MySQL commands

Virtual Box tutorial diagram of duplicating virtual machines

HTML+CSS to achieve simple navigation bar function

English: A link tag will automatically complete href in IE

Jenkins builds Docker images and pushes them to Harbor warehouse

A MySQL migration plan and practical record of pitfalls

How Web Designers Create Images for Retina Display Devices

The difference between ENTRYPOINT and CMD in Dockerfile

MySQL 8.0.13 installation and configuration method graphic tutorial under Windows 64 bit

The difference between HTML iframe and frameset_PowerNode Java Academy