工作中点滴收集(二)-闪动标题和声音提示

本文链接：https://blog.csdn.net/liuyanlinglanq/article/details/52850170

对于后台来说,提示消息,让后台服务人员及时处理,其实挺实用的;

这种提示,主要体现在,1.声音;2.红点或者记录条数;3.还有就是闪动了.而一般来说,手机,软件上用的比较多的是1,2两种,比如QQ,微信;而浏览器的话,其实用1,3来说也不错.主要的效果就是当有新消息来的时候,会有声音的提示,并且会闪动标题.

我的做法是,在前端,每隔一段时间去查询一次后台是否有未处理的记录,若有,则提示;没有,则不提示.做起来比较简单,主要就是用了1个三方的插件,处理闪动;找了一个比较好玩的声音文件.至于红点或者红色的未读记录条数,就是css效果了,通过js控制显示隐藏就行.

1.首先引入闪动标题的js,flash_title_player.js;

2.然后在jsp页面上,放上声音的mp3文件;并且是循环(loop)播放的.

<audio id="bgMusic" src="${rqpath}/common/music/msg.mp3" loop="loop"></audio>

3.在界面的初始化js代码中,如onload,或者onready中写这个代码;根据自己的需求写哪都行.我们是要求一打开界面,就要看下是否有未读记录,有就立马提示;然后是当前若没有未读消息,但是后台服务人员一直打开该页面的时候,若有未读消息,则立即提示.

//全局变量,未读记录和声音music对象初始化,和下面的function不放在一块;
var unMessage = 0;
var music = "";

function(event){
		//待处理消息页面,检查未查看的消息
		if($("#page").val() == "Unmessage") { //根据page隐藏域中是否为Unmessage,判断是否为待处理消息页面;若是,则执行;否则其他页面,则停止闪动
			//记录下原来的标题;就是<title></title>中的标题
			var title = $('#title').val();
			
			//声音对象
			music = document.getElementById("bgMusic");
			
			//一进来执行一遍,(打开界面就可以显示未读记录)
			//查询是否有未读消息;结果是未读消息条数
			$.post(rqpath+"/message/Unmessage.do",{},function(data){
				unMessage=data;
				
				//如果有未读消息,则闪动标题,并播放音乐
				if(unMessage > 0) {
					flashTitlePlayer.start('您有'+unMessage+'个消息未查看,请及时处理');
					music.play();
				}else {
					//否则就停止
					music.pause();
					flashTitlePlayer.stop();
					//并且还原标题
					document.title = title;
				}	
			},'json');

			//循环,每隔一段时间执行一次everyTime
			$('body').everyTime('10s',function(){
				$.post(rqpath+"/message/Unmessage.do",{},function(data){
					unMessage=data;
				},'json');
				
				//如果有未读消息,则闪动标题,并播放音乐
				if(unMessage > 0) {
					flashTitlePlayer.start('您有'+unMessage+'个消息未查看,请及时处理');
					music.play();
					//刷新页面
					window.location.href = window.location.href;
				}else {
					//否则就停止
					music.pause();
					flashTitlePlayer.stop();
					//并且还原标题
					document.title = title;
				}	
			});
		}else {
			//其他页面,则停止闪动,并修改标题;其他界面木有放音乐控件,所以打开其他页面是不会有声音的,但是闪动会有;
			flashTitlePlayer.stop();
			if(document.title != $('#title').val()) {
				document.title =  $('#title').val();
			}
		}
}

4.后台根据自己要求查询数据就行,此处省略.

5.效果就是如图了,有消息提示;至于声音就是用的QQ有新消息时的滴滴滴,只是我这个是无限循环的,听多了,挺烦的;图片被我弄得有些面目全非,嘿嘿~