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 秒以上: ...
随机推荐
- 按下home键，重新打开，应用重启
其实不是重启,只是重新打开了luncher的那个activity.只要通过判断把它finish,就会显示按下home键前的页面. 解决方法: 在重启的页面中加入一下代码,注意加在setContentV ...
- LC 660. Remove 9 【lock, hard】
Start from integer 1, remove any integer that contains 9 such as 9, 19, 29... So now, you will have ...
- redis5.0编译安装
##################### linux下运行redis 1.下载源码 https://redis.io/ 2.将源码上传到服务器中,进行编译安装 a)可以使用rz进行上传(sz是将服务 ...
- DEDECMS 漏洞汇总
日期:2019-08-08 10:20:28 更新: 作者:Bay0net 介绍: 0x01.组合拳拿 shell 漏洞版本:v5.5 - v5.7 前台任意用户密码重置 首先注册一个账户,账户名为 ...
- 内存或磁盘空间不足,word无法显示所请求的字体
从百度哪里获得了解决方法,应该是字体没有添加到C盘的fonts目录下面,记录一下解决办法. 在电脑上打开Windows PowerShell ,以管理员身份运行.(可能有的同志不知道怎么以管理员的方式 ...
- 【D3D12学习手记】4.1.6 Resources and Descriptors
在渲染过程中,GPU将写资源(resources)(例如,后缓冲区,深度/模板缓冲区),读资源(例如,描述表面外观的纹理,存储场景中几何体3D位置的缓冲区).在我们发出绘图命令之前,我们需要将资源绑定 ...
- HDWIKI6.0后台任意文件删除/下载
- java按某属性分组并计算相关属性的和。
工作中在处理集合的时候会经常遇到需要分组然后计算某属性的和,在java8中,通过stream来操作集合,还是非常方便的,像过滤(filter).分组(group).获取单个属性的值,总而言之,简单方便 ...
- nginx反向代理集群配置
#user nobody;worker_processes 1; #error_log logs/error.log;#error_log logs/error.log notice;#error_l ...
- typedef 定义结构体数组或其他数组
typedef 定义结构体数组或其他数组 C\C++语言下 typedef其实是对一个变量类型的名字进行重新定义,例如下面中: typedef struct { int num[10]; char n ...