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. 关于sql server远程访问Oracle数据库 OpenQuery查询返回多条数据的问题

    在Sql Server远程访问Oracle 中的数据库表时: 远程语法通常为: select * from OpenQuery(Oracle链接服务器名称,‘查询语句’) eg: select * f ...

  2. 19. Palindrome Partitioning && Palindrome Partitioning II （回文分割）

    Palindrome Partitioning Given a string s, partition s such that every substring of the partition is ...

  3. 47. Largest Rectangle in Histogram && Maximal Rectangle

    Largest Rectangle in Histogram Given n non-negative integers representing the histogram's bar height ...

  4. Change the Windows 7 Taskbar Thumbnail and List Mode

    Manually in Registry Editor 1. Open the Start Menu, then type regedit in the search boxand press Ent ...

  5. 解决GBK字符转UTF-8乱码问题

    通过以下方法将GBK字符转成UTF-8编码格式的byte[]数组 package test; import java.io.UnsupportedEncodingException; public c ...

  6. 记一个PowerShell的方法调用 --ResolveWindowsPrincipal

    没时间系统的学习PowerShell, 只能现学现用. 这段函数调用花了我半个多小时才搞定. 呵呵. 您别笑我, 呵呵. 在这里个例子里, 包括了PowerShell里如下的一些要点: 静态函数的调用 ...

  7. Tomcat从内存、并发、缓存方面优化方法

    Tomcat有很多方面,从内存.并发.缓存四个方面介绍优化方法.   一.Tomcat内存优化 Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 cata ...

  8. Java IO流体系中常用的流分类

    Java输入/输出流体系中常用的流分类(表内容来自java疯狂讲义) 注:下表中带下划线的是抽象类,不能创建对象.粗体部分是节点流,其他就是常用的处理流. 流分类 使用分类 字节输入流 字节输出流 字 ...

  9. ARCGIS对谷歌影像进行投影转换

    相信有不少同学会有这样的困扰,通过软件下载的谷歌遥感影像,直接用ARCGIS等专业软件打开之后发现,遥感影像有拉伸的情况,这是什么原因呢.那是因为,通过软件下载下来的遥感影像的投影信息包含的是经纬度信 ...

  10. Java反射得到属性的值和设置属性的值（转）

    package com.whbs.bean; public class UserBean { private Integer id; private int age; private String n ...