jQuery实例——新浪微博

jwz934738949

于 2020-09-04 18:18:26 发布

阅读量162

点赞数

分类专栏： jQuery+Ajax

本文链接：https://blog.csdn.net/jwz934738949/article/details/108409470

版权

jQuery+Ajax 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>新浪微博</title>
  <link rel="stylesheet" href="css/index.css">
  <script src="js/jquery-3.5.1.js"></script>
  <script src="js/index.js"></script>
</head>
<body>
<div class="nav">
  <img src="images/nav.png" alt="">
</div>
<div class="content">
  <img src="images/left.png" alt="" class="left">
  <div class="center">
    <textarea class="comment"></textarea>
    <input type="button" value="发布" class="send" disabled>
  </div>
  <img src="images/right.png" alt="" class="right">
  <div class="messageList"></div>
</div>
<div class="page">
  <a href="javascript:;">1</a>
  <a href="javascript:;">2</a>
  <a href="javascript:;">3</a>
</div>
</body>
</html>

index.css

* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
}

body {
    background: url("../images/body_bg.png") no-repeat center 0;
    background-size: cover;
}
.nav {
    width: 100%;
    height: 48px;
}

.nav>img {
    width: 100%;
}

.content {
    width: 1000px;
    height: auto;
    overflow: hidden;
    background-color: #5fa6d1;
    margin: 30px auto 0 auto;
}

.content>.left {
    float: left;
    width: 150px;
}

.content>.right {
    float: right;
    width: 240px;
}

.content>.center {
    float: left;
    width: 600px;
    height: 168px;
    background: url("../images/comment.png") no-repeat 0 0;
    background-size: 600px 168px;
}

.center>.comment {
    width: 565px;
    height: 73px;
    margin-top: 53px;
    margin-left: 15px;
    resize: none;
    border: none;
}

.center>.send {
    margin-top: 1px;
    margin-left: 501px;
    background: #fd8040;
    width: 80px;
    height: 28px;
    border: none;
    color: white;
}

.content>.messageList {
    width: 595px;
    background-color: #fff;
    margin-left: 5px;
    float: left;
}

.messageList>.info {
    padding: 10px 20px;
    border-bottom: 2px solid #ccc;
}

.info>.infoText {
    line-height: 25px;
    margin-bottom: 10px;
}

.info>.infoOperation {
    width: 100%;
    overflow: hidden;
}

.infoOperation>.infoTime {
    float: left;
    font-size: 13px;
    color: #ccc;
}

.infoOperation>.infoHandle {
    float: right;
    font-size: 13px;
}

.infoHandle>a {
    text-decoration: none;
    color: #ccc;
    margin-left: 10px;
    padding-left: 25px;
}

.infoHandle>a:first-child {
    background: url("../images/like.png") no-repeat 0 0;
    background-size: 20px 20px;
}

.infoHandle>a:nth-child(2) {
    background: url("../images/dislike.png") no-repeat 0 0;
    background-size: 18px 18px;
}

.infoHandle>a:last-child {
    background: url("../images/del.png") no-repeat 0 0;
    background-size: 18px 18px;
}


.page {
    width: 1000px;
    height: 40px;
    background-color: blanchedalmond;
    margin: 0 auto;
    text-align: right;
    padding: 10px;
    box-sizing: border-box;
}

.page>a {
    text-decoration: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    line-height: 20px;
    text-align: center;
    color: #2b2b2b;
}

index.js

$(function () {
  // 监听输入内容的实时输入
  $("body").delegate(".comment", "propertychange input", function () {
    // 当输入框没有内容时，默认按钮无法点击。当输入内容时，才可以点击
    if ($(this).val.length > 0) {
      // 按钮可点击
      $(".send").prop("disabled", false)
    } else {
      // 按钮不可点击
      $(".send").prop("disabled", true)
    }
  })
  // 监听发布按钮的点击
  $(".send").click(function () {
    // 拿到用户输入的内容
    const $comment = $(".comment").val()
    // 创建节点
    const $weiBo = createEle($comment)
    // 将节点插入messageList中去
    $(".messageList").prepend($weiBo)
  })
  // 监听点赞按钮的点击
  $("body").delegate(".infoUp", "click", function () {
    $(this).text(parseInt($(this).text()) + 1)
  })
  // 监听踩按钮的点击
  $("body").delegate(".infoDown", "click", function () {
    $(this).text(parseInt($(this).text()) + 1)
  })
  // 监听删除按钮的点击
  $("body").delegate(".infoDel", "click", function () {
    $(this).parents(".info").remove()
  })

  // 创建节点方法
  function createEle(text) {
    const $weiBo = $(`
        <div class="info">
      <p class="infoText">` + text + `</p>
      <p class="infoOperation">
        <span class="infoTime">` + getTime() + `</span>
        <span class="infoHandle">
          <a href="javascript:;" class="infoUp">0</a>
          <a href="javascript:;" class="infoDown">0</a>
          <a href="javascript:;" class="infoDel">删除</a>
        </span>
      </p>
    </div>
    `)
    return $weiBo
  }

  // 获取当前时间
  function getTime() {
    const date = new Date()
    const y = date.getFullYear()
    const mon = date.getMonth() + 1
    const d = date.getDate()
    const h = date.getHours()
    const min = date.getMinutes()
    return y + "-" + mon + "-" + d + " " + h + ":" + min
  }
})