20150706 js之定时器
对应智能社:09 定时器的使用
开启定时器:
setInterval(xxx(),1000);//间隔型 第一个参数为函数,第二个为时间,单位为毫秒
setTimeout(xxx(),1000);//延时型
停止定时器:
clearInterval(timer);//参数为setInterval()函数的返回值,返回值实际上是一个number
clearTimeout(timer);//参数为setTimeout()函数的返回值,返回值实际上是一个number
setInterval(a,1000);
其中参数一为一个函数名,第二个为一个数值,单位为毫秒。
function a(){
console.log('wyl');
} setInterval(a,1000)
setInterval 的会一直执行,简直停不下来。
与之对应的是setTimeout则只执行一次。这就是二者的区别。
附上自己写的数码时钟:
<html>
<HEAD>
<meta charset="utf-8">
<title> 数码时钟</title>
<script type="text/javascript">
window.onload = function(){
xx();//一加载就立刻执行
setInterval(xx,1000); };
function xx(){
var date = new Date();
var hours = to_doub(date.getHours());
var min = to_doub(date.getMinutes());
var sec = to_doub(date.getSeconds());
var str = ''+hours+min+sec;
var img = document.getElementsByTagName('img');
var len = img.length; for(var i=0;i<len;i++){
img[i].src = "img/"+str[i]+".png";
}
} // 比如时间为 01 23 43 秒,01时要显示为01而不能显示为1,
function to_doub(n){
if(n<10){
return '0'+n;
}
else{
return ''+n;
}
}
</script>
</HEAD>
<body style="background:grey; ">
<img src="img/0.png">
<img src="img/2.png">
<img src="img/4.png">
<img src="img/5.png">
<img src="img/4.png">
<img src="img/1.png">
</body>
</html>
x效果图如下:
另一个例子:
代码:
<!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>
<style>
div {float:left; margin:20px}
#div1 {width:50px; height:50px; background:red;}
#div2 {width:100px; height:100px; background:#0CF; display:none}
</style>
<script>
window.onload = function(){
var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var timer = null;
oDiv1.onmouseover = function(){
oDiv2.style.display = "block";//显示 }
oDiv1.onmouseout = function(){
timer = setTimeout(function(){
oDiv2.style.display = "none";//隐藏
},500);
}
oDiv2.onmouseover = function(){
clearTimeout(timer);
oDiv2.style.display = "block"; //显示
}
oDiv2.onmouseout = function(){
oDiv2.style.display = 'none';
}
}
</script>
</head> <body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
效果图如下:
20150706 js之定时器的更多相关文章
- js延时定时器
// 获取图片方向延时器 getImageOrientationTimer(context) { if (context.imageTimeout) return; if (context.image ...
- 【JavaScript基础】Js的定时器(你想看的原理也在哟)
[JavaScript基础]Js的定时器(你想看的原理也在哟) 博客说明 文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢! 说明 本章是经历 ...
- JS实现定时器
导出:jquery.timers-1.2.js jQuery Timers提供了三个函式 1. everyTime(时间间隔, [定时器名称], 函式名称, [次数限制], [等待函式程序完成])2. ...
- js 关于定时器的知识点。
Js的同步和异步 同步:代码从上到下执行. 异步:每个模块执行自己的,同时执行. js本身就是同步的,但是需要记住四个地方是异步. Js的异步 1.定时器 2.ajax 3事件的绑定 4. ...
- 关于js中定时器的返回值问题
在js中,我们常常会用到定时器来处理各种各样的问题,当我们需要清除定时器的时候,我们常常会定义一个值来接受定时器的返回值,然后再把定义好的这个值写到清除定时器的括弧后面,如: var times = ...
- js 面向对象 定时器 046
获取DOM对象补充 document.getElementsByTagName('div'); //获取的多个DOM对象 这种对象叫伪数组 如果想遍历此对象 通过for(var i=0; i < ...
- 【笔记】js 关于定时器的理解
总所周知 js 里面的 setTimeout() 方法是用来设定某些功能在某段时间间隔之后执行的.但是今天看了高程对定时器的描述发现并不是这样. setTimeout(function(){ //.c ...
- js之定时器
一.通过定时器我们可以间隔设定时间重复调用某个函数,利用这个特性,我们可以做很多事,例如,12306上的每间隔5秒查询自动查询一次余票,简单动画的实现等等 二.定时器的格式: 定时器有两种格式,分别是 ...
- js清除定时器注意点
如何这篇文章所述:https://www.cnblogs.com/mmykdbc/p/7418575.html js多次调用创建定时器的函数,会使定时器速度越来越快,多次调用定时器的使用场景比如:监听 ...
随机推荐
- ThinkPHP第十三天(CONF_PATH、APP_PATH,UEditor用法)
1.CONF_PATH 项目配置文件目录地址,APP_PATH 项目地址 2.ThinkPHP中更新数据的连接操作位save(),更新一个字段可以用setField(name,value)方法. 3. ...
- ftpclient卡死问题
ftpclient在调用retrieveFileStream(String remote)之后,返回inputstream,如果不想关闭ftp,继续读取其他文件. 一定要先关闭inputstream, ...
- 字符串匹配算法1-KMP
前面介绍过,字符串搜索一般来说有三种方式,前缀搜索,后缀搜索,子串搜索.KMP使用的是前缀搜索. 假设p的偏移是i,也就是窗口的位置是i,匹配到位置j+1时发现了不匹配.现在的问题是向前移动窗口到什么 ...
- Linux下安装VNC Server
操作系统centos6.5,在其之上安装vnc server,可利用windows上的vnc client远程登录. 1. 安装 yum install tigervnc-server.x86_64 ...
- boost::string or boost::regex
有时候写代码时会遇到下面问题 如果有一个文本文件,其包括内容类似于C语言,当中有一行例如以下格式的语句: layout (local_size_x = a,local_size_y = b, loca ...
- 利用copy函数简单快速输出/保存vector向量容器中的数据
如果要输出vector中的数据我们可以通过循环语句输出,更加简便的方法是利用copy函数直接输出,例子: #include "stdafx.h" #include <iost ...
- HDU4099(斐波那契数列与字典树)
题目:Revenge of Fibonacci 题意:给出斐波那契数列的前k位,k不超过40,找出最小的正整数n,满足F(n)的前k位与给定数的前k位相同,斐波那契数列的项数不超过100000. 解析 ...
- 【前端】一句命令快速合并压缩 JS、CSS
引用自:一句命令快速合并 JS.CSS 在项目开发环境下,我们会把 JS 代码尽可能模块化,方便管理和修改,这就避免不了会出现一个项目自身 JS 文件数量达到10个或者更多. 而项目上线后,会要求将所 ...
- java集群
java集群 分类: java学习2011-05-12 09:12 7531人阅读 评论(9) 收藏 举报 java服务器负载均衡ejb集群数据库 序言 越来越多的关键应用运行在J2EE(Java 2 ...
- 升级到iis7 的web.config配置
经典模式或集成模式都识别system.webServers节点 aspnet的isapi分32位和64位 不存在时会报404或403