仿QQ聊天程序(java)

29 篇文章 5 订阅

简易版qq聊天qq聊天[简易版] (resourcecode.cn)

推荐java最新聊天项目java仿微信聊天): java 简单仿微信聊天(springboot)_Garry1115的博客-CSDN博客_springboot 模拟微信

转载请标明出处:牟尼的专栏 牟尼的博客_CSDN博客-算法,C++,JAVA领域博主

一、设计内容及要求

1.1综述

A.系统概述

我们要做的就是类似QQ这样的面向企业内部的聊天软件,基本功能和QQ类似。首先,系统分为两大部分,第一部分是客户端,是用户使用的部分,第二部分就是服务器,所有的客户端都是通过服务器来进行用户身份验证及聊天转接的。客户端提供主要的界面及服务请求,如:登录界面、注册界面、找回密码界面、主窗体界面、聊天界面、信息查看界面等。客户端主要提供服务请求界面,核心的业务逻辑处理主要由服务器提供,并向客户端发送请求的结果。同时,服务器要能提供服务的开启、关闭功能及查看在线人数及客户端登录日志。

人员组成及分工

张XX(组长):负责整体的架构设计、后台数据库及通信部分。

房 X(组员):聊天界面、注册界面、登录界面、找回密码、及其业务逻辑。

高 X(组员):主窗体界面、信息查看及其业务逻辑。

B.要求

1).小组成员必须按时完成各自的任务。

2).设计上与技术上有问题的先自行解决(看书、上网查),如不能解决的集体讨论解决。有其它的问题及时提出来!

3).必须写文档(写把各自模块的整体设计用UML图或Viso画的图(尽量不要只是简单的语言叙述)表达出来),学会用面向对象的思想来来设计,采用模块化的思想分解模块。(设计原则与设计模式能用的用)

4).每个类必须有类说明,每个函数也必须有函数说明,函数的具体设计也必须有必要的注释。

5).如果不能遵守规定或要求的可以提前退出,不强留。

(注:即使不会写代码,也没关系,只要一能用UML图或其他的图等表达出自己的设计思想及具体的实现设计也行)

C.开发环境

运行环境:Myeclipse集成开发环境,jdk 1.6版本。

使用语言:Java语言。

使用数据库:Oracle数据库。

1.2需求分析

需求背景

即时通信软件为我们提供了诸多的方便,使我们逐步享受信息时代的便捷。大家最熟悉的即时通信软件就是QQ了,因为它几乎已经融入了我们每个人的日常生活。没有了QQ,没有了手机,我们或许真的“活不了了”。由此可见,生活在信息时代的人们对即时通信、聊天软件有巨大的需求,这样的软件也将为我们节省大量的时间和金钱,或许还能成为我们发家致富的工具,比如:产品的推介、售后服务及技术交流等。

    然而,既然已经有了QQ如此强大的即时通信软件,我们再去做这样的软件还有什么竞争力吗?QQ已经深入人心,要想再去做可能没有任何竞争力。此时,我们可以换一个角度,调整用户对象。如今,企业内部信息在这个信息时代就是金钱,尤其是一些大企业的内部信息,如果这些信息泄露,可能会造成巨大的经济损失,甚至将导致企业破产。但是,为了便捷企业员工之间的交流,做这样的一个企业内部即时通信、聊天软件还是很有市场的。我们的目标就是做的像QQ,但面向企业内部使用。

      企业内部为了方便员工之间便捷的交流,需要开发一款适合企业内部员工进行即时通信的软件,这样的软件既满足了企业内部员工之间便捷的交流,同时,也防止企业内部信息的外流,开发这样一块面向企业内部的即时通信软件,对于企业来说获益良多。

       在开发这款软件时,为了使习惯了使用QQ的用户,更加方便的使用本软件,我们将很大程度上,模仿QQ的用户界面设计,以适应用户的使用习惯,方便用户使用。

功能需求

1)客户端:提供登录、主窗体及聊天等界面及对应的业务逻辑,向服务器发送相应的服务请求,并接受相应的处理结果。客户端是轻量级的软件,只负责链接远程服务器,并发出相应的服务请求,并不进行核心业务逻辑的处理。具体的处理交给服务器,而客户端只接收服务器处理的结果并显示给用户。

2)服务器:监控登录信息及在线用户信息,接收客户端的服务请求,并做相应的处理,然后将处理结果发送给客户端。服务器负责处理核心的业务逻辑,并负责连接数据库,保存和读取数据。因此,服务器端设计的好坏也直接影响即时通信软件的质量。

用例描述

1)客户端:

                                                                                       图 1-1 客户端用例图

2)服务器:

                                                                           图 1-2 服务器端用例图

二、设计原理及方案

2.1总体设计

系统架构设计

1)采用MVC架构模式

客户端:

A.   包view(视图、界面层):只负责界面的显示。

B.   包business(业务逻辑层):核心业务的处理。

C.   包data  (数据访问层):读写数据、接收发送数据。

服务器:

A. 包view(视图、界面层):只负责界面的显示。

B. 包business(业务逻辑层):核心业务的处理。

C. 包data  (数据访问层):读写数据、接收发送数据。

2)           文件组织

A.     客户端:

图2-1 客户端文件组织结构

B.     服务器:

图2-2 服务器文件组织结构

3)             采用基于网路的三层C/S模式

图2-3 基于C/S的模式图

功能模块设计

1)客户端:

图2-4 客户端功能模块图

2)服务器:

图3-5 服务器功能模块图

数据库设计

1)概念结构设计

   图 2-6 数据库实体E-R图

2)逻辑结构设计

用户表(QQ号、密码、签名、头像编号、昵称、性别、生日、星座、血型、学历、电话、邮箱、所在地)

分组表(组号、组名、创建时间、QQ号)

好友表(好友QQ号、QQ号、所属分组号、添加时间、是否上线)

聊天记录表(记录编号、发送者QQ号、接受者QQ号、发送时间、信息编号)

聊天内容信息编号、内容、字体类型、字体大小、字体颜色)

登录信息表(登录编号、登录IP、端口号、登录时间、是否在线、QQ号)

QQ群群编号、群名称、创建时间)

用户与群关系关系编号、QQ号、群编号)

3)表结构设计

表 2-1 用户与群关系(User_Group)

字段名称

说明

字段类型

字段长度

是否为空

约束

ugno

关系编号

Number

2

主键

qq

QQ号

number

5

外键

gno

群编号

number

5

外键

表 2-2 用户信息表(UserInfo)

字段名称

说明

字段类型

字段长度

是否为空

约束

qq

QQ号

number

5

主键

pwd

密码

Nvarchar2

10

sign

签名

Nvarchar2

30

photoID

头像编号

Number

2

nickname

昵称

Nvarchar2

10

sex

性别

Char

2

男或女

birthday

生日

Date

constellation

星座

Nvarchar2

60

bloodType

血型

Char

10

A、B、O、AB

diploma

学历

Nvarchar2

10

telephone

电话

Nvarchar2

15

email

电子邮件

Nvarchar2

20

address

所在地

Nvarchar2

20

 表 2-3分组信息表(Subgroup)

字段名称

说明

字段类型

字段长度

是否为空

约束

sno

组号

Number

2

主键

sname

组名

Nvarchar2

20

sdate

创建日期

Date

默认当前日期

qq

QQ号

number

5

外键

 表 2-4好友信息表(Friends)

字段名称

说明

字段类型

字段长度

是否为空

约束

Fno

编号

Number

2

主键

fqq

好友QQ

number

5

外键

fsno

所属分组号

Number

2

外键

fdate

添加日期

Date

Fstatus

是否在线

number

2

qq

本人QQ

number

5

外键

 表 2-5聊天记录表(ChatInfo)

字段名称

说明

字段类型

字段长度

是否为空

约束

cno

记录编号

number

2

主键

csendqq

发送者QQ

number

5

外键

creceiveqq

接受者QQ

number

5

外键

cdate

发送日期

TimeStamp

tno

信息编号

Number

3

外键

 表 2-6信息表(Text)

字段名称

说明

字段类型

字段长度

是否为空

约束

tno

信息编号

Number

3

主键

tcontext

内容

Nvarchar2

200

tfonttype

字体类型

Nvarchar2

10

tfontsize

字体大小

Number

5

tfontcolor

字体颜色

Nvarchar2

5

 表 2-7登录信息表(Login)

字段名称

说明

字段类型

字段长度

是否为空

约束

lno

登录编号

Number

5

主键

lip

登录IP

Nvarchar2

20

lport

端口号

Number

5

ldate

登录日期

Date

lstatus

是否在线

Number

1

1 or 0

lqq

QQ号

number

5

外键

 表 2-8 QQ群信息(GroupTable)

字段名称

说明

字段类型

字段长度

是否为空

约束

gno

群编号

Number

5

主键

gname

群名称

Nvarchar2

20

gdate

创建日期

date

通信协议设计

计算机之间传送数据由两种,即TCP通信和UDP通信。TCP是可靠的面向连接的通信协议,二UDP是不可靠的面向无连接的通信协议。

1)基于TCP的通信

在进行登录用户验证、添加好友、删除好友等操作时,采用基于TCP的通信协议。

2)基于UDP的通信

基于UDP通信的基本模式:

(1)将数据打包,称为数据包(好比将信件装入信封一样),然后将数据包发往目的地。

      (2)接受别人发来的数据包(好比接收信封一样),然后查看数据包中的内容。

       在进行用户聊天时,采用基于UDP的通信协议。

缓存数据设计

1) 用户信息Bean

 为了保存用户及好友的个人信息,此处设计用户信息缓存数据,当用户登录时,将用户个人及好友的基本信息保存,以备用户查询,就不用再次连接数据库获取了。

 UserInfoBean类:保存用户QQ号、昵称、签名、血型、地址等信息。

2) 消息信息Bean

 用户在进行聊天时,需要传递必要的信息,此处的消息Bean数据结构就是存储收发用户的QQ号、IP地址、消息内容、字体大小、字体颜色、字体类型等信息。

  Message类:保存收发用户的QQ号、IP地址等信息。

转载请标明出处:牟尼的专栏 牟尼的博客_CSDN博客-算法,C++,JAVA领域博主

2.2详细设计

系统流程图

图 2-7 系统流程图

设计模式使用

1)中介者模式:

所有的用户都通过服务器进行通信,服务器其中介的作用。

2)观察者模式:

  当有用户登录时,会通知其他在线好友,其他好友及时修改此用户的在线状态。

通信协议的实现

2.1.3.1基于TCP的通信

在进行登录用户验证、添加好友、删除好友等操作时,采用基于TCP的通信协议。

A.客户端TCP通信设计

  设计ClientToServer类,该类实现了Runnable接口,是一个线程。

主要方法:

[1] boolean sendLoginInfoToServer(User u) :登录请求。

[2] void getProgerties():获取配置文件中的服务器IP地址信息。

[3] void logout(): 下线,通知服务器该用户下线。

[4]inttoRegister(UserInfoBean user):新用户注册,返回QQ号。

[5] void noticeUpdate():通知刷新好友信息。

B. 服务器TCP通信设计

1)设计ServerThread线程类:处理用户连接服务器请求,并为其启动单独的服务(Server)线程。

主要方法:

[1] void run(): 重写线程类Thread的方法,不断的等待客户端的连接请求。

[2] void pauseThread():暂停服务。

[3] void reStartThread():恢复服务。

2)设计Server线程类:处理每个上线用户个各种服务请求。

主要方法:

[1] void run():不断的等待用户的请求信息,并判断请求类型。

[2] void login():处理用户登录。

[3] void registerNewUser():处理注册新用户

[4] void queryUser():处理查询用户。

[5] void addFriend():添加好友。

[6] void deleteFriend():删除好友。

[7] void updateOwnInfo():更新自己的信息。

[8] void logout():下线。

[9] void queryFriend():查询好友信息。

2.1.3.2基于UDP的通信

在进行用户聊天时,采用基于UDP的通信协议。

A.客户端UDP通信设计

  设计ClientToServerThread线程类:负责UDP通信。

主要方法:

[1]void run():循环等待监听发来的数据。

[2]void getPropertieInfo():获取通信的服务器的IP地址及本机通信端口。

[3]void sendData(byte buffer[]):发送数据。

[4]void Object ByteToObject(byte[] bytes):将Byte数据转为Object类型。

[5]void ObjectToByte(Object obj):将Object型数据转为Byte型。

[6]void closeSocket():关闭收发数据报套接字。

B. 服务器UDP通信设计

设计ClientToServerThread线程类:负责UDP通信,主要是转发用户发送的信息,并保存用户的聊天记录。

主要方法:

[1]void run():循环等待监听发来的数据。

[2]void getPropertieInfo():获取通信的服务器的IP地址及本机通信端口。

[3]void sendData(byte buffer[]):发送数据。

[4] void Object ByteToObject(byte[] bytes):将Byte数据转为Object类型。

[5]void ObjectToByte(Object obj):将Object型数据转为Byte型。

[6]void closeSocket():关闭收发数据报套接字。

数据访问层的实现

2.1.4.1 打开数据库连接类(ConnectionFactory)

[1]void getPropertiesInfo():从配置文件中获取数据库连接信息。

[2]Connection getConnection():打开数据库连接。

2.1.4.2 关闭数据库连接类(DbClose)

[1]void getPropertiesInfo():从配置文件中获取数据库连接信息。

[2]void close(Connection conn):关闭数据库连接。

[3]void close(PreparedStatement pre):关闭数据库语句

[4]void close(ResultSet rs):关闭结果集

[5]voidclose(Connection conn, PreparedStatement pre, ResultSet rs)

2.1.4.3 数据操作类(Dml)

[1]void insert(UserInfoBean user):增加新用户,插入信息。

[2]void update(UserInfoBean user):更新用户信息。

[3]void delete(int qq):删除信息。

界面层的实现

2.1.5.1登录界面

JLoginFrm登陆窗体主要用于用户登陆,注册和找回密码。

内部类:

BackgroundPanel 继承于JPanel主要用于设置窗体背景图片

主要函数:

1.actionPerformed(ActionEvent e)主要对窗体的按键监听

2.JLoginFrm()构造函数,控件的初始化。

2.1.5.2注册界面

JRegisterFrm继承与JFrame主要用于用户基本信息的注册。

主要函数:

1. Void setDay()根据不同的年份和月份设置天数

2.String getBir()以1-1月-2014形式得到用户的生日

3.getUserInfo()得到用户的所有信息

2.1.5.3 聊天界面

ChatPanel主要用于用户间的聊天通信

主要函数:

1、setMessage()设置当前显示所有会话的面板,不可编辑

2、setSendMessage()设置当前发送消息的面板,可编辑

3、sendMessage()发送消息,讲发送消息面板的内容发送到会话面板            和对方。

4、sendFile()传输文件

5、sendImage()发送图片

6、startShake()发送震动消息

2.1.5.4 主界面

主界面的主要内容有QQ头像设置,包括昵称、QQ号、签名的显示,用户登录状态设置,还有好友列表显示,像这些创建好友列表所需要的信息是从服务端获得的;还有一些辅助界面,比如查看好友资料或者查看自己的资料界面,查找好友界面,添加好友界面等。

源码中的一些主要类及类中的主要方法及其作用:

1.ColorConvertOp类:这个类主要负责颜色转换的

[1] public ImageIcon getGrayPicture(String path)//该方法获取图片路径,将转换后的灰色ImageIcon返回。

[2] public class CombListRenderer extends JLabelimplements       2.ListCellRenderer//该类个性化设置combobox的单元格属性

[1] publicComponent getListCellRendererComponent(JList list,Object obj,int row,booleansel,booleanhasFocus)   

//该方法是重写了ListCellRenderer中的getListCellRendererComponent,返回了一个自定义的Component

3、public class findFriendFrm extends JFrame

//该类负责查找好友界面

[1] public String getName()//获得找到好友的昵称或者QQ号

[2] public class InformationFrm extends JFrame

//该类负责显示好友信息的界面

2.1.5.5 用户信息界面

  好友信息界面主要是将从服务端读取的好友的个人信息显示出来。

[1] publicInformationFrm(UserInfoBean userInfo)

//在该构造方法中必须传入一个UserInfoBean 的对象,此对象中包含了好友的所有信息

[2] public class selectGroupFrm extends JFrame

//该类负责显示添加好友的一个界面

 三、实现效果

图 5-1 登录界面

图 5-2 登录界面

图 5-3 注册界面

图 5-4 找回密码界面

图 5-5 主界面        

 图 5-6 信息查看界面

图 5-7 聊天界面

图 5-8 消息记录界面

图 5-9 服务器登录界面

图 5 – 10 服务器管理界面

四、技术难点与解决方案

4.1通信模块

在通信模块,我们既使用了基于TCP的通信协议,也使用了基于UDP的通信协议,在登录验证、添加好友等通信部分,我们采用了基于TCP的通信协议,在聊天时,我们采用了基于UDP的通信协议,将两种协议都进行了相应的练习。  

4.2数据库模块

  在数据库建模时,使用了多张表来存储数据,使其达到了第三范式,虽然,查询数据的时候可能会涉及多个表的嵌套查询,但每个表很单一,扩展灵活。

4.3界面模块

4.3.1 登录界面

登陆界面主要使用到自定义最大化,最小化和关闭按钮,允许鼠标点击窗体拖动。对输入的字符进行判断设置,只允许QQ号码输入数字。使用setUndecorated(true);

setResizable(false);设置去除边框,和不允许改变窗体大小。使用addKeyListener()函数判断字符输入只允许输入数字,使用addMouseMotionListener()方法来允许鼠标点击任何地方拖动窗体。

4.3.2 主机界面

对一些组件的使用,如在好友显示列表中需要用到:JTree和JTabbedPane

右键好友时会弹出好多菜单需要用到:JMenuItem,JMenu和JPopupMenu在显示登录状态时需要用到:ComboBox但是系统默认的组件外观往往达不到我们的审美要求,所以我们要对它们的外观进行个性化设置,所以我们要对其进行重绘,以下是具体实现方法:重写BasicTreeUI 中的setLeftChildIndent和setRightChildIndent方法,以达到对齐父子节点,重写了DefaultTreeCellRenderer和DefaultMutableTreeNode来设置JTree带图片显示节点,并且给节点增加了一些我们需要的东西,重写ListCellRenderer   中的Component getListCellRendererComponent(JList list,Object obj,introw,boolean sel,boolean hasFocus)增加在ComboBox显示图片的效果。

头像灰色显示效果:还有一些图片处理效果的技术,如QQ头像去色处理(灰色头像),其中主要原理就是将头像图片中的像素数组取出来,利用一定的颜色变换公式对其颜色进行变换以达到灰显效果。主要实现代码见public classColorConvertOp中的 static public ImageIcon getGrayPicture(String path)throws IOException方法

五、总结

张的总结:

  通过这次聊天程序课程设计,又有了许多收获。最初,本来打算做大四学长的“我校淘”网站,但,后来通过与大四学长的交流、沟通,他说三周的时间太短了,因为我们之前没有接触过Java Web方面的知识,所以时间不够,因此,先学习这方面的的知识。

   聊天软件,是我之前一直想完成的一个小软件,但没有机会去做,这次有机会做,我决定把它做好,做的像QQ一样。刚开始,对于网络通信、数据库连接及操作这部分,我们之前没练习过,因此,对于整体的设计都很难把握,我们参考了部分书籍,大概了解了其原理,之后就是确定需求,虽然我们对QQ都很熟悉,也都基本了解其大概需求,但在实际设计时,很多需求方面东西都是看不见的,必须自己查资料、思考、练习才能发掘。然后就是总体设计及人员分工,这一步也很关键,如何协调每个人,如何发挥每个人的优势,这需要很多工作。

  在整体设计完成后,我们考虑先开发出简单的聊天软件,然后逐步细化,因此,在详细设计时,我们简化了一些东西,先开发出一个基本原型,用以验证技术并进一步明确需求。然后,对部分技术进行改进和细化,最后,再次基础上不断的迭代进行,由于我们的水平有限,我们最初的设计并不一定是好的设计,只有不断的试验和改进,才能开发出好的软件,当然,前期的整体架构设计非常重要,这将很大程度上决定软件的质量和适应需求变更的能力。总之,在试验与改进中,我们学到了很多东西,不光是技术,还有合作。

房X的总结:

这是第二次小组一起完成一个小项目,总体感觉相对个人完成比较轻松,而且完成的项目,比个人的更好,相互之间可以互相学习,可以看到别人的代码风格,和对同一问题的不同解决方法,每个人的设计思想,可充分展示每个人的优势,并通过相互学习,补充自己的知识不足之处,更快更好的学习知识。

高X的总结:

本次课程设计我做的是一部分界面设计,没啥核心技术,就是对一些组件使用的巩固,通过使用这些组件,加深了对一些常用组件的继承关系的理解,有些小问题还没有解决,但是以后会自己慢慢解决的。

总体而言,我们完成的聊天软件,较好的实现了预期的目标。

软件的优点:具有漂亮、友好的界面、功能较全,软件具有较好的架构设计,用户体验较好。软件的缺点:部分功能测试还不理想,有些功能还未实现。

参考文献

1.石彦芳,李丹.《Oracle数据库应用与开发》.机械工业出版社,2013

2.耿祥义,张跃平.《Java面向对象程序设计》.清华大学出版社,2010

3.张海藩.《软件工程导论》(第5版).北京.清华大学出版社,2008

4.刘新.《Java开发技术大全》.北京.清华大学出版社,2009

5.明日科技 《Java经典编程300例》清华大学出版社 2012

6.梁建全  《你必须知道的261个Java语言问题》  人民邮电大学 2009

转载请标明出处:牟尼的专栏 牟尼的博客_CSDN博客-算法,C++,JAVA领域博主

推荐java最新聊天项目(java仿微信聊天):java 简单仿微信聊天(springboot)_Garry1115的博客-CSDN博客_springboot 模拟微信

源码下载地址:qq聊天[简易版] (resourcecode.cn)

  • 85
    点赞
  • 377
    收藏
    觉得还不错? 一键收藏
  • 161
    评论
表结构 数据库表结构设计方案,仅供参考 User用户表( User(--用户表 " " " " " "字段 "字段类型 "字段描述 "备注 " "U_ID "Int " "主键、自增 " "U_LoginID "Varchar(20 "(登陆账号) " " " ") " " " "U_NickName "Varchar(20 "(昵称) " " " ") " " " "U_PassWord "Varchar(20 "(密码) " " " ") " " " "U_SignaTure "Varchar(150"(个性签名) "Null " " ") " " " "U_Sex "Bit "(性别) "Null " "U_Birthday "Datetime "(生日) "Null " "U_Telephone "Varchar(30 "(电话) "Null " " ") " " " "U_Name "Varchar(30 "(真实姓名) "Null " " ") " " " "U_Email "Varchar(50 "(邮箱) "Null " " ") " " " "U_Intro "Varchar(300"(简介) "Null " " ") " " " "U_HeadPortrait "Varchar(100"(头像) " " " ") " " " "U_ShengXiao "Char(2) "生肖 "Null " "U_Age "Int "年龄 "Null " "U_Constellation "Char(6) "星座 "Null " "U_BloodType "Varchar(10 "血型 "Null " " ") " " " "U_SchoolTag "Varchar(50 "毕业学校 "Null " " ") " " " "U_Vocation "Varchar(30 "(职业) "Null " " ") " " " "U_NationID "Int "(国家ID) "外键 " "U_ProvinceID "Int "(省份ID) "外键 " "U_CityID "Int "(城市ID) "外键 " "U_FriendshipPolicy"Int "好友策略ID "外键 " "ID " " " " "U_UserStateID "Int "(用户状态ID) "外键 " "U_FriendPolicyQues"Varchar(30) "好友策略问题 "Null " "tion " " " " "U_FriendPolicyAnsw"Varchar(30 "好友策略答案 "Null " "er ") " " " "U_FriendPolicyPass"Varchar(30 "好友策略密码 "Null " "word ") " " " ) UserState(--用户状态表 "字段 "字段类型 "字段描述 "备注 " "US_ID "Int "(ID) "主键 " "US _Name "Varchar(10) "(状态名字) " " " " " " " ) Friends(--好友表 "字段 "字段类型 "字段描述 "备注 " "F_ID "Int "主键ID "主键 " "F_FirendID "Int "朋友的ID "外键 " "F_UserID "Int "自己的ID "外键 " "F_Name "Varchar(30) "备注昵称 "Null " "F_FriendTypeID "Int "(好友类型) "外键 " "F_FriendGroupsID"Int "(所属分组ID) "外键 " " " " " " ) User_FriendshipPolicy(--添加好友策略 "字段 "字段类型 "字段描述 "备注 " "U_FP_ID主键 "Int "策略ID "主键 " "U_FriendshipPol"varchar "好友添加方式 " " "icy " " " " ) FriendGroups(--好友分组表 "字段 "字段类型 "字段描述 "备注 " "FG_ID "Int "(分组ID) "主键 " "FG_Name "Varchar "(分组名字) " " "FG_UserID "Int "用户ID "外键 " ) FriendType (--好友类型 "字段 "字段类型 "字段描述 "备注 " "FT_ID "Int "(类型ID) "主键 " "FT_Name "Varchar(20) "(类型名称) " " ) Messages(--聊天记录表 "字段 "字段类型 "字段描述 "备注 " "M_ID "Int "(消息ID) "主键,自增 " "M_PostMessages "Text "(消息内容)
好的,下面是一个简单的示例代码,实现了一个倒计时效果: ```html <!DOCTYPE html> <html> <head> <title>倒计时示例</title> <meta charset="utf-8"> </head> <body> <div id="countdown"></div> <script> // 获取倒计时元素 var countdown = document.getElementById('countdown'); // 设置倒计时结束时间(假设设置为2022年1月1日0时0分0秒) var endTime = new Date(2022, 0, 1, 0, 0, 0); // 定时器,每秒更新一次倒计时 var timer = setInterval(function() { // 获取当前时间 var now = new Date(); // 计算距离结束时间的时间差 var diff = endTime.getTime() - now.getTime(); // 如果时间差小于等于0,清除定时器,显示倒计时结束 if (diff <= 0) { clearInterval(timer); countdown.innerHTML = '倒计时结束'; return; } // 计算剩余时间的小时、分钟、秒数 var hours = Math.floor(diff / (1000 * 60 * 60)); var minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((diff % (1000 * 60)) / 1000); // 更新倒计时元素的内容 countdown.innerHTML = '距离2022年1月1日0时0分0秒还有:' + hours + '小时' + minutes + '分钟' + seconds + '秒'; }, 1000); // 每秒更新一次 </script> </body> </html> ``` 以上代码中,我们首先在页面中添加了一个 `<div>` 元素,用于显示倒计时。然后使用 JavaScript 代码实现了一个定时器,每秒更新一次倒计时。在定时器的回调函数中,我们首先获取当前时间和倒计时结束时间,计算它们之间的时间差,然后根据时间差计算剩余时间的小时、分钟、秒数,最后更新倒计时元素的内容。当时间差小于等于0时,清除定时器,显示倒计时结束。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 161
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值