微博仿写相关

最新推荐文章于 2026-06-17 21:32:59 发布

原创最新推荐文章于 2026-06-17 21:32:59 发布 · 26 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#windows

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>微博发布</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    ul {
      list-style: none;
    }
    .wrap {
      width: 700px;
      margin: 20px auto;
    }
    textarea {
      width: 100%;
      height: 80px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      resize: none;
    }
    .bar {
      margin: 8px 0 20px;
      text-align: right;
    }
    button {
      padding: 4px 16px;
      border: none;
      background: #0088ff;
      color: #fff;
      cursor: pointer;
    }
    button:disabled {
      background: #ccc;
      cursor: not-allowed;
    }
    li {
      padding: 10px 0;
      border-bottom: 1px solid #eee;
      position: relative;
    }
    .del {
      position: absolute;
      right: 0;
      top: 10px;
      cursor: pointer;
      color: red;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <textarea id="inp" maxlength="200" placeholder="输入内容"></textarea>
    <div class="bar">
      <span id="count">0</span>/200
      <button id="send" disabled>发布</button>
    </div>
    <ul id="list"></ul>
  </div>

  <script>
    const inp = document.getElementById('inp');
    const count = document.getElementById('count');
    const send = document.getElementById('send');
    const list = document.getElementById('list');

    inp.oninput = function() {
      let l = this.value.length;
      count.innerText = l;
      send.disabled = l === 0;
    }

    send.onclick = function() {
      let val = inp.value;
      list.innerHTML = `<li>${val}<span class="del">删</span></li>` + list.innerHTML;
      inp.value = '';
      count.innerText = 0;
      send.disabled = true;
    }

    list.onclick = function(e) {
      if (e.target.className === 'del') {
        e.target.parentElement.remove();
      }
    }
  </script>
</body>
</html>