微客导航 » 文章资讯 » jQuery实现简单QQ聊天框

jQuery实现简单QQ聊天框

2023-07-17 22:22:03 314

本文实例为大家分享了jQuery实现简单QQ聊天框的具体代码，供大家参考，具体内容如下

先放一张效果图！

1.首先我们把基本框架搭出来，还要准备三张图片用来当作头像，下面是html的内容

关闭(C) 发送(S)

2.头部引入jQuery，我用的版本是3.5.1的

3.先写一个事件加载函数，网页加载完成后执行此函数

$(funtion(){

})

4.分别用一个数组来保存头像图片的路径和网友昵称

$(funtion(){
letpic=['images/head01.jpg','images/head02.jpg','images/head03.jpg'];
letname=['chen','liu','feng'];
})

5.给发送按钮添加一个点击事件，核心在这里

$(function(){
letpic=['images/head01.jpg','images/head02.jpg','images/head03.jpg'];
letname=['chen','liu','feng'];
$('#send').click(function(){
letnum=Math.floor((Math.random()*3));//随机获取一个0到2的整数，用作数组下标，从而使头像和昵称随机显示
lettext=$('.chatText').val();//获取输入框的文本内容，并赋值给text
if(text.length>0){//文本内容的长度大于0就执行里面的函数
$('.chatBody').append(//在div里面追加内容
`
//显示头像
${name[num]}//显示昵称
${text}//显示文本内容

` ); } $('.chatText').val('');//获取完输入框的内容后清空输入框 }) })

css样式就看自己喜好调啦！

他的实现逻辑很简单，点击事件获取输入框内容，然后用append()方法将模板字符串追加到容器里面，最后清空输入框，头像和昵称用随机数生成配合数组就可以搞定！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

jQuery实现简单QQ聊天框

热门推荐

随机推荐