提示框消息

• html

<div>
        <img src="img/msg.png" alt="">
        <span id="hand-up-count">66</span>
</div>

//存放有多少条消息

<ul id="msg-dropdown">
        <li class="msg"></li>
        <li class="msg"></li>
        <li class="msg"></li>
        <li class="msg"></li>
    </ul>

• css

body{
            background: rgba(0, 0, 0, .5);
        }
        div {
            position: relative;
        }
        div>span {
            position: absolute;
            width: 18px;
            height: 18px;
            border-radius: 18px;
            color: #fff;
            background: red;
            border: 2px solid #fff;
            text-align: center;
            font-weight: bold;
            font-size: 12px;
            line-height: 18px;
            top: -3px;
            left: 33px;
        }

• script

// 接收从服务器发来的消息
         let handupitem = `<li class="msg">
                    <span class="fa fa-info-circle"></span>学生${body.username}举手
                    <img src="res/images/delete.png" class="delete"></li>`
          $("#msg-head").after(handupitem); //after是放在后面
 //在span里计数
        let handCount = $("#msg-dropdown").children(".msg");
                if (handCount.length > 0) {
                    $("#hand-up-count").parent().css("display", "block");
                }
                $("#hand-up-count").html(handCount.length);