欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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