js制作论坛发帖(方法二)

js文件

// 1. 点击发帖弹出隐藏的输入框
var posttie = document.getElementById("posttie");
var postshuru = document.getElementById("postshuru");
posttie.onclick = function(){
    postshuru.style.display = "block";
}



// 2.点击发帖,将输入的内容获取,发布到列表里
var postfabu = document.getElementById("postfabu");
var titlebiaoti = document.getElementById("titlebiaoti");
var bankuai = document.getElementsByTagName("select")[0];
var uls = document.getElementsByTagName("ul")[0];
var neirong = document.getElementsByTagName("textarea")[0];
postfabu.onclick = function(){
    // 2.1 获取输入的内容
    var titlebiaoti_zhi = titlebiaoti.value;
    var bankuan_zhi = bankuai.value;
    var datenow = new Date();
    var nian = datenow.getFullYear();
    var yue  = datenow.getMonth() + 1;
    var  ri = datenow.getDate();
    var shi = datenow.getHours();
    var fen = datenow.getMinutes();
    var shijian  =  nian + "-" + yue + "-" + ri + " " + shi + ":" + fen;

    // 随机头像
    var touxiangh = Math.floor(Math.random()*4 + 1)

    if(titlebiaoti_zhi == ""){
        alert("请输入标题");
        return
    }
    if(bankuan_zhi == "请选择版块"){
        alert("请选择版块");
        return
    }
    if(neirong.value == ""){
        alert("请输入Neirong ");
        return
    }
    // 2.2 拼接内容与标签
    var content= '<li>'+
                '<div><img src="./images/tou0'+ touxiangh +'.jpg" alt=""></div>'+
                '<h1>'+ titlebiaoti_zhi +'</h1>'+
                '<p><span>版块 '+ bankuan_zhi +'</span>'+
                '<span>事件 '+ shijian +'</span></p></li>'

    // 2.3 放入列表
    
    uls.innerHTML = content + uls.innerHTML;

    // 2.4 处理业务
    postshuru.style.display = "none";
    titlebiaoti.value = "";
    bankuai.value = "请选择版块";
    neirong.value = "";

}

 

上一篇:反转链表


下一篇:常用的复杂代码逻辑