JS代码实现的聊天框

时间：2020-12-30 04:44:11
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5模拟微信聊天界面</title>
<style>
/**重置标签默认样式*/
* {
margin: 0;
padding: 0;
list-style: none;
font-family: '微软雅黑'
}
#container1 {
width: 450px;
height: 780px;
background: #eee; 

position: relative;
box-shadow: 20px 20px 55px #777;
}
.header {
background: #000;
height: 40px;
color: #fff;
line-height: 34px;
font-size: 20px;
padding: 0 10px;
}
.footer {
width: 430px;
height: 50px;
background: #666;
position: absolute;
bottom: 0;
padding: 10px;
}
.footer input {
width: 275px;
height: 45px;
outline: none;
font-size: 20px;
text-indent: 10px;
position: absolute;
border-radius: 6px;
right: 80px;
}
.footer span {
display: inline-block;
width: 62px;
height: 48px;
background: #ccc;
font-weight: 900;
line-height: 45px;
cursor: pointer;
text-align: center;
position: absolute;
right: 10px;
border-radius: 6px;
}
.footer span:hover {
color: #fff;
background: #999;
}
#user_face_icon {
display: inline-block;
background: red;
width: 60px;
height: 60px;
border-radius: 30px;
position: absolute;
bottom: 6px;
left: 14px;
cursor: pointer;
overflow: hidden;
}
img {
width: 60px;
height: 60px;
}
.content {
font-size: 20px;
width: 435px;
height: 662px;
overflow: auto;
padding: 5px;
}
.content li {
margin-top: 10px;
padding-left: 10px;
width: 412px;
display: block;
clear: both;
overflow: hidden;
}
.content li img {
float: left;
}
.content li span{
background: #7cfc00;
padding: 10px;
border-radius: 10px;
float: left;
margin: 6px 10px 0 10px;
max-width: 310px;
border: 1px solid #ccc;
box-shadow: 0 0 3px #ccc;
}
.content li img.imgleft {
float: left;
}
.content li img.imgright {
float: right;
}
.content li span.spanleft {
float: left;
background: #fff;
}
.content li span.spanright {
float: right;
background: #7cfc00;
}
</style>
<script>
window.onload = function(){
var arrIcon = ['http://www.xttblog.com/icons/favicon.ico','http://www.xttblog.com/wp-content/uploads/2016/03/123.png'];
var num = 0; //控制头像改变
var iNow = -1; //用来累加改变左右浮动
var icon = document.getElementById('user_face_icon').getElementsByTagName('img');
var btn = document.getElementById('btn');
var text = document.getElementById('text');
var content = document.getElementsByTagName('ul')[0];
var img = content.getElementsByTagName('img');
var span = content.getElementsByTagName('span'); 

icon[0].onclick = function(){
if(num==0){
this.src = arrIcon[1];
num = 1;
}else if(num==1){
this.src = arrIcon[0];
num = 0;
}
}
btn.onclick = function(){
if(text.value ==''){
alert('不能发送空消息');
}else {
content.innerHTML += '<li><img src="'+arrIcon[num]+'"><span>'+text.value+'</span></li>';
iNow++;
if(num==0){
img[iNow].className += 'imgright';
span[iNow].className += 'spanright';
}else {
img[iNow].className += 'imgleft';
span[iNow].className += 'spanleft';
}
text.value = '';
// 内容过多时,将滚动条放置到最底端
contentcontent.scrollTop=content.scrollHeight;
}
}
}
</script>
</head>
<body>
<div id="container1">
<div class="header"> 

</div>
<ul class="content"> 

</ul>
<div class="footer">
<div id="user_face_icon">
<img src="http://www.xttblog.com/icons/favicon.ico" alt="">
</div>
<input id="text" type="text" placeholder="说点什么吧...">
<span id="btn">发送</span>
</div>
</div>
</body>
</html>

　　

JS代码实现的聊天框的更多相关文章

  1. 只用js 实现的简约聊天框

    之前看到别人的网页打开后都有个聊天框,可以与同时在网上的网友聊点简单话题,于是便找了个最简单的方法 使用js,客户端 打开页面,不断的给服务器发送请求来得到 新的消息 用JavaScript实现的轮询 ...

  2. 同步文本框内容的JS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 怎么用js代码改变单选框的选中状态

    今天突然有一个需求要用到,使用js代码改变单选框的选中状态.当时想也不想直接 function doGender(gender) { if (gender == "男") { ge ...

  4. 单选复选框的js代码取值

    单选框 复选框选中后的js代码处理 <script type="text/javascript"> function check(){ document.getElem ...

  5. 判断小数点位数不超过2位的JS代码和在删除确认框里面插JS代码

    <script type="text/javascript"> function checkDecimals(){ var decallowed = 2; var re ...

  6. UWP开发之控件：用WebView做聊天框

    目录 说明 WebView存在的价值 使用WebView的几个重要技巧 使用WebView做的聊天框 说明 大家都知道,无论是之前的Winform.WPF还是现在的IOS.Android开发中,都存在 ...

  7. JS简单仿QQ聊天工具的制作

    刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...

  8. 基于Node&period;js &plus; WebSocket 的简易聊天室

    代码地址如下:http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.js ...

  9. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

随机推荐

  1. 扩大ubuntu虚拟机硬盘空间

    一.背景: 出于测试的需要,在ubuntu 14.04系统中通过virtualbox虚拟机安装了额ubuntu 14.04系统(guest os).安装过程采用ubuntu 14.04的默认分区方法. ...

  2. VMware创建Linux虚拟机并安装CentOS&lpar;三&rpar;

    选择“创建自定义布局”手动给Linux指定系统分区.交换分区,鼠标单击“下一步”按钮继续. 首先创建交Swap分区,鼠标单击“创建”按钮,在弹出的“生成存储”对话框中,生成分区选择“标准分区”:鼠标单 ...

  3. QQ（iOS）客户端的粘性动画效果

    qq的app中要是有新的联系人发消息过来,相应联系人的cell右边会有一个红色的圆圈表示消息条数.如果去触碰那个圆圈,可以发现它竟然会跟着手指的移动而移动. 在一定范围内,手指离开屏幕,会发现红色圆圈 ...

  4. 下载安装与配置 Java JDK 7

    1. 去 Oracle 的官网下载 JDK,我下载的是:jdk-7u25-windows-x64.exe   大小为:90.6M 2. 双击它安装. 3. 安装完后,JDK 配置如下: 01 02 - ...

  5. ubuntu终端命令

    整个电脑都划成ubuntu用. 装软件时的一个明显感觉就是很多事情,用终端的命令行去做很容易,用图形界面往往很复杂,而且很多时候还会出现权限的问题,对于ubuntu的用户权限,现在的唯一感觉就是权限在 ...

  6. 鸟哥Linux学习笔记03

    1, 在Linux中,默认情况下所有的系统上的账号都记录在/etc/passwd这个文件内,密码记录在/etc/shadow这个文件下,所有的组名都记录在/etc/group内,这三个文件可以说是Li ...

  7. 1、libgdx简介

    Libgdx 是一个跨平台和可视化的的开发框架.它当前支持Windows,Linux,Mac OS X,Android,IOS和HTML5作为目标平台. Libgdx允许你一次编写代码不经修改部署到多 ...

  8. 超小Web手势库AlloyFinger原理&lpar;转载&rpar;

    目前AlloyFinger作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用. 感兴趣的同学可以去Github看看: https://github.com/AlloyTeam/AlloyF ...

  9. thymeleaf：日常使用总结

    1.th:href 获得当前的根路径 th:href="@{/}" 2.select输出并自动选中 <select class="form-control sele ...

  10. 剑指offer——python【第30题】连续子数组的最大和

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

相关文章