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 秒以上: ...
随机推荐
- VI快捷键速记
enjoy :P
- AXIS 1.4 自定义序列化/反序列化类
axis1.4的CalendarDeserializer 使用的时区是GMT,导致日期显示不准确 private static SimpleDateFormat zulu = new SimpleDa ...
- 整型，长整型，无符号整型等 大端和小端（Big endian and Little endian）
一.大端和小端的问题 对于整型.长整型.无符号整型等数据类型,Big endian 认为第一个字节是最高位字节(按照从低地址到高地址的顺序存放数据的高位字节到低位字节):而 Little endian ...
- Docker，用任何工具链和任何语言来构建任何应用
在看过Docker的两个Hello World的程序后,我们对Docker有了一个大概的感性的认识,那么Docker是到底是什么呢?Docker是一个面向开发者和系统管理员编译,装载,和运行分布式应用 ...
- 5、kubernetes资源清单定义入门
使用配置清单创建资源 定义pod时使用yaml格式 master ~]# kubectl get pod NAME READY STATUS RESTARTS AGE client / Error 1 ...
- Qt QLabel添加cliked事件
#ifndef MYLABEL_H #define MYLABEL_H #include <QObject> #include <QLabel> class MyLabel : ...
- Vue组件中的data属性
Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...
- 修改linux内核启动顺序
修改linux内核启动顺序 # 修改内核启动顺序x86_64 centos:cat /boot/grub2/grub.cfg |grep "menuentry" grub2-set ...
- Linux C\C++基础——数组形参的使用
1.数组形参 ]) void fun(int a[]) void fun(int *a) ],int n) void fun(char*p[],int n) void fun(char**p,int ...
- Cobalt Strike DLL用于永恒之蓝注入
PDF下载:blob:https://www.52stu.org/9afe109c-f95f-4cb3-a180-90d469a1d001 我们在对存在MS17010的漏洞主机进行DLL注入的时候,一 ...