前端技术(23) : 聊天页面
来源: GPT生成之后微调
效果图
HTML代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>聊天</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.container {display: flex;height: 100vh;}.contact-list {flex: 1;background-color: #f4f0ff;/* 浅紫色背景 */padding: 20px;max-width: 300px;border-right: 1px solid #DDD;box-sizing: border-box;display: flex;flex-direction: column;gap: 10px;}.contact {padding: 10px 20px;cursor: pointer;transition: background-color 0.3s;display: flex;justify-content: space-between;align-items: center;}.contact.active {background-color: #e6d5ff;/* 选中联系人更深的紫色背景 */}.contact-name {font-weight: bold;}.contact-status {width: 10px;height: 10px;border-radius: 50%;}.status-online {background-color: #0F0;/* 在线状态的颜色 */}.status-offline {background-color: #F00;/* 离线状态的颜色 */}.status-away {background-color: #FF0;/* 离开状态的颜色 */}.conversation {flex: 2;background-color: #f9f7ff;/* 淡紫色对话窗口 */padding: 20px;box-sizing: border-box;display: flex;flex-direction: column;}.message-container {flex: 1;overflow-y: auto;padding: 10px;display: flex;flex-direction: column;}.message {padding: 10px;margin: 20px;max-width: 70%;word-wrap: break-word;border-radius: 10px;box-shadow: 2px 2px 5px #ccc;display: inline-block;clear: both;}.message-time {font-size: 12px;color: #666;position: absolutemargin-left: 10px;float: right;}.user-message {background-color: #baf2ff;/* 浅蓝色用户消息气泡 */align-self: flex-end;}.contact-message {background-color: #f7e7ff;/* 淡紫色联系人消息气泡 */align-self: flex-start;}.input-container {display: flex;align-items: center;}.message-input {flex: 1;padding: 10px;margin: 10px;box-sizing: border-box;border: 1px solid #DDD;border-radius: 5px;background-color: #f4f0ff;/* 浅紫色背景 */resize: none;/* 禁止用户调整文本域大小 */font-size: 18px;}.send-button {padding: 10px 20px;margin: 10px;border: none;background-color: #8a4d76;/* 深紫色按钮 */color: #FFF;border-radius: 5px;cursor: pointer;}h2 {margin-top: 0;padding-top: 10px;color: #8a4d76;/* 深紫色标题 */}h3 {margin-top: 0;padding-top: 10px;color: #8a4d76;/* 深紫色标题 */}</style></head><body><div class="container"><div class="contact-list"><h2>联系人列表</h2><div class="contact active" onclick="changeActive(this)"><span class="contact-name">联系人1</span><div class="contact-status status-online"></div></div><div class="contact" onclick="changeActive(this)"><span class="contact-name">联系人2</span><div class="contact-status status-offline"></div></div><div class="contact" onclick="changeActive(this)"><span class="contact-name">联系人3</span><div class="contact-status status-away"></div></div></div><div class="conversation" id="conversation"><h3 id="current-contact">联系人姓名</h3><div class="message-container" id="message-container"></div><div class="input-container"><textarea class="message-input" id="message-input" placeholder="Enter 发送, ALT+回车 换行"rows="8"></textarea><!-- <button class="send-button" onclick="sendMessage()">发送</button> --></div></div></div><script>function changeActive(element) {var contactList = document.getElementsByClassName('contact');for (var i = 0; i < contactList.length; i++) {contactList[i].classList.remove('active');}element.classList.add('active');document.getElementById('current-contact').innerText = element.querySelector('.contact-name').innerText;}// 监听键盘事件document.getElementById('message-input').addEventListener('keydown', function(e) {if (e.key === 'Enter' && !e.altKey) { // 按下 Enter 键发送消息e.preventDefault(); // 阻止默认换行行为sendMessage();} else if (e.key === 'Enter' && e.altKey) { // 按下 Alt+Enter 换行this.value += '\n';}});function sendMessage() {var messageInput = document.getElementById('message-input').value;var messageContainer = document.getElementById('message-container');var div = document.createElement('div');div.className = 'message user-message';div.innerHTML = messageInput+'</br></br><span class="message-time">12:35 PM</span>';div.style.whiteSpace = 'pre-wrap';messageContainer.appendChild(div);messageContainer.scrollTop = messageContainer.scrollHeight;document.getElementById('message-input').value = '';// 模拟对方回复消息setTimeout(function() {var replyDiv = document.createElement('div');replyDiv.className = 'message contact-message';replyDiv.innerHTML = messageInput+'</br></br><span class="message-time">12:35 PM</span>';replyDiv.style.whiteSpace = 'pre-wrap';messageContainer.appendChild(replyDiv);messageContainer.scrollTop = messageContainer.scrollHeight;}, 1000);}</script></body>
</html>
相关文章:
前端技术(23) : 聊天页面
来源: GPT生成之后微调 效果图 HTML代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>聊天</t…...
ArcMap 处理河道坡度、计算污染区、三维爆炸功能
ArcMap 处理河道坡度、计算污染区、三维爆炸功能今天分析 一、计算河道方向坡度 1、折线转栅格 确定 2、提取河道高程值 确定后展示河流的高程值 3、计算坡向数据 确定后展示 4、计算坡度数据 确定后展示 二、计算上游集水区污染值 1、填挖处理 确定 2、计算流向 确定 3、计算…...
数据结构 (30)计算式查找法——哈希法
前言 数据结构中的计算式查找法,特别是哈希法(又称散列法、杂凑法、关键字地址计算法),是一种高效的查找技术。 一、哈希法的基本概念 哈希法是通过一个哈希函数将关键字映射到哈希表中的某个位置,从而实现快速查找的技…...
电子商务人工智能指南 4/6 - 内容理解
介绍 81% 的零售业高管表示, AI 至少在其组织中发挥了中等至完全的作用。然而,78% 的受访零售业高管表示,很难跟上不断发展的 AI 格局。 近年来,电子商务团队加快了适应新客户偏好和创造卓越数字购物体验的需求。采用 AI 不再是一…...
交易系统:线上交易系统流程详解
大家好,我是汤师爷~ 今天聊聊线上交易系统流程详解。 线上交易系统为新零售连锁商家提供一站式线上交易解决方案。其核心目标是,通过数字化手段扩大商家的服务范围,突破传统门店的地理限制。系统支持电商、O2O等多种业务形态,为…...
如何通过自学成长为一名后端开发工程师?
大家好,我是袁庭新。最近,有星友向我提出了一个很好的问题:如何通过自学成为一名后端开发工程师? 为了解答这个疑问,我特意制作了一个视频来详细分享我的看法和建议。 戳链接:如何通过自学成长为一名后端开…...
实际车辆行驶轨迹与预设路线偏离检测的Java实现
准备工作 本项目依赖于两个关键库:JTS Topology Suite(简称JTS),用于几何对象创建和空间分析;以及GeoTools,用于处理坐标转换和其他地理信息任务。确保开发环境中已经包含了这两个库,并且正确配…...
pci_resource相关函数
一、介绍 pci_resource_start函数用于获取PCI设备中指定Bar寄存器记录资源起始地址, 函数原型: resource_size_t pci_resource_start(struct pci_dev *dev, int bar) 参数: dev: PCI 设备结构体指针 bar: BAR 寄存器索引 (0-5) 返回&a…...
Android Studio 历史版本下载
Android Studio 历史版本下载 官方链接:https://developer.android.google.cn/studio/archive 通过gradle插件版本反查Android Studio历史版本 Android Studio Ladybug | 2024.2.1 October 1, 2024 【https://redirector.gvt1.com/edgedl/android/studio/ide-zip…...
Jupyter Lab打印日志
有时候在 jupyter 中执行运行时间较长的程序,且需要一直信息,但是程序执行到某些时候就不再打印了。 可以开启 日志控制台,将日志信息记录在控制台中。 参考:https://www.autodl.com/docs/jupyterlab/...
guava缓存的get方法的回调函数讲解一下
CacheBuilder.newBuilder()//设置缓存初始大小,应该合理设置,后续会扩容.initialCapacity(10)//最大值.maximumSize(100)//并发数设置.concurrencyLevel(5)//缓存过期时间,写入后10分钟过期.expireAfterWrite(600,TimeUnit.SECONDS)//统计缓存…...
【双分派小结】
双分派(Double Dispatch)是一种面向对象编程中的设计模式,通常用于实现多态性,尤其是在涉及多个对象交互时。它的基本思想是通过两个不同的对象来确定方法调用,而不仅仅是依赖于一个对象。 双分派的工作原理 在普通的…...
Python100道练习题
Python100道练习题 BIlibili 1、两数之和 num1 20 num2 22result num1 num2print(result)2、一百以内的偶数 list1 []for i in range(1,100):if i % 2 0:list1.append(i) print(list1)3、一百以内的奇数 # 方法一 list1 [] for i in range(1,100):if i % 2 ! 0:lis…...
Scala—Slice(提取子序列)方法详解
Scala—Slice(提取子序列)方法详解 在 Scala 中,slice 方法用于从集合中提取一个连续的子序列(切片)。可以应用于多种集合类型,如 List、Array、Seq 等。 一、slice 方法的定义 slice 根据提供的起始索引…...
nginx根据报文里字段转发至不同地址
nginx接收到post请求.请求报文里是一个json字符串,字符串里有个字段id。 根据id不同,转发到不同地址。 如果idaaa,转发到www.aaa.com.test 如果idbbb,转发到www.bbb.com.test 如何配置,请提供一个nginx.conf 要在 Nginx 中根据 POST 请求的 JSON 负载中的…...
Kafka单机及集群部署及基础命令
目录 一、 Kafka介绍1、kafka定义2、传统消息队列应用场景3、kafka特点和优势4、kafka角色介绍5、分区和副本的优势6、kafka 写入消息的流程 二、Kafka单机部署1、基础环境2、iptables -L -n配置3、下载并解压kafka部署包至/usr/local/目录4、修改server.properties5、修改/etc…...
TCP Robot Send Recive
Function main String data$ 定义字符串变量 SetNet #205, "192.168.0.1", 2004, CRLF, NONE, 0 设置端口号IP地址 OpenNet #205 As Server 端口号对应pc机的端口号 Print "等待201端口连接" WaitNet #201 等待201网…...
旅游管理系统|Java|SSM|VUE| 前后端分离
【重要1⃣️】前后端源码万字文档部署文档 【重要2⃣️】正版源码有问题包售后 【包含内容】 【一】项目提供非常完整的源码注释 【二】相关技术栈文档 【三】源码讲解视频 【其它服务】 【一】可以提供远程部署安装…...
qt-everywher交叉编译e-src-5.15.2
简化配置的方式: 你完全可以通过直接配置 安装目录、编译链 和 目标架构 来完成交叉编译,而不需要修改 mkspecs 配置。以下是如何通过简化配置来进行交叉编译 Qt 的步骤。 准备交叉编译工具链 首先,确保你已经安装了交叉编译工具链ÿ…...
Cursor vs VSCode:主要区别与优势分析
Cursor - The AI Code Editor 1. AI 集成能力 Cursor的优势 原生AI集成: # Cursor可以直接通过快捷键调用AI # 例如:按下 Ctrl K 可以直接获取代码建议 def complex_function():# 在这里,你可以直接询问AI如何实现功能# AI会直接在编辑器中…...
Qt 小项目 学生管理信息系统
主要是对数据库的增删查改的操作 登录/注册界面: 主页面: 添加信息: 删除信息: 删除第一行(支持多行删除) 需求分析: 用QT实现一个学生管理信息系统,数据库为MySQL 要求…...
Hadoop3集群实战:从零开始的搭建之旅
目录 一、概念 1.1 Hadoop是什么 1.2 历史 1.3 三大发行版本(了解) 1.4 优势 1.5 组成💗 1.6 HDFS架构 1.7 YARN架构 1.8 MapReduce概述 1.9 HDFS\YARN\MapReduce关系 二、环境准备 2.1 准备模版虚拟机 2.2 安装必要软件 2.3 安…...
软件工程复习记录
基本概念 软件工程三要素:方法、工具、过程 软件开发方法:软件开发所遵循的办法和步骤,以保证所得到的运行系统和支持的文档满足质量要求。 软件开发过程管理 软件生命周期:可行性研究、需求分析、概要设计、详细设计、编码、测…...
爬虫运行后数据如何存储?
爬虫运行后获取的数据可以存储在多种不同的存储系统中,具体选择取决于数据的规模、查询需求以及应用场景。以下是一些常见的数据存储方法: 1. 文件系统 对于小型项目或临时数据存储,可以直接将数据保存到本地文件中。常见的文件格式包括&…...
【C语言】C语言的潜规则:运行环境对C程序执行特性的影响
C语言的潜规则:C语言的执行会因为它的运行环境被赋予不同的特性 C语言是一种非常底层、高效、灵活的编程语言,但这种灵活性也带来了很多不确定性。C语言的行为在很大程度上依赖于其运行环境(编译器、操作系统、硬件架构等)。这也…...
Win11 24h2 不能正常ensp
Win11 24h2 不能正常ensp 因为Win11 24h2的内核大小更改,目前virtualbox在7.1.4中更新解决了。而ensp不支持5.2.44之后的virtualbox并已停止维护,不再进行5.2.44修复,virtualbox 5.2.24的ntdll文件sizeofimage问题,此问题导致ens…...
【认证法规】安全隔离变压器
文章目录 定义反激电源变压器 定义 安全隔离变压器(safety isolating transformer),通过至少相当于双重绝缘或加强绝缘的绝缘使输入绕组与输出绕组在电气上分开的变压器。这种变压器是为以安全特低电压向配电电路、电器或其它设备供电而设计…...
【北京迅为】iTOP-4412全能版使用手册-第六十七章 USB鼠标驱动详解
iTOP-4412全能版采用四核Cortex-A9,主频为1.4GHz-1.6GHz,配备S5M8767 电源管理,集成USB HUB,选用高品质板对板连接器稳定可靠,大厂生产,做工精良。接口一应俱全,开发更简单,搭载全网通4G、支持WIFI、蓝牙、…...
MFEM源码分析:代数库
数值计算引擎通常需要将表征物理模型的数学模型转化为线性/非线性方程组,进而求解这些线性/非线性方程组来获取数值解。因此,代数库自然成为数值计算引擎不可或取的模块。 而且,普遍认为,代数库的性能在很大程度上决定数值计算引…...
全景图相关算法学习笔记
目录 ldm3d CVPR 2024 Highlight 文本生360全景!PanFusion 全景图光流学习 一张2D全景图可合成高质量的360度3D场景 全景图生成3d ldm3d https://huggingface.co/Intel/ldm3d-pano CVPR 2024 Highlight 文本生360全景!PanFusion 文生图࿰…...
3D 目标检测:从萌芽到前沿的技术演进之路
亲爱的小伙伴们😘,在求知的漫漫旅途中,若你对深度学习的奥秘、JAVA 、PYTHON与SAP 的奇妙世界,亦或是读研论文的撰写攻略有所探寻🧐,那不妨给我一个小小的关注吧🥰。我会精心筹备,在…...
泷羽sec:shell编程(9)不同脚本的互相调用和重定向操作
声明: 学习视频来自B站up主 泷羽sec 有兴趣的师傅可以关注一下,如涉及侵权马上删除文章,笔记只是方便各位师傅的学习和探讨,文章所提到的网站以及内容,只做学习交流,其他均与本人以及泷羽sec团队无关&#…...
Java Web 3 Axios Vue组件库
一 Ajax 1 同步 异步 2 原生Ajax 比较繁琐 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Documen…...
探索未来驾驶:全面解析现代汽车高级辅助驾驶系统功能(APA 、SDA 、TBA、RPA、HPA、PEB)
随着科技的不断进步,汽车行业正在经历一场革命,自动驾驶技术逐渐成为现实。从自适应巡航控制到完全自动驾驶,各种高级驾驶辅助系统(ADAS)正在改变我们的驾驶方式。今天,我们将深入探讨几种关键的高级驾驶辅…...
MYSQL - 索引详解
一 什么是索引? 实际上在上一篇介绍MYSQL的体系结构当中我们稍微提及了一点,在引擎层,我们提到不同的引擎对应的索引的实现方式,选择是不一样的。 简单理解,索引(index)其实就是一种帮助MYSQL高…...
AI智能体Prompt预设词指令大全+GPTs应用使用
AI智能体使用指南 直接复制在AI工具助手中使用(提问前) 可前往SparkAi系统用户官网进行直接使用 SparkAI系统介绍文档:Docs 常见AI智能体GPTs应用大全在线使用 自定义添加制作AI智能体进行使用: 文章润色器 你是一位具有敏锐洞察…...
美团一面,有点难度
前几天分享过一篇训练营的朋友在阿里的一面面经,挺简单的她也是很轻松的过了,感兴趣的可以看一下我之前发的文章。 今天要分享的还是她的面经,美团的一面,感觉比阿里的难一些,各位观众老爷你怎么看? 自我介…...
axios取消请求
Axios 使用 cancel token 取消请求 1、先在axios请求中加上cancelToken import request from ../utils/request // 配置过的Axios 对象 import axios from axios export function getDetail(params, that) { return request({url: /api/indexlineage/detail, method: get,par…...
Spark简介
Spark简介 菜鸟弹性分布式数据集 (RDDs)参考 Spark通过两种方式使用Hadoop:一种是存储,另一种是处理。由于Spark具有自己的集群管理计算,因此仅将Hadoop用于存储目的。 Spark 的关键思想是- [Resilient Distributed Datasets(RDD…...
visual studio2017版本的安装下载
绝绝子,官网找了半天都不知道在哪里下载的,和当初下载旧版本的qt一样难受,还是用百度云吧!!!!!!!!!! 参考文章࿱…...
【Linux】ubuntu下一键配置vim
🔥个人主页🔥:孤寂大仙V 🌈收录专栏🌈:Linux 🌹往期回顾🌹:Linux权限(超详细彻底搞懂Linux的权限) 🔖流水不争,争的是滔滔…...
[光源控制] UI调节光源亮度参数失效
📢博客主页:https://loewen.blog.csdn.net📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!📢本文由 丶布布原创,首发于 CSDN,转载注明出处🙉📢现在的付出,都会是一种沉淀,只为让你成为更好的人✨文章预览: 一. 前言二. 串口调试助手辅助排查接线问题二. …...
C语言学习:速通指针(2)
这里要学习的有以下内容 1. const修饰指针 2. 野指针 3. assert断⾔ 4. 指针的使⽤和传址调⽤ 那么从这里开始 1. const 修饰指针 const修饰变量 首先我们知道变量是可以修改的,如果把变量的地址交给⼀个指针变量,通过指针变量的也可以修改这个变…...
方案拆解 | 打击矩阵新规频出!2025矩阵营销该怎么玩?
社媒平台的矩阵营销又要“变天”了?! 11月18日,小红书官方发表了被安全薯 称为“小红书史上最严打击黑灰产专项”新规,其中就包括黑灰产矩阵号的公告。 ▲ 图源:小红书 实际上,不包括这次,今年…...
Ubuntu22.04深度学习环境安装【cuda+cudnn】
为了复现一篇深度学习论文,特意安装了Linux系统。前一天已经安装Linux显卡驱动,现在需要安装cuda、cudnn等。 论文代码 论文PDF 确定包版本: 根据论文提供的代码。在requirements.txt中发现cuda版本为11.7,cudnn为8.5.0,python没…...
etcd分布式存储系统快速入门指南
在分布式系统的复杂世界中,确保有效的数据管理至关重要。分布式可靠的键值存储在维护跨分布式环境的数据一致性和可伸缩性方面起着关键作用。 在这个全面的教程中,我们将深入研究etcd,这是一个开源的分布式键值存储。我们将探索其基本概念、特…...
dataTable
在 C# 中,DataTable 是 .NET Framework 中用于处理数据表格的一个类,属于 System.Data 命名空间。它是一种内存中表示数据表的结构,通常用于临时存储和操作数据,类似于数据库中的表。DataTable 的主要特点是行列结构,其…...
Flink学习连载文章11--双流Join
双流 Join 和两个流合并是不一样的 两个流合并:两个流变为 1 个流 union connect 双流 join: 两个流 join,其实这两个流还是原来的,只是满足条件的数据会变为一个新的流。 可以结合 sql 语句中的 union 和 join 的区别。 在离线 Hive 中&…...
RayLink远程控制技术助力教育领域的创新应用研究
远程控制技术在教育领域的应用确实改变了传统教学模式。想象一下,无论身处何地,只要有网络连接,就能通过远程软件加入课堂,这种体验是不是很吸引人?虽然远程控制听起来很技术化,但别担心,小编今…...
【Qt移植LVGL】QWidget手搓LVGL软件仿真模拟器(非直接运行图形库)
【Qt移植LVGL】QWidget手搓LVGL软件仿真模拟器(非直接运行图形库) 打包开源地址: Qt函数库gitee地址 更新以gitee为准 移植后的demo工程: gitee 有些没实现的 后续我会继续优化 文章目录 别碰瓷看清楚:是移植&#…...
蹭上小红书“泼天的流量”,有人开始赚“泼天的富贵”
“泼天的流量”突然砸到了小红书头上,面对海量外国友人,民间网友交流玩梗不亦乐乎的同时,已经有些商业嗅觉敏锐的运营者力图抓住这波“泼天的富贵”。一夜之间,国内互联网大厂积极招揽用户,跨境电商、海外MCN公司也行动起来,搬运带货…...
岛内景点被喷简体字“中国台湾省”引不满,国台办回应(图)
台媒:兰屿乡朗岛地区环岛公路凉亭、告示牌遭人以简体字涂写「中国台湾省」等字样 中国台湾网1月15日讯 国务院台湾事务办公室今天上午举行例行新闻发布会,国台办发言人陈斌华主持本次新闻发布会。台湾《联合报》记者:台湾兰屿有景点近日被不明人士用白漆喷上简体字&ldqu…...
天上九头鸟——军歌嘹亮篇(45)
四十五章:军功章里有我的一半也有你的一半张俊峰和刘虻被送进了野战医院,张俊峰的伤势并不严重,后背宛若北斗七星状被崩了七块弹片,后颈窝也中了一块弹片。妹妹綦豫来看哥哥,见哥哥打着赤膊俯卧在床上,背上粘满了纱布包,脖子上还缠着纱带,便开玩笑说:“哥,是…...
马志远:回忆农村里的几个吕剧“小戏”
偶然间刷到一个名叫“吕剧名家名曲”的小视频推出的吕剧曲目《王汉喜借年》里的一个小唱段,讲的是旧社会(这出戏也没有讲故事发生于哪朝哪代)有个贫苦的青年王汉喜,在春节即将来到的时候,家里穷得揭不开锅,一家人不知道怎么过年才好;万般无奈之际,王…...
十月革命的旗帜永不倒!
2025年11月7日,将是伟大的十月革命108周年纪念日。“希望1917年燃起的列宁永恒思想之火,能够永远在你们心中燃烧。”108年前轰轰烈烈的俄国十月革命的打响,全世界的人们听到了无产阶级的呐喊!1917年11月7日是俄历的10月25日,在这一天,列宁领导的布尔什…...
胖东来彩礼新规何以能逆转舆论?
摘要:给钱就是爹,不给钱就是爹味?这里的意思就是,人与人是平等的,不要爹味,更不要当爹,假如你要提出一些“额外要求”去表现自己高维的、高一等的价值站位,那么就要以“额外福利”去激励,而不是理直气壮地让人踮着脚去仰视你的价…...