收藏
<!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> 
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
