js操作frame开展消息提示-JavaSript-爱易网页

js操作frame开展消息提示

日期：2014-05-16　浏览次数：20361 次

js操作frame进行消息提示

如题index.html

top.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script language="javascript" type="text/javascript" src="js/jquery.js"></script>
<script language="javascript" type="text/javascript">
	var mainFrame;//frame
	var mainDoc;//doc
	var msgDivHtml = '<div id="msgDiv">消息提示</div>';//html
	var msgDiv;//div
	var height;//高度
	var opacity;//透明度
	var l;
	var s;
	var h;
	var t;
	var isShow = true;//是否每隔一段时间就显示一次
	var autoHideSecond=5;//自动隐藏时间,5秒
	
	window.onload = function(){
		t = window.setInterval('setDateTime()',1000);
		mainFrame = self.parent.frames['mainFrame'];
		loadMsg();
	};
	
	function setDateTime(){
		var today  =  new  Date();
		var h  =  today.getHours();
		var m  =  today.getMinutes();	
		var s  =  today.getSeconds();
		document.getElementById('dateTime').innerHTML = h+':'+m+':'+s;
	}
	
	function updateMsgDiv(){
		mainDoc = mainFrame.document;
		msgDiv = mainDoc.getElementById('msgDiv');		
	}
	
	//向后台获取信息
	function loadMsg(){
		//clear
		window.clearTimeout(s);
		window.clearTimeout(h);
		
		var topCount = 4;//假设向后台获取到消息条数了
		updateMsgDiv();
		var body = mainDoc.body;
		if(!msgDiv){
			$(body).append(msgDivHtml);
			updateMsgDiv();
		}
		//加载html片段完成
		//添加计时器弹出效果
		//还原透明度
		msgDiv.style.height = 1+'px';
		setAlpha(msgDiv,100);
		//还原高度
		showMsg();
		l = window.setTimeout('loadMsg()',10000);	
	}
	
	//显示div
	function showMsg(){
		updateMsgDiv();
		if(!msgDiv)return;
		height = window.parseInt(msgDiv.offsetHeight);
		if(height<=120){
			msgDiv.style.height = (height+4)+'px';
			s = window.setTimeout('showMsg()',20);
		}else{
			window.clearTimeout(s);
			//10秒后关闭
			opacity = 100;
			h = window.setTimeout('hideMsg()',autoHideSecond*1000);
		}
	}
	
	//设置透明度
	function setAlpha(div,v){
		if(!div)return;
		if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){
        	div.style.opacity = v/100;	
    	}else if(navigator.userAgent.indexOf("MSIE")>0) {
        	div.style.filter = 'Alpha(Opacity='+v+')';
    	}
	}
	
	//隐藏div
	function hideMsg(){
		updateMsgDiv();
		if(opacity>=2){
			opacity = opacity-2;
			setAlpha(msgDiv,opacity);
			h = window.setTimeout('hideMsg()',20);
		}else{
			window.clearTimeout(h);
		}
	}
	
	//设置显示状态
	function setShowState(){
		if(isShow){
			isShow = false;
			window.clearTimeout(l);
		}else{
			isShow = true;
			loadMsg();
		}
	}
	
</script>
</head>

<body>
top.html
<br/>时间：<span id="dateTime"></span><br/>
开启消息提示：<input type="checkbox" onclick="setShowState();" checked="checked"/>
<button onclick="loadMsg();">load</button>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js操作frame开展消息提示

相关资料更多>

推荐阅读更多>