场景.项目中用到需要监测数据,并在数据达到一定条件给与用户提示的需求
1.首先贴出弹框js组件的原文地址 http://down.admin5.com/demo/code_pop/35/86/
2.本文需要用到的js 1.d-toast.min.js 2.hm.js 资源下载路径:https://download.csdn.net/download/ljh602755608/10712028
3.css
/* 网页弹框 form ling */
.zoom-image{
width:100%;
height:0;
padding-bottom: 100%;
overflow:hidden;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}
.d-toast-icon{
width:50px;
height:50px;
margin: auto;
margin-left:20px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.d-toast-close:hover{
color:#FFFFFF !important
}
.d-toast{
moz-user-select: -moz-none;
-moz-user-select: none;
-o-user-select:none;
-khtml-user-select:none;
-webkit-user-select:none;
-ms-user-select:none;
user-select:none;
animation:d-toast-left-in 0.5s;
-moz-animation:d-toast-left-in 0.5s; /* Firefox */
-webkit-animation:d-toast-left-in 0.5s; /* Safari and Chrome */
-o-animation:d-toast-left-in 0.5s; /* Opera */
}
.d-toast-close::before{content:"+";}@keyframes d-toast-left-in{from {right:-400px ;}to {right:30px;}}@-moz-keyframes d-toast-left-in /* Firefox */{from {right:-400px;}to {right:30px;}}@-webkit-keyframes d-toast-left-in /* Safari 和 Chrome */{from {right:-400px;}to {right:30px;}}@-o-keyframes d-toast-left-in /* Opera */{from {right:-400px;}to {right:30px;}}@keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}@-webkit-keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}@-moz-keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}@-o-keyframes d-toast-right-out{from{right: 30px;}to{right: -400px;}}.d-toast-close-start{animation: d-toast-right-out 0.5s;-webkit-animation: d-toast-right-out 0.5s;-moz-animation: d-toast-right-out 0.5s;-o-animation: d-toast-right-out 0.5s;}
4.js
//var num = Math.round(Math.random()*90+60);
//循环执行,每隔60-150秒钟执行一次showMsgIcon()
window.setInterval(selectOrderCountNotGet, 60*1000);
//获取当前未接单订单数
function selectOrderCountNotGet(){
$.ajax({
type: "POST",
url: "../order/selectOrderCountNotGet.shtml",
async: true,
success: function(data) {
var count=data.data.count;
if(count>=10){
testInner(count,true);
}
}
});
}
function testInner(i,isShowIcon){
var config={
title:"分配通知",//通知标题部分 默认 新消息 可选
body:"待骑手抢单数已达到"+i+"单,请及时处理",//通知内容部分
inner:true, // 是浏览器仿桌面通知 否首选桌面通知 默认否 可选
onclick:function(data){ //监听点击通知 data:可传递参数 可选
new dToast("仿桌面通知被点击了 传递参数:"+data);
},
data:"我是仿桌面通知的参数",//可传递参数 可选
timeout:59*1000 // 自动关闭 单位毫秒 默认 6500毫秒 timeout<=0 不自动关闭 可选
}
if(isShowIcon==true){
config.icon="../images/fenpei.png";//通知的图片 可选
}
//仿桌面通知
new dToast(config);
}
function testOnlyContent(){
new dToast(el.value);
}