实现一个小小的聊天对话
css样式:
img,button,input{
margin: 0;
padding: 0;
}
#div {
width: 400px;
height: 400px;
border: 2px solid #000;
}
#img{
margin-top: 5px;
width: 20px;
height: 20px;
border: 2px solid #000;
}
img{
width: 20px;
height: 20px;
border: 1px solid #000;
}
button{
height: 20px;
font-size: 15px;
}
input{
height: 20px;
}
html的结构:
<div id="div"></div>
<img id="img" src="img/1.jpg" alt="">
<input id="input" type="text" value="">
<button id="button" type="buton">发送</button>
JS代码:
var div = document.getElementById('div');
var img = document.getElementById('img');
var button = document.getElementById('button');
var input = document.getElementById('input');
var flag = true;
img.onclick = function(){
if(flag){
this.src="img/2.jpg";
}else{
this.src="img/1.jpg";
}
flag = !flag;
}
button.onclick = function(){
var value = input.value
input.value = '';
if(flag){
div.innerHTML +='<div style="display:block;"><img style="float: left;height: 20px;border: 1px solid #000;" src="img/1.jpg">'+'<div style="height: 20px;float: left;border: 1px solid #000;">'+value+'</div></div>'+'<div style="height:2px"></div><br>';
}else{
div.innerHTML +='<div style="display:block;"><img style="float: right;height: 20px;border: 1px solid #000;" src="img/2.jpg">'+'<div style="height: 20px;float: right;border: 1px solid #000;">'+value+'</div></div>'+'<div style="height:2px"></div><br>';
}
}
以上内容希望能帮助到,谢谢您的浏览