一、效果图。

二、HTML+CSS样式。

.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;}

三、javaScript代码。

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+''+'
';

oDiv.innerHTML='

'+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()+''+'
'+$('#wrad_box').html());

$('#text').val('');

});

})

注意jquery是js的一个库，所以在使用jquery需要引入jq的库文件。库文件在附件中下载。

本文出自 “帅帅” 博客，谢绝转载！