js原声实现简单的微信聊天功能

又是一波福利!原声的js实现了一个简单的微信聊天功能,拿去研究吧,不要钱!更多免费好玩的源码尽在创想鸟

1W)B$RI~5G1$3GPU}ZRR[9P.png

代码:

微信聊天                *{margin: 0;}.top{width: 310px;padding: 10px 20px;background-color: gray;border-top-left-radius: 5px;border-top-right-radius: 5px;font-size: 18px;font-weight: bold;0color: white;}.content{background-color: white;}select{border: 2px solid gray;background: white; width: 350px;height: 470px;padding: 10px;}.send{width: 310px;padding: 10px 20px;background-color: gray;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;}.chat{}.box{float: left;margin: 20px 120px;}body{width: 100%;background-image: url(../img/bg.jpg);}.outer{width: 90%;margin: 10px auto;}.sText{width: 220px;height: 25px;border-radius: 5px;font-size: 15px;}.btn{width: 65px;height: 30px;border-radius: 5px;float: right;text-align: center;font-size: 18px;color: white;background-color: limegreen;}option{font-size: 15px;max-width: 325px;height: auto;border: 0.5px solid gainsboro;border-radius: 8px;padding: 10px;margin: 10px;background-color: greenyellow;margin-left: 158px;margin-top: 10px;margin-bottom: 10px;max-width: 200px;}window.onload =function () {    function g(id) {        return document.getElementById(id);    }    g('leftSendBtn').addEventListener("click",leftSendB);    g('rightSendBtn').addEventListener("click",rightSendB);}function leftSendB() {    function g(id) {        return document.getElementById(id);    }    var text = document.getElementById("leftText").value;    if(text.trim()!=''){        var leftContent = document.getElementById("leftContent");        var rightContent = g("rightContent");        var option = document.createElement('option');        var len = text.length;        option.style.width = len * 15 + len*2 + "px";        option.style.marginLeft = 350 - (len * 15 + len*2) - 72 +"px";        option.innerHTML = text;        leftContent.appendChild(option);        var option1 = document.createElement("option");        option1.innerHTML = text;        option1.style.backgroundColor = "white";        option1.style.marginLeft = "10px";        option1.style.width = len * 15 + len*2 + "px";        rightContent.appendChild(option1);        document.getElementById("leftText").value = "";    }}function rightSendB() {    function g(id) {        return document.getElementById(id);    }    var text = g("rightText").value;    if(text.trim()!='')    {        var leftContent = document.getElementById("leftContent");        var rightContent = g("rightContent");        var option = document.createElement('option');        var len = text.length;        option.style.width = len * 15 + len*2 + "px";        option.style.marginLeft = 350 - (len * 15 + len*2) - 72 +"px";        option.innerHTML = text;        rightContent.appendChild(option);        var option1 = document.createElement("option");        option1.innerHTML = text;        option1.style.backgroundColor = "white";        option1.style.marginLeft = "10px";        option1.style.width = len * 15 + len*2 + "px";        leftContent.appendChild(option1);        g("rightText").value = "";    }}

PHP中文网-朱老师

PHP中文网-lge

免费拿去研究吧!更多好的源码尽在PHP中文网,关注我们给你好看~

相关推荐:

html会动的小狗狗源码

JavaScript获取当前网页源码的实例

Java实现坦克大战游戏的源码示例

以上就是js原声实现简单的微信聊天功能的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1545197.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 16:40:32
下一篇 2025年12月21日 16:40:41

相关推荐

  • css,js实现听话的骰子源码

    又是一波福利!css和js实现的一个听话的骰子,拿去研究吧,不要钱! 代码: PHP中文网–骰子源码html,body,ul {margin: 0;padding: 0;}body {perspective: 2000px;overflow: hidden;text-align: center;}…

    2025年12月21日
    000
  • css,js骰子抽奖源码

    本源码是根据之前发布的听话的骰子基础上再做升级的,免费提供源码,拿去学习吧!常来我们的创想鸟即可哦~ 代码: PHP中文网–骰子抽奖html,body,ul {margin: 0;padding: 0;}body {perspective: 1200px;overflow: hidden;}ul …

    2025年12月21日
    000
  • js实现html转成pdf

    在项目开发的时候,我们偶尔或者是经常会遇到一些难题,关于用js吧html页面转换成pdf也是一个难题,意思是说相当于把整个页面截下来,然后保存成pdf。 其实,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1、大部分浏览器就有这个功能。然而我们客户要的可不是这个,人家要的是能够在系统中…

    好文分享 2025年12月21日
    000
  • 原生js实现下拉列表框

    模仿qq列表点击下拉,js原生实现,免费源码提供研究,拿去吧!关注创想鸟给你更多好看的! 代码: PHP中文网–下拉框ul , h2 { padding:0; margin:0; }li { list-style:none; }#list { width:240px; border:1px sol…

    2025年12月21日
    000
  • html和CSS以及JavaScript的小例题(图)

    声明:本栏目所使用的素材都是凯哥学堂VIP学员所写,学员有权匿名,对文章有最终解释权;凯哥学堂旨在促进VIP学员互相学习的基础上公开笔记。 这个例题主要是做一个表格,一个存储*的表格,能够完成以下功能:1.添加学生2.删除学生3.修改学生4.分页查询学生html代码: CSS代码: JavaScri…

    2025年12月21日 好文分享
    000
  • JavaScript中的同步与异步的详解

    在javascript中,一个线程执行的时候不依靠其他线程处理完毕我们称为异步,相反一个线程必须等待直到另一个线程处理完毕我们则称为同步。打个比方:  (1)同步就是你在煮方便面的时候必须等水开了,你才会放调料和方便面;  (2)异步就是你在煮方便面的时候不需要等水开了,你可以刚开始开火的时候,就放…

    好文分享 2025年12月21日
    000
  • html格式化输出JSON

    本篇文章主要介绍了html格式化输出json示例(测试接口) ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 将 json 数据以美观的缩进格式显示出来,借助最简单的 JSON.stringify 函数就可以了,因为此函数还有不常用的后面2个参数。 见MDN https…

    好文分享 2025年12月21日
    000
  • html5+CSS3+JS七夕告白功能实现详解

    因为今天8月28日就是中国的情人节—七夕,作为我这个程序猿一枚也不甘落后,还有一颗脱单的心,下面小编给大家制作了基于html5+css3+js实现的七夕情人节特效,具体实例代码,大家参考下本文  因为今天8月28日就是中国的情人节—七夕,作为程序猿一枚的我就只有在家敲代码咯!但我还是有一颗脱单的心;…

    2025年12月21日
    000
  • 在a标签的href与onclick中使用JavaScript的区别

     在a标签的href与onclick中使用javascript的区别 ⒈  链接的 onclick 事件被先执行,其次是 href 属性下的动作(页面跳转,或 javascript 伪链接); ⒉  假设链接中同时存在 href 与 onclick,如果想让 href 属性下的动作不执行,oncli…

    好文分享 2025年12月21日
    000
  • html 和js 中实现倒计时功能

    倒计时主要用到的知识点:1、设置时间间隔的setinterval可以被clearinterval取消             2、毫秒转换为时分格式                 这个是效果图      下面是js中的函数 var shijian=3600; var time=null; func…

    2025年12月21日
    000
  • html中a标签href=#与href=javascript:void(0)的区别解析

    浅谈href=#与href=javascript:void(0)的区别,需要的朋友可以参考一下 #”包含了一个位置信息 默认的锚点是#top 也就是网页的上端 而javascript:void(0)  仅仅表示一个死链接 这就是为什么有的时候页面很长浏览链接明明是#可是跳动到了页首 立即…

    好文分享 2025年12月21日
    000
  • 关于html和css以及javascript等其他的注释方式分享

    一、html的注释方法 内容 包含在“”之间的内容将会被浏览器忽略,且不会显示在用户浏览的最终界面中。 注释的部分虽然浏览器在执行时会忽略,但在浏览器中查看源代码时仍然可以看到 二、CSS的注释方法 立即学习“Java免费学习笔记(深入)”; /* css注释*/ 在单独的css样式表文件中也采用此…

    好文分享 2025年12月21日
    000
  • 关于html和CSS以及JavaScript前端命名规范的详解

    无意发现自己文件夹里面有这么一个文件,具体从哪里来的不记得了,仔细看下,发现总结的挺好的,贴出来分享一下。 无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考。 规范目的: 为提高团队协作效率, 便于后…

    好文分享 2025年12月21日
    000
  • javascript历史记录API是什么_如何操作浏览器的历史栈?

    History API 通过 history.pushState() 和 replaceState() 实现无刷新 URL 变更与历史管理,配合 popstate 事件监听导航,支持 SPA 的前进/后退体验;需注意同源限制、state 持久化及刷新兜底。 JavaScript 历史记录 API(H…

    2025年12月21日
    000
  • javascript如何实现表单验证_有哪些最佳实践

    JavaScript表单验证核心是提交前快速反馈错误以提升体验,但不可替代后端校验;需结合原生API、解耦规则、无障碍支持及前后端协同。 JavaScript 表单验证的核心目标是:在用户提交前快速反馈错误,提升体验,同时不能替代后端校验。实现上应兼顾即时性、可访问性与健壮性,而非仅靠 onsubm…

    2025年12月21日
    000
  • JavaScript代码如何实现模块化管理?

    JavaScript模块化主要通过ES6的import/export语法实现,需配合构建工具或现代运行时;每个文件为独立模块,支持命名/默认导出与导入,浏览器需type=”module”,Node.js需package.json设”type”:&#82…

    2025年12月21日
    000
  • javascript中的事件委托是什么_它如何提升性能?

    事件委托是利用事件冒泡机制将监听器绑定在父元素上以统一管理子元素事件的技术,可减少内存占用、避免重复绑定、提升性能,适用于列表、表格等动态内容场景,但focus/blur等不冒泡事件不可用。 事件委托是一种利用事件冒泡机制,将事件监听器绑定在父元素上,而不是为每个子元素单独绑定,从而实现对动态添加或…

    2025年12月21日
    000
  • javascript如何实现拖放功能_相关的事件有哪些

    关键拖放事件包括源元素的dragstart、drag、dragend和目标元素的dragenter、dragover、dragleave、drop;需设置draggable=”true”,在dragstart中setData,在dragover中preventDefault,…

    2025年12月21日 好文分享
    000
  • javascript如何实现数据结构_链表和树在js中怎样表示

    JavaScript中链表和二叉树均通过对象引用实现:链表节点含val和next,树节点含val、left、right;二者均为非连续引用结构,链表线性单后继,树非线性多子节点,均适合递归操作。 链表在 JavaScript 中的实现 链表由节点(Node)组成,每个节点包含数据和指向下一个节点的引…

    2025年12月21日
    000
  • javascript的数组去重有哪些方法_如何兼顾性能和可读性

    JavaScript数组去重首选[…new Set(arr)],简洁高效且语义清晰;大数组或旧环境用Map手动遍历实现O(n)性能;对象数组需自定义key比较逻辑;封装成uniqBy等函数可提升复用性与可读性。 JavaScript 数组去重有多种实现方式,兼顾性能和可读性关键在于:小数…

    2025年12月21日
    000

发表回复

登录后才能评论
关注微信