js定时器,请求服务端,实现消息推送到页面声音提醒

时间:2022-08-31 21:13:43

原理或者流程:
页面加载完成后,启动js定时器-----》1,请求服务端数据------->1,返回页面-----》3,判断是否有消息,然后开启声音提醒
--------》循环1,2,3




先附上页面的html代码:需要一些事先隐藏的div

//隐藏的商店id
<input type="hidden" id="mid" value="<s:property value="#session.managerMerchant.id"/>"/>  
<%-- 判断是否为校园商店以显示消息提醒--%>
<s:if test="%{#session.managerMerchant.type==1}">
	<%-- 隐藏的消息框及音乐标签--%>
	<!--  jquery-1.7.1   -->
	<script type="text/javascript" src="${path}/js/client/jquery-1.7.1.min.js"></script>    
	<script type="text/javascript" src="${path}/js/back/MerchantMessagePush.js" charset="utf-8"></script>    
	<%-- 隐藏在页面的系统路径--%>
	<input type="hidden" id="path" value="${path}"/>
       <div id="message" style="width: 180px;height: 30px;border: solid 1px red;position:fixed;left: 410px;top: 5px;background-color:white;display:none;">
		<a target="right" href="merchantManageAction_listUntreatedBuyMessage.action?mid=<s:property value="%{#session.managerMerchant.id}"/>"  sty                  le="colo r: red;">你有(<span id="sum">3</span>)条新购买留言!   
		</a>
		<img id="colse" src="images/client/xx3.jpg"/>
		<div id="ms" >
			<%--<EMBED src='upload/music/a.mp3' autostart='true' HIDDEN='true' loop='true' id='a'>--%>
		</div>
        </div>
</s:if>
<s:if test="%{#session.managerMerchant.type==1}">
   <button id="colsemusic">关闭声音提醒</button><button id="openmusic" style="display: none;">开启声音提醒</button>
</s:if>



MerchantMessagePush.js源码

//商店消息推送
$().ready(function(){
	
	var mid = $("#mid").val();//获取页面隐藏商店id的值
	var path = $("#path").val();//获取系统路径名
	var time = 50000; //定时的时间
	var interval;//定时器
	var message = $("#message");//页面消息框
	var sum = $("#sum");//页面消息框中的具体数字
	var ms = $("#ms");//页面装音乐标签的外层div
	var index = 0;//声音开关变量   0为打开声音提醒  1为关闭
	//音乐标签内容设置
	var musicTag = "<EMBED src='"+path+"/upload/music/xiaoxi.mp3' autostart='true' hidden='true' loop='false' id='a' volume='100'>";
    
    function run(){
  		interval = setInterval(fun,time);
	};
	function fun(){
	  	//alert("定时执行的方法");
	  	$.post('merchantManageAction_messagePush.action',{'mid':mid},function(data){
			if(data==0){//没有消息
				//删除以前的音乐标签内容
				ms.text("");		
				//让消息框显示
				message.hide();
			}else{
				//更新消息数字
				sum.text(data);
				//让消息框显示
				message.show();
				//删除以前的音乐标签内容
				ms.text("");
				//判断声音开关变量值,为0则重新加载音乐标签
				if(index==0){
					ms.append(musicTag);
				}
			}
	  	});
	};
	run();
	
	//绑定关闭消息框及声音事件
	$("#colse").unbind('click');
	$("#colse").bind('click',function(){
		//让消息框显示
		message.hide();
		//删除以前的音乐标签内容
		ms.text("");
	});
	
	//绑定关闭声音的按钮事件设置
	$("#colsemusic").unbind('click');
	$("#colsemusic").bind('click',function(){
		index = 1;//更改声音开关变量值
		$("#colsemusic").hide();
		$("#openmusic").show();
	});
	//绑定开启声音的按钮事件设置
	$("#openmusic").unbind('click');
	$("#openmusic").bind('click',function(){
		index = 0;//更改声音开关变量值
		$("#openmusic").hide();
		$("#colsemusic").show();
	});
	
});