p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #060606 }
span.s8 { color: #929151 }
span.s9 { color: #ad42ef }
span.s10 { color: #698906 }
span.s11 { color: #4a8a01 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #e48b00 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#div1 {

height: 100px;

width: 100px;

background-color: red;

}

#div2 {

height: 300px;

width: 300px;

background-color: gray;

display: none;

}

div {

margin: 10px;

float: left;

}

</style>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>

<script type="text/javascript">

//当鼠标移出div1的时候，提示框不立刻消失，延时消失

//当鼠标移入提示框时候，提示框始终保持显示状态，

//当鼠标移出提示框时候，提示框延时消失

var sDiv = document.getElementById("div1");

var bDiv = document.getElementById("div2");

var timer = null;

// sDiv.onmouseover=function(){

// clearTimeout(timer);

// bDiv.style.display="block";

// }

// sDiv.onmouseout=function(){

// timer=setTimeout(function(){

// bDiv.style.display="none";

// },3000);

//

//

// }

// bDiv.onmouseover=function(){

// clearTimeout(timer);

// }

// bDiv.onmouseout=function(){

// timer=setTimeout(function(){

// bDiv.style.display="none";

// },3000)

// }

//函数合并,上面是未合并之前的详细代码

div1.onmouseover = div2.onmouseover = function() {

clearTimeout(timer);

div2.style.display = "block";

}

div1.onmouseout = div2.onmouseout = function() {

timer = setTimeout(function() {

div2.style.display = "none";

}, 3000)

}

</script>

</html>

JS延时提示框的更多相关文章

  1. 延时提示框制作思路[简单javascript案例]

    模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...

  2. Highchar.js插件提示框千分位显示为空格而不是逗号 --（2018 08/06-08/12周总结）

    1.Oracle在已经存在主键的表中插入复合主键的SQL语句 如已有一个表test_key,其中a1列为主键. CREATE TABLE TEST_KEY( A1 VARCHAR2(3) NOT NU ...

  3. js中提示框闪退问题

    当页面存在刷新  或  在线引用iframe框架时(引用框架也会导致刷新) 会导致页面加载时的弹出框闪退 解决方法:设置弹出框在页面或者框架完全加载一段时间后再弹出 <script type=& ...

  4. JS定时器的使用--延时提示框

    <title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...

  5. js消息提示框插件-----toastr用法

     (本文系转载) 因为个人项目中有一个提交表单成功弹出框的需求,从网上找了一些资料,发现toastr这个插件的样式还是不错的.所以也给大家推荐下,但是网上的使用资料不是很详细,所以整理了一下,希望能给 ...

  6. 原生wcPop.js消息提示框(移动端)、内含仿微信弹窗效果

    wcPop.js移动端消息对话框插件是之前的wxPop.js的升级版,优化了js和css,并且新增了仿微信弹窗效果, 是一款含有多种情景模式的原生模态消息对话框代码,可用于替代浏览器默认的alert弹 ...

  7. 用setTimeout模拟QQ延时提示框

    很简单的代码,不多解释,一看就懂. <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...

  8. JavaScript实现延时提示框

    <html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...

  9. JS鼠标提示框效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Haproxy+asp.net +RedisSessionStateProvider 完美实现负载均衡，并且session保持

    .net framework 4.5下测试成功,使用RedisSessionStateProvider 2.2.1保持session数据,通过Haproxy保持会话数据.首先在PM下安装RedisSe ...

  2. 制作HP MicroServer Gen8可用的ESXi 5.x SD/TF卡启动盘

    前些日子看到HP公司和京东在搞服务器促销活动,于是就入了一个 ProLiant MicroServer Gen8 的低配版 相比上一代产品,新一代 MicroServer系列微型服务器可更换处理器,还 ...

  3. .net实现调用本地exe等应用程序的办法总结

    根据客户需求用户要实现在一个BS系统上打开本地的一应用程序,在网上查了好多资料再加上自己的各种测试,到最后功能是实现了,只不过还存在一些问题,接下来会先把各种方法一一列举出来 1.先写最终测试通过的这 ...

  4. Python之路【第十五篇】：Web框架

    Python之路[第十五篇]:Web框架   Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 1 2 3 4 5 6 ...

  5. Myeclipse解决dubbo标签不识别问题

    Myeclipse解决dubbo标签不识别问题,引入dubbo.xsd文件,即可:              

  6. form表单中的常用控件

    <form action="#" method="post"> placeholder:输入表单是提供一个提示 <input type=&qu ...

  7. Redis 的Lua Script脚本功能

    从 Redis 2.6.0 版本开始,通过内置的 Lua 解释器,可以使用 EVAL 命令对 Lua 脚本进行求值 Redis2.6内置的Lua Script支持,可以在Redis的Server端一次 ...

  8. htmL5 html5Validate

    http://www.zhangxinxu.com/wordpress/2012/12/jquery-html5validate-html5-form-validate-plugin/

  9. MySql生日闰月处理

    1. 科普下润年: ①.非整百年能被4整除的为闰年.(如2004年就是闰年,2100年不是闰年) ②.整百年能被400整除的是闰年.(如2000年是闰年,1900年不是闰年)   2. 例: 例如:当 ...

  10. java.util.Date和java.sql.Date的区别和相互转化(转)

    java.util.Date是在除了SQL语句的情况下面使用的.java.sql.Date是针对SQL语句使用的,它只包含日期而没有时间部分它们都有getTime方法返回毫秒数,自然就可以直接构建.  ...