简易聊天对话框

最新推荐文章于 2024-06-28 16:05:32 发布

晴天有点孤单

最新推荐文章于 2024-06-28 16:05:32 发布

阅读量1.9k

点赞数 1

分类专栏： # JavaScript 晴天有点孤单文章标签：对话框聊天 js

本文链接：https://blog.csdn.net/qq_39517820/article/details/77285457

版权

本文介绍如何利用JavaScript创建一个基本的聊天对话框。内容包括对话框的布局设计、事件监听以及消息发送功能的实现，适合初级前端开发者学习。

摘要由CSDN通过智能技术生成


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>聊天对话框</title>
<style type="text/css">
*{
    font-size: 14px; padding:0; margin:0;}
.main{
    position: relative;
    margin: 20px auto;
    border: 1px solid steelblue;
    width: 430px;
    height: 400px;
}
.msgInput{
    display: block;
    width: 406px;
    height: 60px;
    margin: 10px auto;

}
.sendbtn{
    position: absolute;
    width: 100px;
    height: 29px;
    bottom: 5px;
    right: 10px;
}
.content{
    list-style: none;
    width: 410px;
    height: 280px;
    margin: