初学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聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...
随机推荐
- 【好书推荐】《剑指Offer》之软技能
俗话说,对于程序员来讲,每年都应该出去面试一下,看看自己的技术能力在外面处于什么水平.程序员在一个公司一个环境一个业务干得太久,很容易丧失学习的动力,获得的仅仅是从新手到熟手.当然,我相信在各行各业均 ...
- URLConnection简单使用
1 --get提交 //资源url地址 URL url = new URL("http://localhost:8080/test/TestServlet?id=10"); //获 ...
- spring构造注入
Sping 结构体系结构4个核心组件 Beans:Bean是包装我们应用程序自定义对象Object的bject存有数据. Core: context在发现建立,维护Bean之间关系所需的一些工具.如资 ...
- jQuery判断动画是否执行完成
JS $(function() { $("#myDiv").bind("click", function() { if ($(this).css("t ...
- IDEA运行时报错(IDEA不识别新语法)：Error:java: Compilation failed: internal java compiler error
File-->setting...-->Buil,Execution,Deployment-->Compiler-->Java Compiler中,改一下Module,我的原来 ...
- enable orgmode latex preview to support retina on mac
Table of Contents 1. enable orgmode latex preview to support retina on mac 1.1. get the proper versi ...
- vscode jsx语法自动补全html代码
1.点击文件——>首选项——>设置 注意:只有在js文件里的jsx才可以自动补全,html文件里的jsx不能.
- 《Python高效开发实战》实战演练——建立应用2
为了在项目中开发符合MVC架构的实际应用程序,需要在项目中建立Django应用.每个Django项目可以包含多个Django应用.建立应用的语法为: #python manage.pystartapp ...
- 【extjs6学习笔记】1.11 初始： config
Ext JS有一个名为config的功能. 该配置允许您使用默认值声明公共属性,这些属性将被其他类成员完全封装. 通过config声明的属性将自动获取get()和set()方法,如果类没有定义这些方法 ...
- System Center Configuration Manager 2016 必要条件准备篇（Part1）
步骤4.创建系统管理容器 SCCM 2016 配置管理系列(Part 1- 4) 介绍AD01上配置了Active Directory域服务(ADDS),然后将Configuration Manag ...