jq实现简易发帖子，包含头像，名字，内容等

发帖子，包含头像，名字，内容等"/>

jq实现简易发帖子，包含头像，名字，内容等

一.html

      <div class="bbs-box"><div><span>发帖人</span> <input type="text" name="user-name"  ></div><div><span>帖子类型</span> <select name="bbs-type"><option value="娱乐">娱乐</option><option value="政治">政治</option><option value="宠物">宠物</option><option value="学习">学习</option><option value="虾扯淡">虾扯淡</option></select> </div><div><span>发帖内容</span> <textarea name="bbs-con"></textarea></div><button>发帖</button></div><ul class="bbs-list"></ul>

二.css

	      *{padding: 0;margin: 0;box-sizing: border-box;}.clearfix::after{content: "";display: block;clear: both;padding:0;margin: 0;width: 0;height: 0;}ul,li{list-style: none;}.bbs-list {margin-top: 80px;width: 500px;margin: 0 auto;}.bbs-list li{padding:10px 0;border-bottom: 1px dashed gainsboro;}.bbs-list li img{width: 40px;height: 40px;border-radius: 50%;float: left;margin-right: 10px;}.bbs-con{float: left;}.bbs-con em{font-style: normal;color: rgb(190, 190, 190);padding:0 10px;}

三.script

     var date = new Date();
$("button").click(function(){var personName = $(this).parent().find("input[name=user-name]").val() || "匿名";var types = $(this).parent().find("select[name=bbs-type]").val();var content = $(this).parent().find("textarea[name=bbs-con]").val() || "暂无内容";var times = date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate()+"-"+date.getHours();console.log(personName,types,content,times);$(".bbs-list").append('<li class="clearfix">'+' <img src="./header.jpg" alt="">'+" <div class='bbs-con'>"+" <span>"+personName+"</span>"+"<em>"+types+"</em>"+"<em>"+times+"</em>"+"<p>"+content+"</p>"+'</div>'+'</li>')
})