How to leave a message in javascript

藏色散人
Release: 2022-01-18 14:37:34
Original
3215 people have browsed it

How to implement messages in javascript: 1. Create an HTML sample file and enter the input tag; 2. Enter the script tag; 3. Implement it through the js code "oPostBtn.onclick = function(){...}" Just leave a message.

How to leave a message in javascript

The operating environment of this article: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to leave a message in javascript?

JS native writing to implement the message board function

implementation The function of this message board is relatively simple, so let’s show the renderings first:
How to leave a message in javascript
Realize the content of user messages and the specific time of messages.

<script>

	window.onload = function(){
		
		var oMessageBox = document.getElementById("messageBox");
		var oInput = document.getElementById("myInput");
		var oPostBtn = document.getElementById("doPost");
		
		oPostBtn.onclick = function(){
			if(oInput.value){
				//写入发表留言的时间
				var oTime = document.createElement("p");
				oTime.className = "time";
				var myDate = new  Date();
				oTime.innerHTML = myDate.toLocaleString();
				oMessageBox.appendChild(oTime);
				
				//写入留言内容
				var oMessageContent = document.createElement("p");
				oMessageContent.className = "message_content";
				oMessageContent.innerHTML = oInput.value;
				oInput.value = "";
				oMessageBox.appendChild(oMessageContent);
			}
			
		}
		
	}

</script>
Copy after login

Catch the content by getting the input focus event of the input, and pass it to the p of the message board for display.

<body>
	<div class="content">
        <div class="title">用户留言</div>
        <div class="message_box" id="messageBox"></div>
        <div><input id="myInput" type="text" placeholder="请输入留言类容"><button id="doPost">提交</button></div>
    </div>
</body>
Copy after login

Recommended study: "js Basic Tutorial"

The above is the detailed content of How to leave a message in javascript. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template