右下角显示全局实时消息提醒
作者：互联网
引用notyf.js
<script type="text/javascript" src="./resource/script/notyf.min.js"></script>
<
<link type="text/css" rel="stylesheet" href="./resource/style/notyf.min.css" />
js:
$(document).ready(function () {
var notyf = new Notyf({delay:10000});
console.log(notyf);
var messageArr=[]; //存放消息
var currentNum=0; //第几条消息
/*获取消息*/
function messageFun() {
$.ajax({
type: "POST",
url: location.origin+"/msg.php",
data: {
op:"message"
},
dataType: "json",
success: function (data) {
// console.log(data.message);
messageArr=messageArr.concat(data.message);
console.log(messageArr);
notyf.confirm("<p style='color:#035a1b'>"+messageArr[currentNum].content+"</p><div style='color:#abffc2;'>订单编号:<span style='color:#fff;margin-left: 10px;'>"+messageArr[currentNum].ordersn+"</span></div><div style='color:#abffc2;'>收货人姓名:<span style='color:#fff;margin-left: 10px;'>"+messageArr[currentNum].nickname+"</span></div><div style='color:#abffc2;'>联系人电话:<span style='color:#fff;margin-left: 10px;'>" +
messageArr[currentNum].mobile+"</span></div><p style='margin-top:20px;color:#abffc2;'>订单时间:<span style='color:#fff;margin-left: 10px;'>"+messageArr[currentNum].time+"</span></p>");
}
});
}
//3s获取一次
setInterval(function () {
messageFun();
currentNum++;
},3000)
messageFun();
/*后台删数据*/
function messageEnd(id) {
$.ajax({
type: "POST",
url: "{php echo $this->createWebUrl('order', array('op' => 'update_msg'))}",
data: {id: id},
dataType: "json",
success: function (data) {
}
});
}
setInterval(function () {
messageEnd(messageArr[currentNum].id);
},3000)
})
标签：function,notyf,右下角,messageArr,实时,全局,currentNum,data,id 来源： https://blog.csdn.net/qq_36457584/article/details/88885689