javascript实现延时显示提示框特效代码
作者:hebedich 发布时间:2024-04-25 13:10:50
标签:javascript,延时显示,提示框
本文实例讲述了JavaScript使用setTimeout实现延迟弹出警告框的方法。分享给大家供大家参考。具体如下:
先给大家展示一个延迟/定时/强制弹出窗口的JS代码
参数解释:
设置时间:Then.setTime(Then.getTime() + 1*60*60*1000)
mylove/ttan.htm(过渡网页)
ttan.htm中的 http://弹出网页/ 是要弹出的网页
scroll:1(滚动条)
status:1(状态栏)
help:1(帮助按钮)
toolbar=1(工具栏)
resizable:1(是否可以用鼠标拖动改变大小)
dialogWidth:800px(宽度)
dialogHeight:600px(高度)
3000(延迟弹出的时间,单位:毫秒。1秒=1000毫秒)
<!--弹出广告-->
<script language="JavaScript">
function Get(){
var Then = new Date()
Then.setTime(Then.getTime() + 1*60*60*1000)
var cookieString = new String(document.cookie)
var cookieHeader = "Cookie1="
var beginPosition = cookieString.indexOf(cookieHeader)
if (beginPosition != -1){
} else
{ document.cookie = "Cookie1=POPWIN;expires="+ Then.toGMTString()
focusid=setTimeout("focus();window.showModelessDialog('ttan.htm','','scroll:0;status:0;help:0;resizable:0;d
ialogWidth:0px;dialogHeight:0px')",3000)
window.focus();
}
}Get();
</script>
<!--弹出结束-->
ttan.htm的内容:
<script language="javascript">
<!--
window.open("http://弹出网页/");
//-->
</script>
<script LANGUAGE="JavaScript">
<!--
setTimeout('window.close();', 0)
//-->
</script>
可以实现同一IP一定时间内只弹出一次,可以实现延迟弹出,可以实现强制弹出!!
下面的代码执行后点击按钮会延迟弹出一个警告框,主要演示了setTimeout的使用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>延时显示提示框</title>
<style>
#div1 {
float: left;
width: 60px;
height: 60px;
background-color: aqua;
}
#div2 {
position: relative;
float: left;
margin: 0 10px;
width: 200px;
height: 200px;
background-color: #cccccc;
display: none;
}
</style>
<script>
window.onload = function () {
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
// oDiv1.onmouseover = function () {
// clearTimeout(timer);
// oDiv2.style.display = 'block'; //鼠标移入div1时显示div2
// };
//
// oDiv1.onmouseout = function () {
// timer = setTimeout(function () {
// oDiv2.style.display = 'none'; //鼠标移除div1时隐藏div2
// }, 500); //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
// };
//
// oDiv2.onmouseover = function () {
// clearTimeout(timer); //清除延时器设置,当鼠标移入div2时,div2应当显示
// };
//
// oDiv2.onmouseout = function () {
// timer = setTimeout(function () {
// oDiv2.style.display = 'none'; //当鼠标移出div2时,div2应当隐藏
// }, 500); //当鼠标移出div2并移入div1时,div2会闪烁一下再显示,设置一个延时,清除闪烁的效果;
// // 但是设置延时器之后,鼠标移入div1时,div2却隐藏了,原因是setTimeout,
// // 应当清除延时器,在oDiv1.onmouseover事件中添加,清除延时器的代码
// };
// 由于这四个事件中代码两两对应地相同或相似,可以做如下简化处理:
oDiv1.onmouseover = oDiv2.onmouseover = function () {
clearTimeout(timer);
oDiv2.style.display = 'block';
/* 鼠标移入div1时显示div2,虽然oDiv2.onmouseover事件中没有写oDiv2.style.display = 'block';
但是实际上oDiv2是'block'状态,多写一句代码没有实质性影响*/
};
oDiv1.onmouseout = oDiv2.onmouseout = function () {
timer = setTimeout(function () {
oDiv2.style.display = 'none'; //鼠标移除div1时隐藏div2
}, 500); //为了从div1移入div2,所以移出div1时div2隐藏应该有一个延时设置
};
// 简化后的代码执行结果跟前面的代码效果完全一致.
}
</script>
</head>
<body>
<h2>延时提示框</h2>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
延时提示框编写时需要注意的点都记录在注释当中,逐个对照注意一下,这个功能看过视频教程之后实现起来比较顺畅,原因是在编写代码之前对所需功能做了一个列表按照列表一一实现,出现问题再进行相应的调整比上来直接写代码强多了。
0
投稿
猜你喜欢
- 前言环境搭建可查看Python人脸识别微笑检测数据集可在https://inc.ucsd.edu/mplab/wordpress/index
- 在同一个 Apache 实例中运行多个 Django 程序是完全可能的。 当你是一个独立的 Web 开发人员并有多个不同的客户时,你可能会想
- 实现效果图如下:当我点击 + 按钮时,会添加一行输入框组;当点击 - 按钮时,会删除这一行输入框组html代码如下:<div clas
- 前言:前面提到了Python中的数值型内置数据类型,接下来呢我们就着重介绍一下字符串类型。在Python中字符串是一个有序的字符集合,没有独
- 实现思路和详细解读1. 获取 Fashion 数据、处理数据(1)本次实践项目用到的是 Fashion 数据集,包含 10 个类别的服饰灰度
- 公司后端服务使用 java 重构后,很多接口采用了阿里的 dubbo 协议。而 python 是无法直接调用 dubbo 接口的,但可以通过
- 回表在研究mysql二级索引的时候,发现Mysql回表这个操作,往下研究了一下字面意思,找到索引,回到表中找数据解释一下就是:先通过索引扫描
- 1.查询当前数据库所有表SELECT O.object_id AS TableId, &nb
- 简述在大多数此类教程中都会不遗余力的介绍如何使用数据库。今天我们对数据库暂且不表,而是来关注另一个在web应用中很重要的特性:如
- [项目]数据库中users表,包含u_name,u_pwd两个字段,其中u_name存在重复项,现在要实现把重复的项删除![分析]1、生成一
- ASP里两种常用的生成文件的方式是:利用ADODB.Stream生成文件和利用Scripting.FileSystemObject生成文件1
- 字符串就是一个话题中心。给字符串编号在很多很多情况下,我们都要对字符串中的每个字符进行操作(具体看后面的内容),要准确进行操作,必须做的一个
- 介绍NumPy是Python中用于数值计算的核心包之一,它提供了大量的高效数组操作函数和数学函数。它支持多维数组和矩阵运算,并且可以集成C/
- 事务日志文件Transaction Log File是用来记录数据库更新情况的文件,扩展名为ldf。在 SQL Server 7.0 和 S
- 需求:给定一个dataframe和一个list,list中存放的是dataframe中某一列的元素,删除dataframe中与list元素重
- Python 提供了多个图形开发界面的库,几个常用 Python GUI 库如下:Tkinter: Tkinter 模块(Tk 接口)是 P
- 阅读前:Pro Javascript Techniques翻译连载说明和目录JavaScript的演化是渐进而稳固的。历经过去十年的进程,J
- tf.app.flags命令行参数解析模块说道命令行参数解析,就不得不提到 python 的 argparse 模块,详情可参考我之前的一篇
- 我们使用pycharm的时候,有时遇到了不认识的方法习惯于将鼠标悬停在方法上查看方法介绍。那么如何设置呢?下面小编给大家分享一下。首先假如我
- $str = '中华人民共和国123456789abcdefg'; echo preg_match("/^[\u4