内容目录一、详细介绍二、效果展示1.部分代码2.效果图展示一、详细介绍看着简单 实际也不难功能超级实用。api自己去官网申请就行了免费10元额度可以用好久好久二、效果展示1.部分代码代码如下示例functionaddMessage(message,isUsertrue){constmessageContainer$(div).addClass(message-container).css({display:flex,flex-direction:column,margin-bottom:10px});// 添加时间戳consttimestamp$(div).css({font-size:0.8em,color:#666,align-self:isUser?flex-end:flex-start,margin-bottom:2px}).text([getFormattedTime()]);messageContainer.append(timestamp);constmessageElement$(div).css({max-width:70%,padding:12px 16px,border-radius:isUser?18px 18px 4px 18px:18px 18px 18px 4px,background:isUser?#0073aa:#f1f1f1,color:isUser?white:#333,align-self:isUser?flex-end:flex-start,margin-bottom:10px,box-shadow:0 2px 4px rgba(0,0,0,0.1),position:relative,opacity:0,transform:isUser?translateX(20px):translateX(-20px),transition:all 0.3s ease}).text(message);// 添加小三角指示constarrow$(div).css({position:absolute,width:0,height:0,border:6px solid transparent,right:isUser?-12px:auto,left:isUser?auto:-12px,top:12px,border-left-color:isUser?#0073aa:transparent,border-right-color:isUser?transparent:#f1f1f1});2.效果图展示