js实现定时任务弹框

场景.项目中用到需要监测数据,并在数据达到一定条件给与用户提示的需求

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