js五道经典练习题--第二道仿qq聊天框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.container{
width: 280px;
margin: 20px auto;
border: 1px solid #ddd;
}
.container .content{
height: 400px;
padding: 10px;
overflow: auto;
}
.fl{
float: left;
}
.fr{
float: right;
}
.clear{
clear: both;
}
.footer{
border-top: 1px solid #ddd;
padding: 10px;
height:30px;
}
.footer img{
float: left;
}
.footer input{
float: left;
width: 140px;
outline: none;
border: 1px solid #ddd;
/*margin: 6px;*/
padding: 7px 8px;
margin-left: 10px;
margin-right: 5px;
}
.btn{
padding: 7px 8px;
outline: none;
border: none;
background: #8A2BE2;
color: #fff;
}
.active{
background: darkgreen;
color: #eee;
}
.text{
word-break: break-all;
max-width: 210px;
}
.msgL,.msgR{
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="content" id="content">
</div>
<div class="footer">
<img src="img/QQ1.png" id="img" />
<input type="text" id="text"/>
<button class="btn" type="button" id="send">发送</button>
</div>
</div>
<script>
var oSend = document.getElementById("send")
var oText = document.getElementById("text")
var oContent = document.getElementById("content")
var oImg = document.getElementById("img")
var onOff = true
oSend.onclick = function(){
var oTxt = oText.value
if(oTxt.length==0){
alert('请输入内容')
}else{
if(onOff){
var str1 = '<div class="msgL fl clear"><div class="img_text"><div class="img fl"><img src="img/QQ1.png" /></div><div class="text fr">'+oTxt+'</div></div></div>'
oContent.innerHTML+=str1
oText.value = ""
}else{
var str2 = '<div class="msgR fr clear"><div class="img_text"><div class="img fr"><img src="img/QQ2.png" /></div><div class="text fl active">'+oTxt+'</div></div></div>'
oContent.innerHTML+=str2
oText.value = ""
}
}
}
oImg.onclick = function(){
if(onOff){
oImg.src = "img/QQ2.png"
onOff = false
}else{
oImg.src = "img/QQ1.png"
onOff = true
}
}
</script>
</body>
</html>
js五道经典练习题--第二道仿qq聊天框的更多相关文章
- WPF仿QQ聊天框表情文字混排实现
原文:WPF仿QQ聊天框表情文字混排实现 二话不说.先上图 图中分别有文件.文本+表情.纯文本的展示,对于同一个list不同的展示形式,很明显,应该用多个DataTemplate,那么也就需要Data ...
- js五道经典练习题--第四道qq好友列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第五道成绩列表
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第三道实现购物车功能
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js五道经典练习题--第一道
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- JS简单仿QQ聊天工具的制作
刚接触JS,对其充满了好奇,利用刚学到的一点知识,写了一个简单的仿QQ聊天的东西,其中还有很多的不足之处,有待慢慢提高. 功能:1.在输入框中输入内容,点击发送,即可在上方显示所输入内容. 2.点击‘ ...
- Socket实现仿QQ聊天(可部署于广域网)附源码(1)-简介
1.前言 本次实现的这个聊天工具是我去年c#程序设计课程所写的Socket仿QQ聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...
- 高仿qq聊天界面
高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...
- Android特效专辑(六)——仿QQ聊天撒花特效,无形装逼,最为致命
Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/li ...
随机推荐
- 转录组的组装Stingtie和Cufflinks
转录组的组装Stingtie和Cufflinks Posted: 十月 18, 2017 Under: Transcriptomics By Kai no Comments 首先这两款软件都是用 ...
- 洛谷1993 小K的农场
原题链接 裸的差分约束. \(X_a-X_b\geqslant C\) \(X_a-X_b\leqslant C\Rightarrow X_b-X_a\geqslant -C\) \(X_a-X_b\ ...
- jQuery动画函数回调
$("#show").click(function () { //function 是显示完成之后的回调函数 $("p").show(2000,function ...
- PHD实时数据对象
PHD实时数据库在化工制造业的应用 PISDK 开发包 电力企业信息化
- Eclipse 安装使用 M2Eclipse 插件
help --> Install New Software --> Add 安装完后需要重启eclipse 通常 Eclipse 会自带 Maven.但可能按自己安装的 Maven 存在版 ...
- oracle导出expdp导入impdp
conn sys/password as sysdba;创建用户test1CREATE USER test1 IDENTIFIED BY "pass1";GRANT CONNECT ...
- Microsoft translater
professional tranlater tool : https://translator.microsoft.com/neural/
- HierSort(希尔)————Java
利用Java进行希尔排序(元素中有0会有问题),步长经过调试length/2+1最合适. import java.util.Scanner; public class HierSort { priva ...
- scope属性
scope属性 1.<bean>属性 2.作用:控制对象有效范围(单例.多例等) 3.<bean/> 标签对应的对象默认是单例的 3.1 无论获取多少次,都是同一个对象 4.s ...
- ThinkPHP3.2 伪静态配置
前台伪静态且隐藏入口文件 就把“.htaccess文件” 放到指定文件夹下面 如图home做伪静态并隐藏入口文件: Apache为例,需要在入口文件的同级添加.htaccess文件 如果用的phpst ...