初学js之qq聊天实例
实现的功能为上图所示，但是每新发送的消息必须显示在最上面。
我实现了两版，样式有是一样的。我们直接看代码。
版本一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
} li{
list-style: none;
}
.box{
width: 253px;
height: 535px;
background: url('img/iPhone.png')no-repeat;
margin: 0 auto;
position: relative;
}
.content{
position: absolute;
width: 216px;
height: 340px;
top:78px;
left: 21px;
overflow: auto;
}
.send{
position: absolute;
width: 216px;
height: 42px;
bottom:74px;
left: 21px;
background-color: #EEEEEE;
border-top: 1px solid #ccc;
}
.send a{
position: absolute;
top: 3px;
left: 5px;
text-decoration: none;
text-align: center;
line-height: 32px;
width: 30px;
height: 32px;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.db{
background: url('img/qq2.gif')no-repeat center;
}
.xl{
background: url('img/qq1.gif')no-repeat center; }
.send .inp1{
position: absolute;
top: 3px;
left: 41px;
width: 126px;
height: 32px;
border-radius: 5px;
border: 1px solid #ccc;
}
.send span{
position: absolute;
top: 50%;
right:0px;
width: 40px;
height: 32px;
color: #999;
margin-top: -16px;
font: 600 16px/32px "微软雅黑";
cursor: pointer;
}
.cont{
padding: 10px 0;
width: 100%;
}
.content div{
display: block;
clear: both;
}
.content .lis_lf{
background: url('img/qq2.gif')no-repeat;
float: left;
margin: 5px 5px 0 5px;
}
.content .lis_rt{
background: url('img/qq1.gif')no-repeat right;
float: right;
margin:5px 5px 0 5px;
}
.content .lis_lf span{
display: inline-block;
margin-left: 30px;
word-break:break-all; width:100px;
word-wrap:break-word;
background-color: #e7e5eb;
border-radius: 5px;
}
.content .lis_rt span{
display: inline-block;
margin-right: 30px;
word-break:break-all; width:100px; overflow:auto;
word-wrap:break-word;
background-color: #2bc71c;
border-radius: 5px;
}
</style>
<script>
window.onload = function(){
var oContent =document.getElementById("content");
var oL1 = oContent.getElementsByTagName("ol")[0];
var oSend = document.getElementsByTagName("span")[0];
var oInp1 = document.getElementById("inp1");
var oA = document.getElementsByTagName("a")[0];
var onOff = true; oA.onclick = function(){
if(this.onOff){
oA.className = 'db';
this.onOff = false;
}else{
oA.className = 'xl';
this.onOff = true;
}
}; //发送消息
oSend.onclick = function(){
if(oInp1.value == "")
{
alert("消息不能为空");
}
else
{
if(oA.onOff)
{
var Test = "<li class ='lis_rt'>" + "<span>"+oInp1.value+"</span>" + "</li>";
// oL1.innerHTML += Test; //等价于 oL1.innerHTML = oL1.innerHTML + Test
oL1.innerHTML = Test + oL1.innerHTML;
}
else
{
var Test = "<li class ='lis_lf'>" + "<span>" + oInp1.value + "</span>" + "</li>";
oL1.innerHTML = Test + oL1.innerHTML;
}
oInp1.value = "";
}
};
} </script>
</head>
<body>
<div class="box">
<div class="content" id="content">
<ol class="cont reverse"></ol>
</div>
<div class="send">
<a href="javascript:;" class="db"></a>
<input class="inp1" type="text" value="" id="inp1">
<span>发送</span>
</div>
</div>
</body>
</html>
版本二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
} li{
list-style: none;
}
.box{
width: 253px;
height: 535px;
background: url('img/iPhone.png')no-repeat;
margin: 0 auto;
position: relative;
}
.content{
position: absolute;
width: 216px;
height: 340px;
top:78px;
left: 21px;
overflow: auto;
}
.send{
position: absolute;
width: 216px;
height: 42px;
bottom:74px;
left: 21px;
background-color: #EEEEEE;
border-top: 1px solid #ccc;
}
.send a{
position: absolute;
top: 3px;
left: 5px;
text-decoration: none;
text-align: center;
line-height: 32px;
width: 30px;
height: 32px;
border-radius: 5px;
background-color: #fff;
border: 1px solid #ccc;
}
.db{
background: url('img/qq2.gif')no-repeat center;
}
.xl{
background: url('img/qq1.gif')no-repeat center; }
.send .inp1{
position: absolute;
top: 3px;
left: 41px;
width: 126px;
height: 32px;
border-radius: 5px;
border: 1px solid #ccc;
}
.send span{
position: absolute;
top: 50%;
right:0px;
width: 40px;
height: 32px;
color: #999;
margin-top: -16px;
font: 600 16px/32px "微软雅黑";
cursor: pointer;
}
.cont{
padding: 10px 0;
width: 100%;
}
.content div{
display: block;
clear: both;
}
.content .lis_lf{
background: url('img/qq2.gif')no-repeat;
float: left;
margin: 5px 5px 0 5px;
}
.content .lis_rt{
background: url('img/qq1.gif')no-repeat right;
float: right;
margin:5px 5px 0 5px;
}
.content .lis_lf span{
display: inline-block;
margin-left: 30px;
word-break:break-all; width:100px;
word-wrap:break-word;
background-color: #e7e5eb;
border-radius: 5px;
}
.content .lis_rt span{
display: inline-block;
margin-right: 30px;
word-break:break-all; width:100px; overflow:auto;
word-wrap:break-word;
background-color: #2bc71c;
border-radius: 5px;
}
</style>
<script>
window.onload = function(){
var oContent =document.getElementById("content");
var oL1 = oContent.getElementsByTagName("ol")[0];
var oSend = document.getElementsByTagName("span")[0];
var oInp1 = document.getElementById("inp1");
var oA = document.getElementsByTagName("a")[0];
var onOff = true;
// var num = 0;
oA.onclick = function(){
if(this.onOff){
oA.className = 'db';
this.onOff = false;
}else{
oA.className = 'xl';
this.onOff = true;
}
};
function fun(){
//1.创建li
var newItem = document.createElement("li");
//2.在li里面创建span
var newSpan = document.createElement("span");
newItem.appendChild(newSpan);
newSpan.innerHTML = oInp1.value;
if (oInp1.value == ""){
alert("消息不能为空");
}
if(oA.onOff){
newItem.className = 'lis_rt';
}else{
newItem.className = 'lis_lf';
}
oInp1.value = "";
var list = document.getElementById("cont")
list.insertBefore(newItem, list.childNodes[0]);
//insertBefore 给某个元素前添加节点
};
oSend.onclick = function(){
fun();
}
} </script>
</head>
<body>
<div class="box">
<div class="content" id="content">
<ol class="cont" id="cont">
</ol>
</div>
<div class="send">
<a href="javascript:;" class="db"></a>
<input class="inp1" type="text" value="" id="inp1">
<span>发送</span>
</div>
</div>
</body>
</html>
初学js之qq聊天实例的更多相关文章
- 初学js之qq聊天展开实例
实现这样的效果. 直接看代码,html部分: <body> <div class="box"> <div class="lists" ...
- Js打开QQ聊天对话窗口
function openQQ() { var qq = $(this).attr('data-qq');//获取qq号 window.open('http://wpa.qq.com/msgrd?v= ...
- JS简单仿QQ聊天工具的制作
刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...
- Nuxt+Vue聊天室|nuxt仿微信App界面|nuxt.js聊天实例
一.项目简述 nuxt-chatroom 基于Nuxt.js+Vue.js+Vuex+Vant+VPopup等技术构建开发的仿微信|探探App界面社交聊天室项目.实现了卡片式翻牌滑动.消息发送/emo ...
- Next.js+React聊天室|Next仿微信桌面端|next.js聊天实例
一.项目介绍 next-webchat 基于Next.js+React.js+Redux+Antd+RScroll+RLayer等技术构建的PC桌面端仿微信聊天项目.实现了消息/表情发送.图片/视频预 ...
- Svelte3聊天室|svelte+svelteKit仿微信聊天实例|svelte.js开发App
基于svelte3.x+svelteKit构建仿微信App聊天应用svelte-chatroom. svelte-chatroom 基于svelte.js+svelteKit+mescroll.js+ ...
- Svelte3.x网页聊天实例|svelte.js仿微信PC版聊天svelte-webchat
基于Svelte3+SvelteKit+Sass仿微信Mac界面聊天实战项目SvelteWebChat. 基于svelte3+svelteKit+sass+mescroll.js+svelte-lay ...
- 搭建QQ聊天通信的程序：（1）基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 （1）
搭建QQ聊天通信的程序:(1)基于 networkcomms.net 创建一个WPF聊天客户端服务器应用程序 原文地址(英文):http://www.networkcomms.net/creating ...
- Socket实现仿QQ聊天（可部署于广域网）附源码（1）-简介
1.前言 本次实现的这个聊天工具是我去年c#程序设计课程所写的Socket仿QQ聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...
随机推荐
- Cache 和 Buffer 区别是什么
一 从常识来说,cache叫缓存,buffer叫缓冲. 二 尴尬的是缓存是什么?缓冲是什么? 缓冲,缓和冲击.也就是100次保存数据库,先把操作保存到本地,然后满10次才保存到数据库. 缓存,就是缓冲 ...
- EPSG:4326
简单说,"EPSG:4326"指的就是WGS84坐标系 参考 http://blog.csdn.net/cloverwindy/article/details/8663968 AU ...
- SQL Server date 设置默认值
根据时间做数据统计计算最讨厌开始和结束时间字段是NULL,为了处理NULL要写很多语句. 那么在数据库设计的时候给一个默认值:0001-01-01和9999-12-31,会给开发人员带来很大的便利. ...
- 【转/TCP协议编程】 基于TCP的Socket 编程
基于TCP(面向连接)的socket编程,分为客户端和服务器端. 客户端的流程如下: (1)创建套接字(socket) (2)向服务器发出连接请求(connect) (3)和服务器端进行通信(send ...
- Piwik-2.16.1 （OpenLogic CentOS7.2）
平台: CentOS 类型: 虚拟机镜像 软件包: centos7.2 piwik devops log analysis monitoring open-source 服务优惠价: 按服务商许可协议 ...
- CheckPoint_vSEC_Cluster_R77.30
CheckPoint_vSEC_Cluster_R77.30 平台: arm 类型: ARM 模板 软件包: Check Point vSEC Gateway R77.30-041.161 Anti- ...
- 您H1B身份的申请或H1B延期的申请提交对地方了吗？
由于H1B配额的短缺,任何关于移民局对H1B申请的改动对马上要申请H1B的外国学生或专业人士来说都很重要.美国移民局在2007年3月5号发布了关于更改接收H1B身份申请或H1B延期申请的新政策. 申请 ...
- cms-帖子静态化
实现帖子静态化和实现友情链接静态化一致, 1.首先建立帖子类别的实体类: package com.open1111.entity; /** * 帖子类别实体 * @author user * */pu ...
- C++ vector类详解
转自http://blog.csdn.net/whz_zb/article/details/6827999 vector简介 vector是STL中最常见的容器,它是一种顺序容器,支持随机访问.vec ...
- 标准IO ——将A文件fpd第3个字节之后的内容复制到文件fps
/* *使用标准IO ——将A文件fpd第3个字节之后的内容复制到文件fps 流程: 1.创建两个流,链接目标文件和源文件 2.输入流的基准点偏移四个单位然后输入缓冲区 3.输出流读取缓冲区数据送入文 ...