基于HTML、CSS和JavaScript的网站留言插件源码解析与应用，网站留言插件源码是什么

欧气 2024年12月20日 05:07 0 0

本文目录导读：

源码解析
应用场景

随着互联网的快速发展，网站留言功能已成为网站与用户互动的重要途径，一个优秀的网站留言插件不仅能提高用户体验，还能增加网站的互动性和活跃度，本文将为大家分享一个基于HTML、CSS和JavaScript的网站留言插件源码，并对其进行分析与应用。

源码解析

1、HTML部分

<!DOCTYPE html>
<html>
<head>
    <title>网站留言插件</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="container">
        <h2>网站留言</h2>
        <div class="message-box">
            <ul id="message-list"></ul>
        </div>
        <div class="input-box">
            <input type="text" id="username" placeholder="请输入昵称">
            <textarea id="message" placeholder="请输入留言内容"></textarea>
            <button id="submit-btn">提交留言</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2、CSS部分

基于HTML、CSS和JavaScript的网站留言插件源码解析与应用，网站留言插件源码是什么

图片来源于网络，如有侵权联系删除

.container {
    width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.message-box {
    margin-bottom: 20px;
}
.message-box ul {
    list-style: none;
    padding: 0;
}
.message-box ul li {
    background-color: #f2f2f2;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}
.input-box input,
.input-box textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.input-box button {
    padding: 10px 20px;
    background-color: #5cb85c;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

3、JavaScript部分

document.getElementById('submit-btn').addEventListener('click', function() {
    var username = document.getElementById('username').value;
    var message = document.getElementById('message').value;
    if (username && message) {
        var li = document.createElement('li');
        li.innerHTML = '<strong>' + username + '：</strong>' + message;
        document.getElementById('message-list').appendChild(li);
        document.getElementById('username').value = '';
        document.getElementById('message').value = '';
    } else {
        alert('请输入昵称和留言内容！');
    }
});