JavaScript实现延时提示框
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
#div1 {
width: 50px;
height: 50px;
background: red;
margin: 10px;
display: block;
}
#div2 {
width: 300px;
height: 300px;
background: #868282;
display: none;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<script>
var odiv1=document.getElementById('div1');
var odiv2=document.getElementById('div2');
var timer=null;
odiv1.onmouseover=odiv2.onmouseover=function()
{
clearTimeout(timer); /*当鼠标移到div2时关闭定时器*/
odiv2.style.display='block';
}
odiv1.onmouseout=odiv2.onmouseout=function()
{
timer=setTimeout(
function()
{
odiv2.style.display='none';
},1000); /*1秒后再消失*/
}
</script>
</body>
</html>
JavaScript实现延时提示框的更多相关文章
- 延时提示框制作思路[简单javascript案例]
模拟QQ软件中的弹出提示框功能,制作一个简易的延时提示框. 功能实现: 1.当鼠标移入指定区块时,弹出隐藏的区块:当鼠标移出指定区块时,弹出的隐藏区块再次隐藏. 2.同时要求在鼠标移入该弹出区块后,区 ...
- JS延时提示框
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- JS定时器的使用--延时提示框
<title>无标题文档</title> <style> div{float:left;margin:10px;} #div1{width:50px; height ...
- jQuery警告/确认/提示弹出对话框效果（替换传统JavaScript下的提示框）
http://www.51xuediannao.com/js/jquery/jquery_tsk/ http://www.jq22.com/demo/jqueryConfirm20160413/
- javascript中简单提示框
CSS部分 .help-tip{ width: 340px; border:1px solid #A0A0A0; background-color: #F8F8F8; border-radius: 5 ...
- 用setTimeout模拟QQ延时提示框
很简单的代码,不多解释,一看就懂. <!DOCTYPE html> <html> <head> <meta http-equiv="Content- ...
- JS学习笔记 -- 定时器，提示框的应用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- for循环执行时在，每执行一次for循环中弹出提示框，延时问题
在需求中,ajax的返回值,根据数组内容的长度去做循环,每循环一次弹出提示框,发现for循环的执行速度非常之快,想到了延时,但是在for循环中延时并不能解决这个问题. 查到setTimeout的递归处 ...
- JavaScript 消息框,警告框,确认框,提示框
1.警告框 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: alert("文本") 2.确认框 确认框用于使用户可以验证或 ...
随机推荐
- Redis 之set集合结构及命令详解
注:集合的元素具有唯一性,无序性 1.sadd key value1 value2 添加一个集合 2.smembers key 获取一个集合的所有值 3.srem key valu ...
- vue货币格式化组件、局部过滤功能以及全局过滤功能
一.在这里介绍一个vue的时间格式化插件: moment 使用方法: .npm install moment --save. 2 定义时间格式化全局过滤器 在main.js中 导入组件 import ...
- 基于 react-navigation 父子组件的跳转链接
1.在一个页面中中引入一个组件,但是这个组件是一个小组件,例如是一个cell,单独的每个cell都是需要点击有链接跳转的,这个时候通常直接使用 onPress 的跳转就会不起作用 正确的处理方法是,在 ...
- BZOJ 3036: 绿豆蛙的归宿 期望 + 拓扑排序
随着新版百度空间的下线,Blog宠物绿豆蛙完成了它的使命,去寻找它新的归宿.给出一个有向无环的连通图,起点为1终点为N,每条边都有一个长度.绿豆蛙从起点出发,走向终点. 到达每一个顶点时,如果有K条离 ...
- 【转载】VMware完全卸载
出现安装时出现vmwareworkstationxxx.msi failed问题是官方解决方案...真心详细. http://kb.vmware.com/selfservice/microsites/ ...
- C#第十五节课
函数复习 using System;using System.Collections.Generic;using System.Linq;using System.Text;using System. ...
- 【JavaScript框架封装】自己动手封装一个涵盖JQuery基本功能的框架及核心源码分享（单文件版本）
整个封装过程及阅读JQuery源码的过程基本上持续了一个月吧,最终实现了一个大概30%的JQuery功能的框架版本,但是里面涉及的知识点也是非常多的,总共的代码加上相关的注释大概在3000行左右吧,但 ...
- sass使用中出现的问题
问题一:ruby按照官方文档安装后更换gem源时,报错Error fetching https://gems.ruby-china.org/: bad response Not Found 404 ( ...
- nginx下部署showdoc
1. 安装nginx服务器sudo apt-get install nginx -y 2. 启动服务sudo service nginx start 3. 安装php环境 sudo apt-get i ...
- form提交表单中包含time类型数据
当数据库和实体类中含有date类型的数据时 ,form提交的时间数据只是string类型的,所以不能直接写入到java实体类和数据库,经过百度找到了解决方法 ,特地挪过来: 在controller中增 ...