JS定时器的用法及示例
JS定时器的用法及示例
目录
js 定时器的四个方法
- setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
- clearTimeout(timer)：取消由setTimeout()设置的定时操作。
- clearInterval(timer)：取消由setInterval()设置的定时操作。
setInterval()与clearInterval(timer)
语法
setInterval(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数或要执行的代码串。 |
| millisec | 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。 |
| lang | 可选。 JScript | VBScript | JavaScript |
以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:
<html>
<body> <input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script> <button onclick="int=window.clearInterval(int)">停止</button> </body>
</html>
setTimeout()与clearTimeout（）
语法
setTimeout(code,millisec,lang)
| 参数 | 描述 |
|---|---|
| code | 必需。要调用的函数后要执行的 JavaScript 代码串。 |
| millisec | 必需。在执行代码前需等待的毫秒数。 |
| lang | 可选。脚本语言可以是：JScript | VBScript | JavaScript |
实例演示如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body> <p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button> <script>
function myFunction()
{
setTimeout(function(){alert("Hello")},3000);
}
</script> </body>
</html>
示例一
示例一我们将用定时器做一个鼠标点击定向移动div的demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#box{
position:absolute;
left: 0;
height:100px;
width:100px;
background:#000;
}
#bt{
position: absolute;
top:110px;
} </style>
<script type="text/javascript">
window.onload=function(){
var bt=document.getElementById("bt");
var box=document.getElementById("box"); var timer;
bt.onclick=function(){
//关闭上一次定时器
clearInterval(timer);
//开启一个定时器
timer=setInterval(function(){ var oldvalue=parseInt(getStyle(box,"left"));
var newvalue=oldvalue+10;
if(newvalue>800)
{
newvalue=800;
}
box.style.left=newvalue+"px";
//当元素到达800关闭定时器
if(newvalue===800)
clearTimeout(timer); },30); };
}; function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
};
</script>
</head>
<body>
<div id="box"> </div>
<button id="bt">开始</button>
</body>
</html>
示例二
示例一我们将用定时器做一个鼠标点击可以左右移动div的demo。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#box{
position:absolute;
left: 0;
height:100px;
width:100px;
background:#000;
}
#bt{
position: absolute;
top:110px;
}
#bt1{
position:absolute;
top:110px;
left:50px;
} </style>
<script type="text/javascript">
window.onload=function(){
var bt=document.getElementById("bt");
var bt1=document.getElementById("bt1");
var box=document.getElementById("box");
var timer;
bt.onclick=function(){
move(box,10,800);
};
bt1.onclick=function(){
move(box,10,0);
}; //动画函数
/*参数
* -1.obj 对象
* -2.speed 速度
* -3.target 执行动画的目标
*/ function move(obj,speed,target){
clearInterval(timer);
//判断速度的正负值
//如果从0向800移动则为正
//如果从800向0移动则为负
var current=parseInt(getStyle(obj,"left"));
if(current>target){
speed=-speed;
}
//开启一个定时器
timer=setInterval(function(){
//关闭上一次定时器 var oldvalue=parseInt(getStyle(obj,"left"));
var newvalue=oldvalue+speed;
if(speed<0&&newvalue<target||speed>0&&newvalue>target)
{
newvalue=target;
}
obj.style.left=newvalue+"px";
//当元素到达target关闭定时器
if(newvalue===target||newvalue===target)
clearTimeout(timer); },30);
}; }; function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
};
</script>
</head>
<body>
<div id="box"> </div>
<button id="bt">左移</button>
<button id="bt1">右移</button>
</body>
</html>
示例三
示例三中我们对move函数做了扩展及封装。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
#box{
position:absolute;
top:30px;
left: 0;
height:100px;
width:100px;
background:#000;
}
#box2{
position:absolute;
top:200px;
left: 0;
height:100px;
width:100px;
background:yellow;
} </style>
<script type="text/javascript" src="js/tools.js"></script>
<script type="text/javascript">
window.onload=function(){
var bt=document.getElementById("bt");
var bt1=document.getElementById("bt1");
var bt2=document.getElementById("bt2");
var bt3=document.getElementById("bt3");
var box=document.getElementById("box");
var box2=document.getElementById("box2");
//var timer;
bt.onclick=function(){
move(box,10,800,"left");
};
bt1.onclick=function(){
move(box,10,0,"left");
};
bt2.onclick=function(){
move(box2,10,800,"left");
};
bt3.onclick=function(){
move(box2,10,800,"width",function(){
move(box2,10,400,"height",function(){
move(box2,10,100,"width",function(){
move(box2,10,100,"height",function(){ });
});
});
});
}; }; </script>
</head>
<body>
<button id="bt">box右移</button>
<button id="bt1">box左移</button>
<button id="bt2">box2右移</button>
<button id="bt3">测试</button>
<div id="box"></div>
<div id="box2"></div> </body>
</html>
tool.js
//动画函数
/*参数
* -1.obj 对象
* -2.speed 速度
* -3.target 执行动画的目标
* -4.arrt 要变化的样式
* -5.callback:回调函数 将会在动画执行完后执行
*/ function move(obj,speed,target,arrt,callback){
//关闭上一次定时器
clearTimeout(obj.timer);
//判断速度的正负值
//如果从0向800移动则为正
//如果从800向0移动则为负
var current=parseInt(getStyle(obj,arrt));
if(current>target){
speed=-speed;
}
//开启一个定时器
//为obj添加一个timer属性，用来保存它1自己的定时器的标识
obj.timer=setInterval(function(){ //获取原来的left值
var oldvalue=parseInt(getStyle(obj,arrt));
//在旧值的基础上增加
var newvalue=oldvalue+speed;
if(speed<0&&newvalue<target||speed>0&&newvalue>target)
{
newvalue=target;
}
obj.style[arrt]=newvalue+"px";
//当元素到达target关闭定时器
if(newvalue===target||newvalue===target){
clearTimeout(obj.timer);
//动画执行完 执行函数
callback&&callback();
} },30);
}; function getStyle(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else{
return obj.currentStyle[name];
}
};
JS定时器的用法及示例的更多相关文章
- JS定时器相关用法
一.定时器在javascript中的作用 1.制作动画 <!DOCTYPE html> <html lang="en"> <head> < ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- JS的简单用法
JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...
- javascript中window与document对象、setInterval与setTimeout定时器的用法与区别
一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...
- JS 定时器的4种写法及介绍
JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...
- js定时器及定时器叠加问题
回武汉隔离的第二天打卡,武汉加油,逆战必胜!今天想和大家简单聊一下js定时器的问题. 1.setTimeout 延时器 在指定时间后执行一次,注意只会执行一次 当然有的时候我们想用延时器做出定时器的效 ...
- js定时器的使用(实例讲解)
在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...
- js事件监听器用法实例详解
这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...
- 移动Web与js定时器暂停或不准确计时的问题解决
PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...
随机推荐
- JScript 程序流程控制
Jscript 脚本中的语句一般是按照写的顺序来运行的.这种运行称为顺序运行,是程序流的默认方向. 与顺序运行不同,另一种运行将程序流转换到脚本的另外的部分.也就是,不按顺序运行下一条语句,而是运行另 ...
- 使用 Itext 生成PDF字节数组(文件流不落地)
package com.ulic.gis.customerCenter.controller; import java.io.ByteArrayOutputStream; import java.io ...
- SSD 页、块、垃圾回收
基本操作: 读出.写入.擦除: 因为NAND闪存单元的组织结构限制,单独读写一个闪存单元是不可能的.存储单元被组织起来并有着十分特别的属性.要知道这些属性对于为固态硬盘优化数据结构的过程和理解其行为来 ...
- windows实用cmd命令总结
D: 进入D盘 cd D:\eclipse 进入D盘后进入D盘下的某个路径 Ipconfig 查看计算机ip Cls 清空命令行 ping ip(主机名) 测试网络是否畅通 Help 查看所有的d ...
- 代码实现从键盘接收一个字符串, 程序对其中所有字符进行排序,例如键盘输入: helloitcast程序打印:acehillostt
package com.loaderman.test; import java.util.Comparator; import java.util.Scanner; import java.util. ...
- Collapse 折叠面板
通过折叠面板收纳内容区域 基础用法 可同时展开多个面板,面板之间不影响 <el-collapse v-model="activeNames" @change="ha ...
- python的XML解析
http://www.jb51.net/article/63780.htm http://www.runoob.com/python/python-xml.html http://kb.cnblogs ...
- （转）java8实现对象列表去重
java8实现列表去重,java8的stream和lambda的使用实例 通过普通的方式也可以达到去重的效果,但是借助java8新特性可以很方便的实现列表去重,测试demo如下 实体类: public ...
- LoadRunner书籍推荐
精通软件性能测试与LoadRunner实战 性能技巧查询 软件性能测试过程详解与案例剖析----读 性能测试理论 性能测试进阶指南-------loadrunner 9.1实战 这是一本比loadru ...
- 恒生投资交易系统性O3性能测量
--每秒交易所成交量select b.tps, b.l_business_time from (select count(*) as tps, a.l_business_time from trade ...