模拟聊天对话框
利用原生JS里的事件对象我们可以来模拟下聊天软件的对话框效果如下：
文章图片
CSS:
*{
margin: 0;
padding: 0;
font-size: 16px;
font-family: "微软雅黑";
}
li{
list-style: none;
}
.main{
width: 800px;
height:600px ;
margin: 50px auto;
border: 4px solid #B6B6B6;
border-radius: 10px;
}#box{
margin: 10px;
border: 1px dotted #ccc ;
border-radius: 10px;
height: 400px;
overflow-y: scroll;
}.leftword{
float: left;
background: yellowgreen;
margin: 10px;
border-radius: 6px;
padding: 6px;
}
#box span{
width: 15px;
height: 15px;
display: inline-block;
background: red;
border-radius: 50%;
float: left;
margin: 6px;
}.rightword{
float: right;
background: lightskyblue;
margin: 10px;
border-radius: 6px;
padding: 6px;
max-width: 400px;
word-break: break-all;
white-space: pre-wrap;
}#txt{
margin-left: 20px;
width: 750px;
height: 120px;
overflow-y: scroll;
border-radius: 6px;
}
#btn{
width: 80px;
height: 30px;
text-align: center;
float: right;
margin-right: 20px;
margin-top: 10px;
}
HTML:
- 你好!
- 天王盖地虎
- 你好！
- 宝塔镇河妖
- 脸怎么红了
- 防冷涂的蜡
【模拟聊天对话框】js以及注释如下：
转载于:https://www.cnblogs.com/MikePan/p/9147089.html
推荐阅读
- 眼光要放高远
- 有种聊天真不讨喜
- 改变没有对错
- 三门问题（蒙提霍尔悖论）分析与Golang模拟
- 投石机可连续抛射石头【Algodoo|投石机可连续抛射石头【Algodoo | 物理模拟】
- 立体的人生
- 逃离孤岛定制专属聊天机器人
- spring5源码系列--循环依赖|spring5源码系列--循环依赖 之 手写代码模拟spring循环依赖
- 浅谈股市
- Code|Code Forces－681C（模拟题，优先队列，设计STL）