一、效果圖。

二、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的庫檔案。庫檔案在附件中下載。

轉載於:https://blog.51cto.com/guoweishuai/1564743