01-新手入门级别：js编写简易的留言板

最新推荐文章于 2022-05-19 18:38:41 发布

原创最新推荐文章于 2022-05-19 18:38:41 发布 · 246 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

js特效专栏收录该内容

9 篇文章

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个动态留言板。用户可以输入留言并提交，同时实现头像点击后切换效果。留言内容会显示在页面上，留言栏可隐藏显示，提供了一个简单的交互体验。

代码免费下载地址，具体代码如下。（喜欢的话就点赞收藏奥）
在这里插入图片描述

html部分：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>留言板</title>
    <link rel="stylesheet" href="./css/messageCss.css">
</head>

<body>
    <!-- 留言板 -->
    <div id="messageBoard">
        <!-- 留言处 -->
        <div class="message clearfix">
            <!-- 用户头像 -->
            <div id="headPortrait" class="headPortrait fl"></div>
            <!-- 留言栏 -->
            <div class="messageColumn fl clearfix">
                <div class="messageColumnnConent fl">
                    <input type="text" name="messageText" class="messageText fl">
                    <input type="button" name="submitButton" class="submitButton button fl" value="提交" onclick="submit()">
                </div>
                <input type="button" name="button" class="addButton button fr" value="+" onclick="addMessage()">
            </div>
            <!-- 留言展示处 -->
            <div class="messageShow">
                <ul class="messageShow-ul">
                </ul>
            </div>
        </div>
    </div>
    
</body>
</html>

css部分：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style-type: none;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
.clearfix::after {
  content: " ";
  display: block;
  clear: both;
}
#messageBoard {
  position: relative;
  margin: 100px auto 0;
  width: 600px;
}
#messageBoard .message {
  padding: 5px 0;
  width: 100%;
  height: 70px;
  background-color: #4464ce;
}
#messageBoard .message .headPortrait {
  margin: 0 20px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 30px 5px #032fc0, 0 0 5px inset white;
}
#messageBoard .message .headPortrait img {
  vertical-align: top;
  width: 100%;
  height: 100%;
}
#messageBoard .message .messageColumn {
  width: 480px;
  height: 60px;
  padding: 12.5px 0;
}
#messageBoard .message .messageColumn .messageColumnnConent {
  display: none;
}
#messageBoard .message .messageColumn .messageText {
  width: 300px;
  height: 35px;
  font-size: 20px;
  outline: none;
  border: none;
}
#messageBoard .message .messageColumn .submitButton {
  margin-left: 20px;
}
#messageBoard .message .messageColumn .button {
  width: 50px;
  height: 35px;
  outline: none;
  border: none;
  color: white;
  background-color: #032fc0;
}
#messageBoard .message .messageColumn .addButton {
  font-size: 20px;
  font-weight: 600;
}
#messageBoard .message .messageShow {
  position: relative;
  margin: 100px auto;
  width: 600px;
  border: 1px solid #4464ce;
}
#messageBoard .message .messageShow .messageShow-ul li {
  padding: 10px;
  height: 70px;
  line-height: 60px;
  border-bottom: 1px solid #4464ce;
}
#messageBoard .message .messageShow .messageShow-ul li img {
  vertical-align: top;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 20px;
}

js部分：

		//头像切换
        //头像初始化，头像图片存放数组
        var headArray = ["./images/headPortrait1.jpg", "./images/headPortrait2.jpg", "./images/headPortrait3.jpg", "./images/headPortrait4.jpg"];
        //获取头像所在的div，并初头像图片
        var headPortrait = document.getElementById("headPortrait"),
            i = 0;
        headPortrait.innerHTML = "<img src='" + headArray[i] + "'>";
        headPortrait.onclick = function() {
            i++;
            console.log(i);
            if (i >= headArray.length) {
                i = 0;
            }
            headPortrait.innerHTML = "<img src='" + headArray[i] + "'>";
        }

        //留言添加
        display = "none";

        function addMessage() {
            //对留言栏的获取
            var messageColumnnConent = document.getElementsByClassName("messageColumnnConent")[0];
            if (display == "none") {
                display = "block";
            } else {
                display = "none";
            }
            messageColumnnConent.style.display = display;
        }


        //编写留言板内容，并且提交
        function submit() {
            //获取留言栏的内容并，为空不提交
            var messageText = document.getElementsByName("messageText")[0],
                messageShow_ul = document.getElementsByClassName("messageShow-ul")[0];
            if (messageText.value != "") {
                messageShow_ul.innerHTML += "<li><img src='" + headArray[i] + "'>" + messageText.value + "</li>";
                messageText.value = "";
            } else {
                alert("留言不能为空!!!");
            }
        }