右下角显示全局实时消息提醒

引用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)

})