今天给大家分享一下jq写留言板的一种方法

首先我要声明一下-------

我非常喜欢写博客，给大家分享自己的小难点

好了，下面进入正题

//这个是留言要加入的地方
<div class="lyb">
        <div class="liuyanban">
			<img src="images/tx1.png"/>
			<h2>如何学习Web前端开发课程</h2>
			<p>板块:<span class="banKuai"></span>
			   发表时间<span class="shiJian"></span>
			</p>
			<button >删除</button>
		</div>
    </div>

//这个是点击我要发贴的话，出现的输入框
<div class="shuru">
        <textarea name="biaoti" class="biaoti" cols="30" rows="10" placeholder="请输入标题"></textarea><br>
        <span class="sp1">选择社区</span>
        <select name="shequ" class="shequ">
           <option>选择社区</option>
           <option>新手初入</option>
           <option>日常灌水</option>
           <option>论坛老鸟</option>
        </select>    
        <textarea name="zhengwen" class="zhengwen" cols="30" rows="10"></textarea>
        <button class="fabu">发布</button>
        <button class="quxiao">取消</button>
    </div>

//这个是随机头像
function tx(){
	var toux = ["images/tx1.png","images/tx2.png","images/tx3.png"];
	var sui = Math.floor(Math.random()*3);
	return toux[sui];
}
//这个是时间函数，当前的
function times(){
	var date = new Date();
	var year = date.getFullYear();
	var month = date.getMonth();
	var day = date.getDate();
	var hours = date.getHours();
	var minutes = date.getMinutes();
	var seconds = date.getSeconds();
	return "   "+year+"-"+month+"-"+day+"  "+hours+":"+minutes+":"+seconds;
}
$(function(){
   //当点击这个按钮以后输入框出现
	$(".dj").click(function(){
		$(".shuru").addClass('dis');
	})
	//点击取消时输入框隐藏
	$(".quxiao").click(function(){
		$(".shuru").removeClass('dis');
	})
	//点击发布按钮时的事件
	$(".fabu").click(function(){
		var biaoti = $(".biaoti").val();//这三个是获取输入框里三个小框的值
		var shequ = $(".shequ").val();
		var neirong = $(".zhengwen").val();

        if(biaoti.length!=0 && shequ.length!=5 && neirong.length!=0){//如果小框里都有字
        	var divs = $("<div></div>");//创建和上面已经创建好的一样样的标签
        	var imgs = $("<img>");
        	var srcs = tx();
        	    imgs.attr("src",srcs);
        	var h2s = $("<h2></h2>");
        	var span1 = $("<span></span>");
        	var span2 = $("<span></span>");
        	var btns = $("<button>删除</button>");
        	span2.html(times());//然后把值赋给刚创好的标签	
        	span1.html(shequ);
        	var ps = $("<p>板块：</p>");
        	ps.append(span1);
        	ps.append(span2);
        	h2s.html(biaoti);
        	divs.append(imgs);//把标签都放进一个新创的div里
        	divs.append(h2s);
        	divs.append(ps);
        	divs.append(btns);
        	divs.addClass("liuyanban");//给div一个class名，样式之前已经做好
        	$(".lyb").prepend(divs);//把那个div放进留言区
        	$(".shuru").removeClass('dis');//然后执行到这儿的时候把显示的那个class名移除
        	$(".biaoti").val("");//小框的值赋为空
        	$(".zhengwen").val("");
        	$(".shequ").val("选择社区");
        }else{
        	alert("请输入内容");//如果没字的话就不会发表成功
        }
	})
})

好了，这就是我留言板的做法，稍微繁琐了一些，大家参考一下，有简便的方法可以互相分享哦~~~