初学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聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...
随机推荐
- Oracle子查询和多表查询
多表查询需要用到表的连接 连接可以分为:(自行百度) 交叉连接(数字逻辑的笛卡尔积,不做解释) 等值连接 例如:select * from t_a, t_b where t_a.xx = t_b.xx ...
- Lambda动态排序分页通用方法
using System; using System.Collections.Generic; using System.Linq; using System.Linq.Expressions; us ...
- ios MBProgressHUD 使用,及二次封装
MBProgressHUD是一个显示HUD窗口的第三方类库,用于在执行一些后台任务时,在程序中显示一个表示进度的loading视图和两个可选的文本提示的HUD窗口.MBProgressHUD 二次封装 ...
- 11个炫酷的 Linux 终端命令
我已经用了十年的Linux了,通过今天这篇文章我将向大家展示一系列的命令.工具和技巧,我希望一开始就有人告诉我这些,而不是曾在我成长道路上绊住我. 1.命令行日常系快捷键 如下的快捷方式非常有用,能够 ...
- centos执行apt-get提示不存在
在centos下用yum install xxx yum和apt-get的区别 一般来说著名的linux系统基本上分两大类: 1.RedHat系列:Redhat.Centos.Fedora等 2.De ...
- 从零开始的全栈工程师——js篇2.2
条件语句 补充: var a=“hello world” a这个变量是字符串了 对于里面每一个字母来说 他是字节 里面有11个字节 字节总数用length表示 如下: 根据上面的内容咱们又发现了一个运 ...
- agc015F - Kenus the Ancient Greek(结论题)
题意 题目链接 $Q$组询问,每次给出$[x, y]$,定义$f(x, y)$为计算$(x, y)$的最大公约数需要的步数,设$i \leqslant x, j \leqslant y$,求$max( ...
- css 选择器 & UI元素的伪类选择器 & 伪元素选择器
UI元素的伪类选择器 1. :focus 用来选取获取焦点事件 2. :enabled 用来指定当元素处于可用状态时的样式 3. :disable 用来指定元素处于不可用时的状态 表单里应用 ...
- 【MATLAB】设定坐标的轴的范围
set(gca,'XLim',[0 1.5]);%X轴的数据显示范围set(gca,'XTick',[0:0.1:1.5]);%设置要显示坐标刻度set(gca,'XTickLabel',[0:0.1 ...
- maven-整合到eclips
1.把maven的识别文件放到maven的安装路径下 2.在eclips中的properties中找到maven,勾选下载文档和下载源码的复选框以下载源码 3.创建maven项目 4.右键pom.xm ...