第三章JavaScript

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<script>
    var tou=new Array("tou01.jpg ");
</script>
<div class="bbs">
    <header><span onclick="show()">我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="请输入标题(1-50个字符)">
        所属版块:<select><option value="请选择版块">请选择板块</option><option value="电子书籍">电子书籍</option><option value="新课来了">新课来了</option><option value="新手报到">新手报到</option><option value="职业规划">职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布"onclick="upload()">
    </div>
</div>
<script>
    //我要发帖按钮单击事件
    function show(){
        //获取隐藏div
        var div=document.getElementsByClassName("post")[0];
        div.style.display="block";
    }
    //发布按钮的单击事件
    function upload(){
        //创建一个数组保存四张头像
        var tou=new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
        var li=document.createElement("li");
        var div=document.createElement("div");
        var img=document.createElement("img");
        var h1=document.createElement("h1");
        var p=document.createElement("p");
        var title=document.getElementsByClassName("title")[0].value;
        //获取所属板块
        var ban=document.getElementsByTagName("select")[0].value;
        //随机生成
        var index=Math.floor(Math.random()*4);
        //获取系统时间
        var time=new Date();
        var year=time.getFullYear();
        //获取月
        var yue = time.getMonth() + 1;
        //获取日
        var ri = time.getDate();
        //获取时
        var shi = time.getHours();
        var fen =time.getMinutes();
        //获取秒
        var miao= time.getSeconds();

        var shu="发表板块"+ban+"    发表时间"+year+"-"+yue+"-"+ri+"  "+shi+":"+fen+":"+miao;
                        //将各项数据放入对应的标签
        img.setAttribute("src",tou[index]);
        h1.innerHTML=title;
        p.innerHTML=shu;
        //获取ul标签
        var ul=document.getElementsByTagName("ul")[0];
        div.appendChild(img);
        li.appendChild(div);
        li.appendChild(h1);
        li.appendChild(p);
        //将li放入ul第一个位置
        ul.insertBefore(li,ul.firstChild);
        document.getElementsByClassName("post")[0].style.display="none";
        document.getElementsByClassName("title")[0].value="";
        document.getElementsByClassName("content")[0].value="";
    }
</script>
</body>
</html>

 

©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页