如题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>
分享到：
相关推荐
如果希望仅支持启用了 JavaScript 的浏览器，可以使用 noscript 标签来提示用户启用 JavaScript。 ```html 您需要启用 JavaScript 才能查看完整内容。 ``` #### 8. 查看页面源代码 有时为了让用户直接查看页面...
安装过程通常涉及下载安装文件（如本例中的"IE 插件 Chrome Frame 1.2.183.7.exe"），然后按照提示进行操作。需要注意的是，用户必须具有管理员权限才能成功安装。 **开发者考虑** 对于Web开发者，启用Chrome ...
在jQuery中，我们可以利用其强大的选择器和API来方便地操作frame内的元素。 在提供的代码示例中，主要展示了如何通过jQuery来检查frame页面的状态并触发相应的行为。代码中定义了一个名为`CheckUser`的函数，该函数...
标题中的"Window-Server-Frame.rar"提示我们这是一个与Windows服务器相关的框架，可能是用于构建Windows服务的代码库。"js camera _框架 服务"这部分描述可能意味着该框架包含JavaScript（js）实现的摄像头功能，...
Chrome Frame的安装过程相对简单，只需下载名为ChromeFrameSetup.exe的安装程序，然后按照提示进行操作即可。需要注意的是，用户必须在安装前开启IE的ActiveX控件选项，因为Chrome Frame是通过ActiveX技术来实现的。...
### JavaScript 常用操作技巧详解 在前端开发领域，JavaScript 是一门不可或缺的语言，它能够帮助开发者实现多种功能，从而提升用户体验。本文将基于提供的文件信息，深入解析一系列JavaScript常用操作技巧及其应用...
3. 创建消息处理器，处理客户端发送的消息，并进行相应操作。 4. 客户端使用Stomp.js和SockJS.js库与WebSocket服务器交互，订阅主题并发送消息。 通过这种方式，你可以轻松地在Spring Boot应用中实现实时消息推送，...
3. **验证和提示**：检查代码中的A-Frame语法错误，提供实时提示。 4. **预览和VR模拟**：在编辑器内预览A-Frame场景，甚至可能有内置的VR模式模拟。 5. **调试工具**：针对A-Frame的调试工具，帮助开发者查找和修复...
6.4.4 对属性进行操作 146 第3篇 JavaScript高级编程篇 第7章 正则表达式 151 7.1 正则表达式及其作用 151 7.2 正则表达式参考语法 152 7.2.1 限定符 154 7.2.2 选择匹配符 157 7.2.3 分组组合和反向引用符 158 ...
标题 "activemq+js" 暗示我们即将探讨的是如何在JavaScript环境中使用ActiveMQ，这是一个开源的消息代理和队列服务器，广泛应用于Java平台，但也可以通过多种方式与JavaScript进行交互。ActiveMQ允许应用程序之间...
描述部分提及该消息提示类是“纯js编写”，这意味着它完全使用JavaScript编程语言实现，不依赖于任何其他脚本语言。JavaScript是一种广泛用于网页开发的脚本语言，通过它可以创建交互式网页和Web应用。 该提示类...
点击劫持是一种恶意技术，攻击者通过将目标网站嵌入到一个透明或半透明的IFrame中，使用户在不知情的情况下进行操作，从而达到操纵用户行为的目的。`X-Frame-Options`头部的设置可以限制网页被其他站点以IFrame的...
需要注意的是，如果是在同一页面中的frameA跳转到frameB，并不使用`window.opener`或`window.parent`，而是直接操作frame对象。例如，如果frameA中有一个函数需要在frameB中被调用，那么可以直接通过frameB的名称...
6．4．4 对属性进行操作 第3篇 JavaScript高级编程篇 第7章 正则表达式 7．1 正则表达式及其作用 7．2 正则表达式参考语法 7．2．1 限定符 7．2．2 选择匹配符 7．2．3 分组组合和反向引用符 7．2．4 特殊字符 ...
它通常包含一个提示消息和一个可编辑的文本字段。例如： ```javascript var userInput = prompt('请输入你的名字'); console.log(userInput); ``` 3. `confirm()`函数：显示一个带有消息和“确定”与“取消”两...
配图列表 列表 1 说明 1.1 主要的内容 1.2 学习目标 2 了解JavaScript 浏览器上的程序语言 2.1 JavaScript 操作对象的简单介绍-- 属性和方法 2.2 JavaScript 代码的加入 2.2.1 加入...
FLV文件是通过使用H.263或H.264编码的视频流，配合AAC或MP3音频流进行封装的。这种封装方式使得FLV文件能够快速加载并在网络上传输，即使在网络带宽有限的情况下也能实现流畅播放。 FLV流媒体播放器的工作原理主要...
然而，由于同源策略的限制，不同源的Iframe之间无法直接进行JavaScript通信。Layer插件通过巧妙的设计，突破了这一限制，实现了跨Iframe的回调功能，这意味着在一个Iframe中的操作可以影响到另一个Iframe或主页面，...