邮件菜单栏左上角显示的邮件数量

Question

对不起，如果我没有告诉你整个代码，因为我不知道如何实现它。我查看了Facebook消息通知框，如果有消息图标右上方出现新的最近消息，则会在该消息图标右上方放置一个红色数字并覆盖该消息框，并且当您单击该数字时，它就会消失，新的消息消息显示给你，我想知道如何实现它，当更多的新消息传来的数字表明将再次出现多少消息时，他们是否使用ajax自动刷新div来实现？因此，假设我有以下消息框：

 <style> 
    #messsge{width:100px;height:50px;border: 1px soild #000000;} 
    #number{color:#ff0000;position:abosolute; z-index:999;top:-40px;left:-90px;} 
    </style> 
    <a href="#"><div id="message"></div></a><span id="number">3</span> 
    <script> 
    $("#message").click(function (e) { 
    e.preventDefault(); 
    $("#number").hide(); 
     }); 
    var auto_refresh = setInterval(function(){ 
    $('#number').load('number.php').fadeIn("slow"); 
    }, 1000);//not exactly sure how to refresh the number, I assume probably don't need to retrieve it from another php file. 


    </script> 

我不知道我是否做了正确的事情，可能任何机构帮助我说，非常感谢！

Answer 1

，你可以尝试像

在number.php

//get the userid or some id from which you can specify the user from which the request is coming 
//e.g. $id=$_SESSION['CurrentUserID'] 
//apply some logic to determine if the user has new messages if he has some new msgs 
$hasNewMsg="yes"; 
//calculate the number of messages 
$newMsgs=5; 
echo json_encode(new array("hasMsg"=>$hasNewMsg,"newMsgs"=>$newMsgs)); 

//and if no new msgs 
echo json_encode(new array("hasMsg"=>"no")); 

在客户端

<style> 
    #messsge{width:100px;height:50px;border: 1px soild #000000;} 
    #number{color:#ff0000;position:abosolute; z-index:999;top:-40px;left:-90px;} 
    </style> 
    <a href="#"><div id="message"></div></a><span id="number">3</span> 

的JavaScript/jQuery的

$(function(){ 
$("#message").click(function (e) { 
    e.preventDefault(); 
    $("#number").hide(); 
     }); 

var auto_refresh = setInterval(function(){ 

$.ajax({ 
type:"POST", 
dataType:"json", 
success:function(data){ 
if(data.hasMsg=="yes"){ 
$("#number").text(data.newMsgs).fadeIn('slow'); 
} 
else//do nothing  
}, 
error:function(jxhr){ 
console.log(jxhr.responseText); 
} 
});  
});  
}); 

Desclaimer：我不熟悉php所以......