简单jqueryd的运用之仿邮件代码实现
程序员文章站
2022-07-17 11:11:44
简单jqueryd的运用之仿邮件代码实现
&...
简单jqueryd的运用之仿邮件代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>工程论坛</title>
<script src="jquery-3.1.0.js"></script>
<style>
.zong {
width: 800px;
height: 500px;
margin: 0 auto;
position: relative;
}
.fa{
width: 250px;
height: 53px;
color: #fff;
background-color:#009966;
font-size: 25px;
}
.rong{
width: 590px;
height: 370px;
border: 1px solid #ccc;
margin: 0 auto;
display: none;
position: absolute;
top: 80px;
left: 100px;
background-color: #fff;
}
input:nth-child(1){
width: 506px;
height: 25px;
margin-left: 20px;
margin-top: 10px;
}
p{
margin-left: 20px;
}
select{
width: 105px;
height:25px;
}
textarea{
width:506px;
height:200px;
margin-left: 20px;
}
.bu{
width: 100px;
height: 35px;
background-color:#009966 ;
color: #fff;
}
</style>
</head>
<body>
<p class="zong">
<button class="fa">我要发帖</button>
<hr/>
<p class="rong">
<input type="text" value="" placeholder="请输入标题(1-50个字符)">
<p>所属版块:
<select>
<option>请选择版块</option>
<option value="">新课来了</option>
<option value="">新手报到</option>
<option value="">电子书籍</option>
<option value="">职业规划</option>
</select>
</p>
<textarea></textarea>
<p><button class="bu">发布</button></p>
</p>
</p>
<script>
$(".fa").click(function () {
$(".rong").show()
});
$(".bu").click(function () {
$(".rong").css("display","none");
var tu= $(["<img src='tou01.jpg' style='float: left'>","<img src='tou02.jpg' style='float: left'>","<img src='tou03.jpg'style='float: left'>","<img src='tou04.jpg'style='float: left'>"]);
var time=parseint(math.random()*4);
var nei="<p style='font-weight:bold;margin-left: 120px'>"+$('input').val()+"</p>";
var ban=$("select option:checked").text();
var date = new date();
var result = date.getfullyear()+'-'+(date.getmonth()+1)+'-'+date.getdate()+' '+date.gethours()+':'+date.getminutes()+':'+date.getseconds();
// $("hr").after(result)
$("hr").after("<p style='width: 800px;height:120px;border-bottom: 1px dashed #ccc'>"+tu[time]+nei+"<p style='margin-left: 120px;font-size: 10px;color: #ccc'>版块:"+ban+"<span style='margin-left: 15px'>发表时间:"+result+"</span>"+"</p>"+"</p>")
$("input").val("");
$("textarea").val("");
})
</script>
</body>
</html> 下一篇： 掌握窍门，羊肉怎么炒好吃又简单的做法