ajax实现qq聊天,jQuery实现简易QQ聊天框

jQuery实现简易QQ聊天框

发布时间：2020-09-06 20:20:27

来源：脚本之家

阅读：138

作者：周楚雄

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

*{list-style: none;margin: 0;padding: 0;}

.box1{

width: 500px;

height: 480px;

border: 1px solid #aaa;

margin: 0 auto;

margin-top: 20px;

}

.box{

width: 500px;

height: 250px;

overflow: auto;

}

#bb{

width: 494px;

margin-top: -5px;

border: 1px solid white;

outline: none;

}

img{

width: 500px;

}

.btn{

margin-left:325px;

}

.btn,.btn1{

background: #069dd5;

width: 80px;

padding: 3px 0;

border-radius: 7px;

color: white;

font-size: 14px;

outline: none;

}

.image{

margin: 5px;

width: 50px;

}

.pp{

margin-left: 60px;

margin-top: -50px;

color: #009494;

margin-bottom: 10px;

}

.ppp{

width: 400px;

margin-left: 60px;

background: #eee;

border-radius: 5px;

padding: 5px;

font-size: 14px;

}

.item{

margin-bottom: 20px;

}

$(function(){

var ul = $(".items")

var arr=[1,2,3]

var arr1=["松松","六月的雨","毛毛"]

function num(n,m){

//封装随机数

return Math.round(Math.random()*(m-n)+n)

}

$(".btn1").click(function(){

//创建按钮点击事件

var li = $("

//创建一个li标签

var imgs = $("")

//创建一个img标签

var h5 = $("

//创建一个h5标签

var p = $("

//创建一个p标签

var val = bb.value;

//获取文本域的值

p.html(val);

//把文本域的值赋给p标签

$(p).addClass("ppp")

//给p标签加一个css样式

$(li).addClass("item")

//给li加一个css样式

li.appendTo(ul)

//把li插入到ul内

bb.value = "";

//清空文本域内容

var arr2 = num(0,arr.length-1)

//提取随机数

$(h5).addClass("pp")

//给h5添加css样式

h5.html(arr1[arr2])

//给h5赋值

$(imgs).attr({"src":arr[arr2]+".jpg"})

//给img添加属性和属性值

$(imgs).addClass("image")

//给img添加一个css样式

p.appendTo(li)

//将p标签插入li内

h5.prependTo(li)

//将h5标签插入li内

imgs.prependTo(li)

//将img标签插入li内

$(".box").scrollTop($(".box")[0].scrollHeight);

//让滚动条始终在最底端

})

})

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