原生JS实现留言板案例

最新推荐文章于 2024-07-29 11:53:27 发布

友善的肥羊

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量246

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_43290826/article/details/131720599

版权

这是一个非常简单的留言板案例，实现了增删改留言的功能：

首先是HTML+CSS代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    
    <div class="message-board">
        <h2>留言板</h2>
        <div id="message-input-container">
            <textarea id="message-input" placeholder="输入你的留言"></textarea>
            <button id="submit-btn">提交</button>
        </div>
        <ul id="message-list">
        </ul>
    </div>
    <script src="index.js"></script>
</body>
</html>

.message-board {
    width: 80%;
    margin: auto;
}

#message-input-container {
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#message-input {
    flex-grow: 1;
    height: 30px;
    margin-right: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#submit-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

#submit-btn:hover {
    background-color: #45a049;
}

#message-list {
    list-style-type: none;
    padding: 0;
}

#message-list li {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.delete-btn {
    color: #fff;
    background-color: #f44336;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: 70%;
}

.delete-btn:hover {
    background-color: #d32f2f;
}

.mod {
    color: #fff;
    background-color: #07bb70;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    margin-left: auto;
}

.mod:hover {
    background-color: #0b7a48;
}

然后是JS代码：

function main() {
  var textarea = document.querySelector("#message-input");
  var submitBtn = document.querySelector("#submit-btn");
  var ul = document.querySelector("#message-list");
  var change = document.querySelector("#change")
  var item = pullItem();
  if (item == null) {
    item = [];
  } else {
    renderHtml(item)
  }
  function renderHtml(item) {
    ul.innerHTML = ""
    item.forEach(i => {
      addItem(i);
    });
  }
  textarea.addEventListener("keydown", e => {
    if (e.keyCode === 13) {
      e.preventDefault();
      submitBtn.click();
    }
  });
  submitBtn.addEventListener("click", () => {
    var textContent = textarea.value.trim();
    if (textContent != "") {
      addItem(textContent);
      item.push(textContent);
      saveItem(item);
      textarea.value = "";
    } else {
      alert("输入不能为空");
    }
  });
  ul.addEventListener("click", e => {
    if (e.target.className == "delete-btn") {
      newEle = e.target.previousElementSibling.innerHTML;
      item = item.filter(i => i != newEle);
      e.target.parentNode.remove();
      saveItem(item);
    }
  });

  ul.addEventListener("click", e => {
    if (e.target.className == "mod") {
      newEle = e.target.previousElementSibling.previousElementSibling.innerHTML;
      var secEle = prompt("请输入要修改的内容");
      console.log(secEle);
      secEle != null ? secEle = secEle : secEle = newEle
      item = item.map(i => i == newEle ? newEle = secEle : i=i);
      saveItem(item);
      renderHtml(item)
    }
  });

  function saveItem(item) {
    window.localStorage.setItem("save", JSON.stringify(item));
  }
  function pullItem() {
    return JSON.parse(window.localStorage.getItem("save"));
  }
  function addItem(textContent) {
    var li = document.createElement("li");
    li.innerHTML = `
                  <span class="message">${textContent}</span>
                  <button class="delete-btn">删除</button>
                  <button class="mod">修改</button>
      `;
    ul.appendChild(li);
  }
}

window.addEventListener("load", main);