- 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);