一、效果图。
二、HTML+CSS样式。
<style>
.box{ width:500px; margin:90px auto;}
.wrad_box{ width:320px; height:400px; border:1px solid #000; padding:20px; margin-bottom:20px; overflow:auto; }
.img{ width:30px; height:30px;cursor:pointer;}
.btn1,.text{ height:30px; line-height:30px;}
.text{ width:150px; border:1px solid #ccc;}
.btn1{ background:#ff6600; color:#fff; padding:0 10px; line-height:0; cursor:pointer;}
.active{ overflow:hidden; margin-bottom:8px;}
.active1{ overflow:hidden; margin-bottom:8px;}
.active div{ width:270px; float:left;}
.active a{ background:#21c618; color:#fff; float:right; padding:5px;line-height:24px;}
.active1 div{float:right; width:270px;}
.active1 a{ float:left;padding:5px; background:#ded6e7; line-height:24px; color:#181018;}
.active1 img{ float:left;}
</style>
<div class="box">
<div class="wrad_box" id="wrad_box"></div>
<img src="img/1.gif" alt="表情" id="img" class="img" />
<input type="text" id="text" class="text" />
<input type="button" value="发送" id="btn1" class="btn1"/>
</div>
三、javaScript代码。
<script>
window.onload = function(){
var oDiv =document.getElementById('wrad_box');
var oImg =document.getElementById('img');
var oText =document.getElementById('text');
var oBtn =document.getElementById('btn1');
var off =true;
var le ='active';
oImg.onclick =function(){
if(off){
oImg.src ='img/2.gif';
le='active1';
off=false;
}else{
oImg.src ='img/1.gif';
le='active';
off=true;
}
};
oBtn.onclick =function(){
if(oText.value==''){
alert('请输入内容');
}else{
//oDiv.innerHTML+=oText.value+'<img src='+oImg.src+' alt="表情" id="img" class="img" />'+'<br/>';
oDiv.innerHTML='<div class='+le+'><div><a herf="#">'+oText.value+'</a></div>'+'<img src='+oImg.src+' alt="表情" id="img" class="img" /></div>'+oDiv.innerHTML;
oText.value='';
}
};
};
四、jquery代码。
$(function(){
var off =true;
$('#img').click(function(){
if(off){
$('#img').attr('src','img/2.gif');
off=false;
}else{
$('#img').attr('src','img/1.gif');
off=true;
}
});
$('#btn1').click(function(){
$('#wrad_box').html($('#text').val()+'<img src='+$('#img').attr('src')+' alt="表情" class="img" />'+'<br/>'+$('#wrad_box').html());
$('#text').val('');
});
})
注意jquery是js的一个库，所以在使用jquery需要引入jq的库文件。库文件在附件中下载。
