<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>聊天室</title><style>#box {
width:250px;
height:250px;
border: 1px solid black;}#text {
height: 50px;
width: 200px;
background-color: green;
font-size: 1.2em;}#btn {
height: 50px;
width: 45px;
background-color: skyblue;}</style></head><body>
<h1>聊天室</h1><div id="box"></div><br><input type="text" id="text" name="text" value=""><button id="btn">提交</button><script>var box = document.getElementById('box');var text = document.getElementById('text');var btn = document.getElementById('btn');btn.onclick = function () {
var str1 = '<span style="color:green;">西门庆:</span>'
box.innerHTML += str1+text.value + '<br>';//将文本的内容发送到聊天窗口中
var str2 = '<span style="color:red;">金莲:</span>'
box.innerHTML += str2+'你好烦人哦' + '<br>';
text.value='';/*清空文本框*/}</script></body></html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
Collection
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
