<!DOCTYPE html
>
<
html
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
link
rel=
"stylesheet"
href=
"css/index.css"
>
<
link
rel=
"stylesheet"
href=
"css/reset.css"
>
<
title
></
title
>
<
style
>
p{
margin:
0;
background:
red;
word-break:
break-all;
}
.fl img{
float:
left;
}
.fl p{
float:
left;
margin-left:
5px;
line-height:
24px;
max-width:
140px;
}
.fr img{
float:
right;
}
.fr p{
float:
right;
margin-left:
5px;
line-height:
24px;
max-width:
140px;
background:
yellow;
}
.fl,.fr{
margin-bottom:
5px;
}
</
style
>
</
head
>
<
body
>
<
div
class=
"box"
>
<
div
class=
"box_cont"
>
<
ul
id=
"cont"
>
</
ul
>
<
form
class=
"more"
>
<
s
id=
"people"
>
<
img
src=
"img/1.png"
id=
"pic"
>
</
s
>
<
input
type=
"text"
id=
"text"
/>
<
input
type=
"button"
id=
"btn"
value=
"发送"
/>
</
form
>
</
div
>
</
div
>
<
script
>
var
pic =
document.
getElementById(
"pic");
var
text =
document.
getElementById(
"text");
var
btn =
document.
getElementById(
"btn");
var
cont =
document.
getElementById(
"cont");
var
off =
true;
pic.
onclick =
function(){
if(
off){
pic.
src =
"img/2.png";
}
else{
pic.
src =
"img/1.png";
}
off =!
off;
}
btn.
onclick =
function(){
if(
off){
cont.
innerHTML =
'<li class="fl clearfix"><img src="img/1.png"/><p>'+
text.
value+
'</p></li>'+
cont.
innerHTML;
}
else{
cont.
innerHTML =
'<li class="fr clearfix"><img src="img/2.png"/><p>'+
text.
value+
'</p></li>'+
cont.
innerHTML;
}
text.
value =
"";
}
</
script
>
</
body
>
</
html
>
转载请注明原文地址: https://www.6miu.com/read-83347.html
