<!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聊天框的更多相关文章

  1. WPF仿QQ聊天框表情文字混排实现

    原文:WPF仿QQ聊天框表情文字混排实现 二话不说.先上图 图中分别有文件.文本+表情.纯文本的展示,对于同一个list不同的展示形式,很明显,应该用多个DataTemplate,那么也就需要Data ...

  2. js五道经典练习题--第四道qq好友列表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  3. js五道经典练习题--第五道成绩列表

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  4. js五道经典练习题--第三道实现购物车功能

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  5. js五道经典练习题--第一道

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

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

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

  7. Socket实现仿QQ聊天（可部署于广域网）附源码（1）-简介

    1.前言 本次实现的这个聊天工具是我去年c#程序设计课程所写的Socket仿QQ聊天,由于当时候没有自己的服务器,只能在机房局域网内进行测试,最近在腾讯云上买了一台云主机(本人学生党,腾讯云有个学生专 ...

  8. 高仿qq聊天界面

    高仿qq聊天界面,给有需要的人,界面效果如下: 真心觉得做界面非常痛苦,给有需要的朋友. chat.xml <?xml version="1.0" encoding=&quo ...

  9. Android特效专辑（六）——仿QQ聊天撒花特效，无形装逼，最为致命

    Android特效专辑(六)--仿QQ聊天撒花特效,无形装逼,最为致命 我的关于特效的专辑已经在CSDN上申请了一个专栏--http://blog.csdn.net/column/details/li ...

随机推荐

  1. 异常检测(Anomaly Detection)

    十五.异常检测(Anomaly Detection) 15.1 问题的动机 参考文档: 15 - 1 - Problem Motivation (8 min).mkv 在接下来的一系列视频中,我将向大 ...

  2. SVN查看最新几次提交日志的命令

    Windows下,使用svn客户端查看日志很方便,linux下查看的记录条数的小技巧: 1>查看某个目录下的所有日志记录 svn log [PATH] 上面的方式,对于命令行下查看时是很不方便的 ...

  3. Xstream将XML转换为javabean的问题

    1.问题:Xstream is not security 解决方法:加上 2.问题:如果没有第二行代码,会出现xstream forbiddenclassexception 解决方法:加上第二行,其中 ...

  4. How to change and add some params to request in Laravel controller?

    $request->merge([ 'aae_id' => request('id', 0), 'foo' => 'bar', ]);

  5. SCM_SVN_CVS

    SCM_SVN_CVS SCM:一种用于记录并控制软件数据的工具.比如有:CVS(有过时趋势)和SVN(更加常用). 版本控制的概念: Respository:仓库 Workspace:工作台 Del ...

  6. Vue修饰符

    为了方便大家写代码,vue.js给大家提供了很多方便的修饰符,比如我们经常用到的取消冒泡,阻止默认事件等等~ 目录 表单修饰符 事件修饰符 鼠标按键修饰符 键值修饰符 v-bind修饰符(实在不知道叫 ...

  7. idea配置springBoot项目热加载

    1.在application.properties中禁用模板引擎缓存 比如freemarker:spring.freemarker.cache=false 2.在pom.xml中添加依赖 <de ...

  8. ansible的playbook剧本

    一.playbook剧本介绍 1)playbook介绍 Playbooks是Ansible的配置,部署和编排语言.它们可以描述您希望远程系统执行的策略,或一般IT流程中的一组步骤. 如果说ansibl ...

  9. k-SLAM：k-mer Sorted List Alignment and Metagenomics

    k-SLAM 是基于大量高通量宏基因组序列数据分析的比对程序,它基于k-mer技术上在reads和序列之间进行比较,然后用Smith-Waterman算法验证.校准是连接在一起组成一个伪组装用来提高特 ...

  10. 文字过多以省略号代替，放在文字上会显示title信息提示

    第一种: <td style="text-align:left; word-wrap:break-word;" title="${b.remarks}"& ...