简单jqueryd的运用之仿邮件代码实现
程序员文章站
2023-11-17 19:27:58
简单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>
上一篇: 如何利用腾讯课堂挖掘精准用户
下一篇: OpenCV读取中文路径图像