摘要:简单jqueryd的运用之仿邮件代码实现简单jqueryd的运用之仿邮件代码实现

脚本宝典收集整理的这篇文章主要介绍了

js实例教程-简单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技巧,巧夺天工,精雕玉琢。小宝典献丑了!

总结

以上是脚本宝典为你收集整理的

js实例教程-简单jqueryd的运用之仿邮件代码实现

全部内容,希望文章能够帮你解决

js实例教程-简单jqueryd的运用之仿邮件代码实现

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过