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 秒以上: ...
随机推荐
- idea将springboot打包成jar或者war
1.首先在pom.xml中添加下面配置 <groupId>com.melo</groupId> <artifactId>focus</artifactId&g ...
- C# lock 为什么要设置成只读
首先给出MSDN的定义: lock 关键字可以用来确保代码块完成运行,而不会被其他线程中断.这是通过在代码块运行期间为给定对象获取互斥锁来实现的. 先来看看执行过程,代码示例如下: 假设线程A先执行, ...
- jsonp 原理 并模拟实现一个简单的jsonp
jsonp产生的背景 1.从原网站向目标网站(服务端)发送ajax请的时候,由于浏览器的安全策略(这两个网站只要域名,端口,协议 有一个不同就不允许请求访问)导致跨域,从而请求无法正常进行. 2.We ...
- Linux Openssh源码升级
telnet服务 yum install -y telnet-server xinetd systemctl start xinetd systemctl start telnet.socket #监 ...
- 【MyEclipse优化】-----如何合理设置MyEclipse中的validation选项
打开eclipse,点击[window]菜单,选择[preferences]选项. 在左侧点击[validation]选项,在右侧可以看到eclipse进行的自动检查都有哪些内容. 将Manual(手 ...
- Python爬虫学习==>第八章：Requests库详解
学习目的: request库比urllib库使用更加简洁,且更方便. 正式步骤 Step1:什么是requests requests是用Python语言编写,基于urllib,采用Apache2 Li ...
- vue中封装swipe组件
<template> <!-- TODO swipe --> <div id="hy-swiper"> <div class=" ...
- Asp.NetCore应用--部署到 ubuntu 进行托管
准备过程 netcore linux发布包(本人是通过vs2017发布) ubuntu 16.0.4虚机 进行托管 ubuntu netcore发布文件路径 服务器设置为将对 http://< ...
- Flume下载安装
下载 可以apache官网下载flume的安装包 下载时注意,flume具有两个版本,0.9.x和1.x,两个版本并不兼容,我们用最新的1.x版本,也叫flume-ng版本. 安装 解压到指定目录即可 ...
- 前端开发工具包 WijmoJS 2019V1正式发布：全新的在线 Demo 系统，助您快速上手，开发无忧
前端开发工具包WijmoJS在2019年的第一个主要版本2019V1已经发布,本次发布包括了更加易用的在线Demo系统.各控件新增功能.NPM 包的改动,以及全新的浏览器API组件. WijmoJ ...