如题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" οnclick="setShowState();" checked="checked"/>
<button οnclick="loadMsg();">load</button>
</body>
</html>