JavaScript发帖案例

美奇开发工作室

于 2018-03-11 14:17:23 发布

阅读量4.4k

点赞数 4

分类专栏： # Javascript

本文链接：https://blog.csdn.net/qq15577969/article/details/79516041

版权

Javascript 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

这里写图片描述

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title>论坛发贴</title>
 <link href="css/bbs.css" rel="stylesheet">
<style type="text/css">
/*新增贴列表样式*/
#content ul li{ height:50px; line-height:50px; padding:20px 0px;}
#content ul li img{ width:50px; height:50px; float:left; border-radius:50px;}
#content ul li h1{ width:540px; height:25px; line-height:25px; float:left; font-size:16px; padding-left:10px;}
#content ul li p{ width:540px;float:left; height:25px;line-height:25px;  padding-left:10px;}
</style>
</head>
<body>
<div class="bbs">
    <header id="btn"><span>我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post" id="post" style="display:none">
        <input class="title" id="title" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="submit" id="submit" value="发布">
    </div>
<div  id="content" style="display:none"><ul></ul></div>
</div>
<script type="text/javascript">
window.onload=function(){ //页面全部加载完成后，执行
var obtn=document.getElementById("btn");//我要发帖的按钮
var opost=document.getElementById("post");//输入面板
var osubmit=document.getElementById("submit");//发布的按钮
var ocontent=document.getElementById("content");//输出列表内容
var tid;//定时器ID
var flag=false;//用于标记鼠标是否放在输入面板上
//鼠标放到按钮上时
obtn.onmouseover=function(){
opost.style.display="block";
}
//鼠标离开按钮之后
obtn.onmouseout=function(){
timeDelay();
}
//鼠标放到输入面板上
opost.onmouseover=function(){
flag=true;
timeDelay(); 
}
//鼠标离开输入面板后
opost.onmouseout=function(){
timeDelay();
}
//有使用键盘的情况下
document.onkeydown=function(event){
flag=true;
timeDelay(); 
}
//时间延迟的方法
function timeDelay(){
    if(flag==false){
        tid=setTimeout(function(){
        opost.style.display="none";
        },5000);//时间延迟5秒
    }
    if(flag==true){
        opost.style.display="block";
        if(tid != "undefined"){
        clearTimeout(tid); 
        }
    }
}
var date=new Date();//获取系统时间
//年
var year=date.getFullYear();
//月
var month=date.getMonth()+1;
//日
var day=date.getDate();
//时
var hour=date.getHours();
//分
var minute=date.getMinutes();
//秒
var second=date.getSeconds();
//时间拼接
var time=year+"-"+addzero(month)+"-"+addzero(day)+" "+addzero(hour)+":"+addzero(minute)+":"+addzero(second)
//时间补0函数
function addzero(num){
    if(num<10){
        return "0"+num;
    }else{
        return num;
    }
}

//点击发布，提交按钮
osubmit.onclick=function(){
var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
flag=false;
opost.style.display="none";
ocontent.style.display="block";

//1.创建li节点
var li=document.createElement("li");
//2.创建img节点
var img=document.createElement("img");
var r=parseInt(Math.random()*tou.length);//随机获取图片下标
img.src="images/"+tou[r];
li.appendChild(img); //将img追加到li末尾
//3.创建h1节点
var h1=document.createElement("h1");
var title=document.getElementById("title").value;//获取标题内容
var bankuai=document.getElementsByTagName("select");
h1.innerHTML=title;
li.appendChild(h1); //将h1追加到li末尾
//4.创建p节点
var p=document.createElement("p");
p.innerHTML="版块："+bankuai[0].value+"    发表时间："+time;
p.style.fontSize="12px";
p.style.color="#999";
li.appendChild(p); //将p追加到li末尾
li.style.borderBottom="1px dashed #dcdcdc";
//5.将创建好的li节点插入div#content下的ul中第一位
ocontent.firstElementChild.insertBefore(li,ocontent.firstElementChild.firstChild);

}//点击发布结束
}//window.onload结束

</script>
</body>
</html>

美奇开发工作室

关注

4
点赞
踩
28

收藏

觉得还不错? 一键收藏
3
评论
JavaScript发帖案例

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;论坛发贴&lt;/title&gt; &lt;link href="css/bbs.css" rel="stylesheet&q
复制链接

扫一扫