HTML+CSS+JQuey模仿微信聊天app,能实现与所有人一起聊天
2024-05-11 02:37:24
设计思路
1.数据储存
聊天群的数据存储在服务器端，通过接口获取实时渲染，
与智能助手的聊天记录储存在本地，下次打开则渲染内容。
2.功能
匿名多人聊天，智能助手，语音，清理聊天记录，恢复聊天记录等功能。
结构目录
很多代码都用注释
由于项目代码过多，无法全部展示。所以把完整项目放到云盘上 。
完整项目
密码:1sy1
效果图如下
：
主页HTML代码：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>Ax</title><link rel="stylesheet" href="./css/index.css"></head><script>function plusReady() { plus.navigator.setStatusBarBackground('#ededed');}if (window.plus) {plusReady();} else {document.addEventListener('plusready', plusReady, false);}</script><body><header><div class="header-a"><a>Ax</a></div><div class="header-b"></div> </header><ul class="ul"><li> <div><p>匿名聊天群</p></div></li><li><div><p>Ax小助手</p></div></li></ul><div class="mk"></div></body><script src="./js/jquery.js"></script><script src="./js/share/experience.js"></script><script src="./js/index/index.js"></script>
</html>CSS
* {margin: 0;padding: 0;list-style: none
}html {font-size: 10px;background-color: rgb(247, 247, 247);font-family: kaiti
}header {width: 100%;height: 5rem;background-color: rgb(237, 237, 237);border-bottom: 1px solid rgb(233, 233, 233);margin-bottom: 1rem;display: flex;justify-content: space-between;align-items: center
}.header-a {display: flex;align-items: center
}.header-a img {height: 2rem;padding-left: 1.5rem
}header a {font-size: 2rem
}.header-b img {height: 3rem;padding-right: 1.5rem
}.ul li {display: flex;align-items: center;padding: 2rem 0;margin: 0 2rem;border-bottom: 0.1rem solid rgb(224, 224, 224)
}.ul img {width: 3rem;border: 0.2rem solid rgb(233, 233, 233);padding: 0.5rem
}.ul p {margin-left: 1rem;font-size: 1.5rem
}.mk {width: 100%;height: 100%;position: fixed;top: 0;background-color: white;z-index: -50
}.ax,
.gchat {width: 100%;height: 100%;position: fixed;top: 0;left: 0;border: 0px;z-index: -90
}
JS
// 预先渲染界面
$('body').append('<iframe class="ax" src="./Ax.html" frameborder="0"></iframe>');
$('body').append('<iframe class="gchat" src="./Gchat.html" frameborder="0"></iframe>');// 点击打开相对于的界面
$('.ul li:nth-child(1)').click(() => { $('.gchat').css('z-index', '10'); })
$('.ul li:nth-child(2)').click(() => { $('.ax').css('z-index', '10'); })// 顶部栏功能
$('.header-b img:nth-child(1)').click(() => { alert('此功能暂未开发。等待后续更新！！！'); })
$('.header-b img:nth-child(2)').click(() => { location.reload(); })if (window.plus) {plusReady();} else {document.addEventListener('plusready', plusReady, false);}
document.addEventListener('plusready', function() {var first = null;plus.key.addEventListener('backbutton', function() {if (!first) {first = new Date().getTime();var urls = location.hash.split('/')[1]if (urls == "NewD" || urls == "StartScan") {plus.runtime.quit();} else {$('.ax, .gchat').css('z-index', -99);}setTimeout(function() {first = null;}, 500);} else {if (new Date().getTime() - first < 500) {plus.runtime.quit();}}});
});因内容过多这里只展示一部分代码，
很多代码都带有注释，以便大家一起学习，
因设计之初多为移动端设计。
HTML+CSS+JQuey模仿微信聊天app,能实现与所有人一起聊天相关推荐
- 【CSS】模仿微信拆红包文字左右不停旋转
/**HTML*/ <div class="btn rotate">開</div> /**WXML*/ <view class="btn r ...
- android 模仿微信读书,Flutter 模仿微信读书实现案例
前言: 各位同学大家好,有一段时间没有给大家更新博客了,最近使用flutter跨平台写了一个模仿微信读书app demo版本(模仿其中部分经典页面不是全部)觉得有几个点值得分享一下,趁着今天放假,就发 ...
- flutter 微信语言选择_Flutter 模仿微信读书效果！
原标题:Flutter 模仿微信读书效果! 作者:xq9527链接:https://www.jianshu.com/p/ee9d30ba2c42 前言 各位同学大家好,有一段时间没有给大家更新博客了, ...
- 如何选择合适的语音聊天app开发方式实现语音连麦
语音聊天app开发是以语音连麦为核心实现的社交系统,对于用户来说,良好的语音连麦功能,可以提高使用感,让用户可以坚持使用下去.为了提升语音连麦的使用体验,降低连麦延迟,语音聊天app开发会使用实时音视 ...
- uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈
一.功能阐述 今天给大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消 ...
- html+css模仿微信主页面
上周,我们进行了认知实习,任务是模仿微信页面开发.接下来我会分成四段一一展现给大家,虽然完成的不是很准确精致大概框架还是有的,在记录自己成长进步的同时,也可能会给其他小伙伴一些建议.接下来,是微信的主 ...
- 案例七 、jquery模仿微信聊天界面
首先看一下我们的效果图. 这个颜色可能搭配的有些不合适,但基本功能大都实现了.就是你和你同桌对话,你发的消息在你的左侧,而在他设备的右侧. 首先先写好整体的框架,在一个大容器中放两个盒子,分别是左侧和 ...
- 微信小程序模仿开眼视频app（二）——搜索功能
微信小程序模仿开眼视频app(一)有介绍首页.视频详情和分类部分 可到我的github账号上去copy文件 搜索部分 一开始没想要设置历史记录啊.热门搜索啊这些的,只是想把搜索框弄好看一点,无意中发现 ...
- Android之简单模仿微信聊天界面
Android之模仿微信聊天界面 运行效果图: 代码如下: MainActivity.java package com.example.chatdemo;import android.app.Acti ...
最新文章
- EmEditor Professional(文本编辑) 下载地址
- [bzoj2839]集合计数 题解 (组合数+容斥)
- JPA的泛型DAO设计及使用
- c语言中realloc()函数解析
- Spring Boot WebMagic 入库时 mapper注入提示空指针，以及正确的操作
- linux系统迁移的重要配置文件,mylinuxbackup
- 深度优先搜索（DFS）算法
- CF1550F Jumping Around
- nssl1142,jzoj3487-剑与魔法【堆,贪心】
- springboot 项目输出 sql 到控制台、 SpringBoot 中 Mybatis 打印 sql
- 持续集成与持续部署宝典Part 2：创建持续集成流水线
- sql获取日期相差天数oracle,找到oracle sql中两个日期之间的经过时间
- qt添加菜单纯代码_Qt Creator 插件开发(3)：添加菜单项
- motion加树莓派打造实时监控
- 基于springboot+vue的交通事故案例库系统
- 获取字符串的md5sum值——分别使用shell、python、c++实现
- 四十六、Stata离散选择模型，时间序列和面板数据
- python一次性导入依赖包_python如何导入依赖包
- 小白系统盘制作详细教程
- java utility 是什么_Java Utility类代码示例