js制作論壇發帖（方法一）

本文轉載自查看原文 2021-08-26 11:00 390

需求：

1.點擊發帖彈出輸入信息窗口
2.填寫標題類型內容
3.點擊確定，將內容添加到列表

js文件

function showpost(){
//把發帖設置為顯示
    var a = document.getElementsByClassName("post")[0].style.display = "block";
    // 清除數據
    clearValue('title');
    clearValue('block');
    clearValue('content');
}
// 清除數據函數
function clearValue(element){
    var value = document.getElementsByClassName(element)[0].value;
    if (value.length > 0) {
        var value = document.getElementsByClassName(element)[0].value = "";
    }
}
function post(){
    // 獲取發帖標題內容
    var title = document.getElementsByClassName("title")[0].value;
    // 獲取select標簽內容
    var option1 = document.getElementsByClassName("block")[0].value;
    // 獲取文本域內容
    var text = document.getElementsByClassName("content")[0].value;
    // 創建ul-li節點
    var li = document.createElement("li");
    var div = document.createElement("div");
    var img = document.createElement("img");
    var h1 = document.createElement("h1");
    // 發帖標題內容賦值給ul里h1
    h1.innerHTML = title;
    // 使用數組保存發帖者頭像
    var imgarray = ["images/tou01.jpg", "images/tou02.jpg", "images/tou03.jpg", "images/tou04.jpg"]
    // 使用函數floor()和函數random()隨機獲取發帖圖像
    var random1 = Math.floor(Math.random() * imgarray.length);
    img.setAttribute("src", imgarray[random1]);
    // 把img節點放到div里
    div.appendChild(img);
   
    var p = document.createElement("p");

    var span = document.createElement("span");
     // 創建文本節點
    var text = document.createTextNode("板塊" + option1);
    // 添加文本節點
    span.appendChild(text);
    // 把span節點添加到p里
    p.appendChild(span);
    var spanDate = document.createElement("span");
    // 創建文本節點
    var text2 = document.createTextNode("發表時間" + getDate());
    spanDate.appendChild(text2);
    p.appendChild(spanDate);
    // 把div h1 p 節點放到li里
    li.appendChild(div);
    li.appendChild(h1);
    li.appendChild(p);
// 把li放到ul里,每次都放第一個位置
      document.getElementsByTagName("ul")[0].prepend(li)
    
    // 把發帖設置為隱藏
    document.getElementsByClassName("post")[0].style.display ="none";
}
function getDate(){
    var date = new Date();
    var nian = date.getFullYear();
    var yue = date.getMonth() + 1;
    var ri = date.getDate();
    var shi = date.getHours();
    var fen = date.getMinutes();
    var miao = date.getSeconds();

    if (yue <= 9) {
        yue = "0" + yue;
    }
    if (ri <= 9) {
        ri = "0" + ri;

    }
    if (shi <= 9) {
        shi = "0" + shi;

    }
    if (fen <= 9) {
        fen = "0" + fen;

    }
    if (miao <= 9) {
        miao = "0" + miao;

    }
    var time = nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao;

    return time;
}

html文件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>課工場論壇列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header ><span  onclick="showpost()">我要發帖</span></header>
    <section>
        <ul>

<!-- <li>

<div>

</div>

</li> -->


       </ul>
    </section>
    <div class="post" >
        <input  class="title" placeholder="請輸入標題（1-50個字符）">
        所屬版塊：<select class="block"><option>請選擇版塊</option><option>電子書籍</option><option>新課來了</option><option>新手報到</option><option>職業規划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" onclick="post()"  value="發布">
    </div>
</div>
</body>

<script src="./課工場.js"></script>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用js制作論壇發貼 jQuery實現論壇發帖Demo Discuz論壇禁止匿名發貼，卻出現匿名發帖或回復？找不到發帖用戶，DZ如何禁止匿名發帖修改教程 docker制作Discuz論壇網站鏡像 Linux搭建discuz論壇的方法 js 實現論壇評論模塊原理 NodeBB – 基於 Node.js 的開源論壇系統 jquery制作論壇或社交網站的每天打卡簽到特效原生js制作表單驗證，基本的表單驗證方法 Python之自動發帖