DDR爱好者之家

JavaScript仿微博发布信息案例
站长资源 2025/10/27 佚名
26 1538
DDR爱好者之家 Design By 杰米

现在很多类似以微博发布动态的效果，下面为一个用 JavaScript写的小小的类似微博发布信息的案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>微博发布</title>
  <style type="text/css">

    *{
      padding: 0;
      margin: 0;
    }
    ul {

      list-style: none;
    }

    .box {
      width: 600px;
      height: auto;
      border: 1px solid #ccc;
      margin: 100px auto;
      text-align: center;
      padding: 30px 0;
      background-color: rosybrown;
    }

    .box textarea {
      width: 450px;
      resize: none; /*设置文本不能过拖动*/
    }
    .box li {

      width: 450px;
      line-height: 30px;
      border-bottom: 1px dashed #ccc;
      margin-left: 80px;
      text-align: left;
    }

    .box li a {

      float: right;
    }
  </style>

  <script type="text/javascript">

    window.onload = function (){
      //获取数组的第一个
      var btn = document.getElementsByTagName("button")[0];
      var txt = document.getElementsByTagName("textarea")[0];
      var ul = document.createElement("ul"); 
      btn.parentNode.appendChild(ul); //添加子节点
      btn.onclick = function (){

        //1.需要判断文本中是否有内容
        if(txt.value == ""){

          alert("亲!内容不能为空哦!!");

          return false; //让操作就在这个地方终止
        }

        var newli = document.createElement("li"); //创建一个新的li标签
        newli.innerHTML = txt.value +"<a href='javascript:;'>删除</a>"; //给新的标签添加内容，并拼接删除已连接
        ul.appendChild(newli);

        //清空输入框
        txt.value = "";

        var aa = document.getElementsByTagName("a");//获取所有的a标签

        for(var i = 0;i<aa.length;i++){ // 遍历点击删除

          aa[i].onclick = function () {

            this.parentNode.remove();
          }
        }


      }

    }

  </script>
</head>
<body>
<div class="box">

  微博发布:<textarea name="" id="" cols="30" rows="10"></textarea>
  <button>发布</button>

</div>
</body>
</html>

布局出来的样式，点击蓝色的删除链接，会删除对应的那一行内容。

JavaScript仿微博发布信息案例

陌陌说：重要知识点：获取输入框的数值，创建子节点和给子节点添加内容，删除对应的节点。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米