摘要:简单jqueryd的运用之仿邮件代码实现简单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>

简单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>

觉得可用,就经常来吧!Javascript技巧 脚本宝典 欢迎评论哦! js技巧,巧夺天工,精雕玉琢。小宝典献丑了!

本文固定链接: http://www.js-code.com/js/js_1311.html