【留言板】原生js实现的一个留言板功能

html代码：

    <div class="liuyanban wp">
        <div class="message">
            <div class="liuyan_box">
                <div class="input_box">
                    <label for="">昵称：</label>
                    <input type="text" placeholder="请输入昵称" id="name" onblur="funcs.checkInput(this, 'name')"
                        onfocus="funcs.clearError(this, '请输入昵称!')">
                    <span id="nameError" class="error-msg"></span>
                </div>
                <div class="input_box">
                    <label for="">输入留言：</label>
                    <textarea id="textarea" placeholder="想说点啥？...." onblur="funcs.checkInput(this, 'textarea')" onfocus="funcs.clearError(this, '请输入内容！')"></textarea>
                    <span id="textareaError" class="error-msg"></span>
                </div>
                <div class="input_box">
                    <label for="">选择头像：</label>
                    <div id="imgContainer">
                        <img class="avatar" src="images/tx1.png" onclick="funcs.selectAvatar(this)">
                        <img class="avatar" src="images/tx2.png" onclick="funcs.selectAvatar(this)">
                        <img class="avatar" src="images/tx3.png" onclick="funcs.selectAvatar(this)">
                    </div>
                </div>
                <div class="currentAvatarBox"><img id="currentAvatar" src="images/tx1.png" alt="Current Avatar"></div>
                <div id="pic1" class="error-msg"></div>
                <div class="tijiao" onclick="funcs.postComment()">立即提交</div>  
            </div>
        </div>

        <div class="tongji"><span id="step">一共有（0）条</span></div>
        <div id="commentsContainer"></div>
    </div>

css代码：

/*留言板*/
.liuyanban .title {
    height: 80px;
    background: #2b669a;
    margin: auto;
    color: #ffffff;
}

.liuyanban .title h1 {
    line-height: 80px;
    text-align: center;
}

.liuyanban .title span {
    float: left;
    width: 80px;
    line-height: 80px;
    font-size: 12px;
}

.liuyanban #contents {
    background: #9acfea;
    margin: auto;
}

.liuyanban #contents .box {
    height: 150px;
    border-bottom: 1px dashed #ffffff;
}

.liuyanban #contents .box .div01 {
    width: 50px;
    text-align: center;
    float: left;
    line-height: 150px;
}

.liuyanban #contents .box .tit {
    width: 80px;
    height: 80px;
    float: left;
    margin: 30px;
}

.liuyanban #contents .box .tit img {
    width: 80px;
    height: 80px;
}

.liuyanban #contents .box .main {
    width: 100px;
    height: 100px;
    float: left;
    margin-top: 30px;
    line-height: 40px;
}

.liuyanban #contents .box .div02 {
    font-size: 12px;
    width: 240px;
    height: 100px;
    float: right;
    line-height: 40px;
    margin-top: 30px;
}

.liuyanban .title1 {
    height: 80px;
    background: #2b669a;
    margin: auto;
    color: #ffffff;
}

.liuyanban .title1 span {
    float: left;
    width: 80px;
    line-height: 80px;
    font-size: 12px;
}

.liuyanban .title1 h1 {
    line-height: 80px;
    text-align: center;
}

.liuyanban .message {
    margin: auto;
    line-height: 30px;
    background: #9acfea;
    padding: 30px 0;
    position: relative;

}
.liuyanban .tijiao{
    background-color: #2b669a;
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

.liuyanban .message .liuyan_box {
    width: 600px;
    margin: 0 auto;
    font-size: 20px;
}

.liuyanban .avatar {
    width: 50px;
    height: 50px;
    border: 3px solid #fff;
}

.liuyanban .border {
    border: 3px solid #2b669a;
}

.liuyanban .red {
    color: red;
}
#currentAvatar{
    width: 200px;
    height: 200px;
}
.liuyanlist{
    display: flex;
    background-color: #fff;
    padding: 30px;
}
.liuyanlist .div01{
    width: 100px;
    font-size: 18px;
}
.liuyanlist .tit img{
    width: 100px;
    height: 100px;
}
.liuyanlist .main{
    width: 900px;
    padding-left: 30px;
}
.liuyanlist .main>div{
    margin-bottom: 10px;
}
.tongji{
    padding: 20px;
    font-size: 18px;
}
#name{
    width: 300px;
    height: 35px;
}
#textarea{
    width: 300px;
    height: 150px;
    outline: none;
    padding-left: 10px;
    padding-top: 10px;
}
.input_box{
    display: flex;
    align-items: start;
    margin-bottom: 20px;
}
.input_box label{
    font-size: 14px;
    width: 80px;
}
.input_box input{
    width: 200px;
    height: 35px;
    background: #fff;
    padding: 0 10px;
}

.currentAvatarBox{
    position: absolute;
    right: 20px;
    top: 100px;
}
.error-msg{
    font-size: 14px;
    color: red;
}

JavaScript代码：

var funcs = {};  

// 留言板
function LiuYan() {
    // 全局变量，用于跟踪留言的数量  
    var commentCount = 0;

    // 选择头像的函数  
    function selectAvatar(img) {
        var currentAvatar = document.getElementById('currentAvatar');
        currentAvatar.src = img.src;
        document.getElementById('pic1').innerHTML = ""; // 清除头像错误提示信息  
    }

    // 校验输入框的函数  
    function checkInput(input, type) {
        var errorMsg = '';
        var errorElement;

        if (type === 'name') {
            errorMsg = '*必须填写昵称';
            errorElement = document.getElementById('nameError');
        } else if (type === 'textarea') {
            errorMsg = '*必须填写内容';
            errorElement = document.getElementById('textareaError');
        }

        if (input.value === '') {
            errorElement.innerHTML = errorMsg;
        } else {
            clearError(errorElement);
        }
    }

    // 清除错误提示的函数  
    function clearError(errorElement) {
        errorElement.innerHTML = '';
    }

    // 发布留言的函数  
    function postComment() {
        var name = document.getElementById("name").value;
        var main = document.getElementById("textarea").value;
        var avatarSrc = document.getElementById('currentAvatar').src; // 获取当前选中的头像地址  

        // 验证用户名和内容是否填写  
        if (!name || !main) {
            alert("信息不完整，请填写用户名和留言内容！");
            return;
        }

        // 创建一个新的留言div元素  
        var newCommentDiv = document.createElement('div');
        newCommentDiv.className = 'liuyanlist';
        newCommentDiv.id = 'box' + (commentCount + 1);

        // 创建楼层号、头像、用户名、内容、操作（点赞和删除）和发布时间  
        var floorDiv = document.createElement('div');
        floorDiv.className = 'div01';
        floorDiv.textContent = (commentCount + 1) + '楼';
        newCommentDiv.appendChild(floorDiv);

        var avatarDiv = document.createElement('div');
        avatarDiv.className = 'tit';
        var avatarImg = document.createElement('img');
        avatarImg.src = avatarSrc;
        avatarDiv.appendChild(avatarImg);
        newCommentDiv.appendChild(avatarDiv);

        var mainDiv = document.createElement('div');
        mainDiv.className = 'main';
        var nameContainer = document.createElement('div');
        nameContainer.textContent = '昵称：' + name;
        var contentContainer = document.createElement('div');
        contentContainer.textContent = '内容：' + main;
        mainDiv.appendChild(nameContainer);
        mainDiv.appendChild(contentContainer);
        newCommentDiv.appendChild(mainDiv);

        var actionDiv = document.createElement('div');
        actionDiv.className = 'div02';
        var actionLinks = document.createElement('div');
        actionLinks.innerHTML = '<a href="javascript:void(0)" onclick="funcs.delComment(this)">删除</a>|<a href="javascript:void(0)" onclick="funcs.praiseComment(this,0)">点赞（0）</a>';
        var timeContainer = document.createElement('div');
        timeContainer.textContent = getFormattedTime(); //用于获取格式化时间  
        actionDiv.appendChild(actionLinks);
        actionDiv.appendChild(timeContainer);
        newCommentDiv.appendChild(actionDiv);

        // 将新的留言div添加到留言容器  
        var commentsContainer = document.getElementById("commentsContainer");
        commentsContainer.appendChild(newCommentDiv);

        // 更新留言计数和楼层显示  
        commentCount++;
        updateCommentCount();

        // 重置输入框以便用户可以输入新的留言  
        document.getElementById("name").value = '';
        document.getElementById("textarea").value = '';
    }

    // 用于获取当前格式化时间  
    function getFormattedTime() {
        var date = new Date();
        var year = date.getFullYear();
        var month = ('0' + (date.getMonth() + 1)).slice(-2); // 月份补零  
        var date1 = ('0' + date.getDate()).slice(-2); // 日期补零  
        var hours = ('0' + date.getHours()).slice(-2); // 小时补零  
        var minutes = ('0' + date.getMinutes()).slice(-2); // 分钟补零  
        var seconds = ('0' + date.getSeconds()).slice(-2); // 秒补零  
        return year + '-' + month + '-' + date1 + ' ' + hours + ':' + minutes + ':' + seconds;
    }

    // 更新留言计数显示的函数  
    function updateCommentCount() {
        document.getElementById("step").innerHTML = "一共有（" + commentCount + "）条";
    }

    // 删除留言的函数  
    function delComment(obj) {
        var commentDiv = obj.closest('.liuyanlist');
        var commentsContainer = document.getElementById("commentsContainer");
        commentsContainer.removeChild(commentDiv);
        commentCount--;
        updateCommentCount();
    }

    // 点赞的函数  
    function praiseComment(obj, t) {
        t++; 
        obj.parentNode.innerHTML = '<a href="javascript:void(0)" onclick="funcs.delComment(this)">删除</a>|<a href="javascript:void(0)" onclick="funcs.praiseComment(this,' + t + ')">点赞（' + t + '）</a>';
    }
  
    funcs.checkInput = checkInput;
    funcs.postComment = postComment;  
    funcs.delComment = delComment;  
    funcs.praiseComment= praiseComment;  
    funcs.selectAvatar = selectAvatar;

}

// 在页面加载时初始化funcs对象  
window.onload = function() {  
    LiuYan();
   
};