利用JS写出的留言板

最新推荐文章于 2022-06-27 15:21:21 发布

置顶爱泡澡的小萝卜

最新推荐文章于 2022-06-27 15:21:21 发布

阅读量1.4k

点赞数 3

分类专栏：前端知识文章标签： js css html

本文链接：https://blog.csdn.net/stphencurry/article/details/104858609

版权

前端知识专栏收录该内容

13 篇文章 0 订阅

订阅专栏

留言板

我们平时在一些社交的网站啊，发帖评论啊，都能看到有留言的功能，
那么博主今天就来给大家简单编写一下留言板的小程序。

首先我只做的留言板分为这几部分：

有楼层，点击发布留言后，会自动弹出楼层
楼层内部要有用户姓名，发布的内容，发布的时间
用户还可以选择头像来进行发布
注意，不写用户名和留言内容就提交是不可以的，不选择头像也不可以

留言板代码:
HTML：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>留言板</title>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="js/js.js"></script>
</head>
<body onload="head()">
    <div class="title">
        <h1>留言板</h1>
        <div id="step" >一共（）楼</div>
    </div>
    <!--tilte-->
    <div id="contents">
       <div class="box" id="box">
           <div class="tit">1楼</div>
           <div class="img"><img src="img/a.jpg" alt=""/></div>
           <div class="main">
              <div>用户姓名:</div>
              <div>留言内容:</div>
           </div>
           <div class="div02">
               <div><a href="javasrcipt:void(0)" onclick="del(this)">删除</a> | <a href="javasrcipt:void(0)" onclick="add(this,0)">点赞（）</a></div>//javasrcipt:void(0)防止页面跳转，点击不做任何事
               <div>发布时间:2020年3月14日</div>
           </div>
       </div>
    </div>
    <h1 class="title01">发布留言</h1>
    <div class="message">
        选择头像
        <div id="img">
            <img src="img/a.jpg" alt=""/>
            <img src="img/b.jpg" alt=""/>
        </div>
        <div>用户姓名: <input type="text" onfocus="f(this,'请输入用户名')" onblur="f1(this)" id="input"/><span></span></div>
        <div>留言内容: <textarea id="button" cols="30" rows="5" onfocus="f(this,'请输入留言内容')" onblur="f1(this)"></textarea><span></span></div>
        <button onclick="onMessage()">发布留言</button>
    </div>
</body>
</html>

CSS：

*{padding:0;margin: 0;list-style: none;}/*设置全局样式*/

.title{width: 1000px;height:40px;border-bottom: 2px solid red;margin: auto}
.title h1{width:850px;text-align: center;line-height:40px;float: left}
.title #step{width:150px;line-height: 40px;float: left}

#contents{width: 1000px; margin: auto;}
#contents .box{display: none; height: 150px; border-bottom: 1px #ccc dashed; }
#contents .box .tit{text-align: center; width: 50px; float: left; line-height: 150px;}
#contents .box .img{ width: 100px; height: 100px; border: 1px solid #ccc; float: left; margin: 24px;}
#contents .box .img img{width: 100px;}
#contents .box .main{line-height: 40px; width: 600px; height: 125px; margin-top: 25px; float: left;}
#contents .box .div02{margin-top: 25px; width:190px; float: left; line-height: 30px; }

.title01{width: 900px;text-align: center}
.message{width: 500px;margin: auto;line-height: 30px}
#img img{width: 100px;border:1px solid #ccc;}
#img .border{border:1px solid red}

.black{color: black}
.red{color: red}

css中要把楼层的display属性设置成none，刚开始不显示出来


//判断输入用户名onfocus效果，获取焦点
function f(obj,text){
    obj.nextSibling.innerHTML=text;
    obj.nextSibling.className="black";
}
//onblur效果，失去焦点
function f1(str){
    str.nextSibling.innerHTML="";
}

//删除留言
function del(obj){
    var p = obj.parentNode.parentNode.parentNode;
    var contents=document.getElementById("contents");
    contents.removeChild(p);
}
//点赞增加
var t=0;
function add(obj,t){
    t++;
    var div=obj.parentNode;
    div.innerHTML='<a href="javasrcipt:void(0)" οnclick="del(this)">删除</a> |'+'<a href="javasrcipt:void(0)" οnclick="add(this,'+t+')">点赞（'+t+'）</a>'
}

//提交留言
var i=0;
var j=0;
var y=false;
function onMessage(){
    var input = document.getElementById("input");
    var button= document.getElementById("button");
    if(input.value == ""){
        input.nextSibling.innerHTML="*必须填写用户名";
        input.nextSibling.className="red";
    }else if(button.value==""){
        button.nextSibling.innerHTML="*必须填留言内容";
        button.nextSibling.className="red";
    }else if(y==false){
        alert("必须选择一个头像");
    }else{
        i++;
        j++;
        var box=document.getElementById("box");
        var div=box.cloneNode(true);//克隆盒子
        var child=div.getElementsByTagName("div");
        div.id="box"+i;//因为id的命名是唯一的，所以这种方法来改变每次克隆出来的盒子的id
        div.style.display="block";
        child[0].innerHTML=i+"楼";
        child[3].innerHTML= "用户姓名:"+input.value;
        child[4].innerHTML="留言内容:"+button.value;
        child[7].innerHTML="发布时间"+onTime();//获取动态时间
        var contents=document.getElementById("contents");
        contents.appendChild(div);//在contents中插入克隆的盒子
        var step=document.getElementById("step");
        step.innerHTML="一共有（"+j+"）楼"//总楼层数增加
        input.value="";
        button.value="";
    }
}


//发布时间
function onTime(){
    var date = new Date();
    var y = date.getFullYear();
    var m = date.getMonth()+ 1;
    var r = date.getDate();
    var d = date.getDay();
    if(d==0){d="日";}else if(d==1){d="一"}else if(d==2){d="二"}else if(d==3){d="三"}else if(d==4){d="四"}else if(d==5){d="五"}else if(d==6){d="六"}//这里的星期是没有日的，要手动更改一下
    var h = date.getHours();
    var f =date.getMinutes();
    var s = date.getSeconds();
    return y + "年" + m + "月" + r + "日" + "星期" + d + "," + h + "时" + f + "分" + s + "秒";
}

//选择头像
function head(){
    var pic=document.getElementById("img");
    var imgs=pic.getElementsByTagName("img");
    var box=document.getElementById("box");
    var boxImg=box.getElementsByTagName("img");
    for(var a=0;a<imgs.length;a++){
        imgs[a].onclick=function(){
            for(var b=0;b<imgs.length;b++){
                y=true;
                imgs[b].className="";
            }
            this.className="border";
            boxImg[0].src=this.src;
        }//利用两层循环，里层循环是清空图片的所有样式，外层利用onclick事件，能够让鼠标选择图片后增加图片样式
    }
}

博主的图片是自己找的，如果哪位小伙伴也想玩一下这个简易的留言板，可以借鉴一下博主的代码，希望能够帮助到别人，同时上次的轮播博主又增加了一些新的功能，不久后将会更新。

爱泡澡的小萝卜

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
利用JS写出的留言板

留言板我们平时在一些社交的网站啊，发帖评论啊，都能看到有留言的功能，那么博主今天就来给大家简单编写一下留言板的小程序。首先留言板它分为几部分：他要有楼层，点击发布留言后，他会自动弹出楼层楼层内部要有用户姓名，发布的内容，发布的时间用户还可以选择头像来进行发布接下来我把想讲的内容，放在代码中话不多说，直接上码在这里插入代码片...
复制链接

扫一扫

专栏目录