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 秒以上: ...
随机推荐
- VMware安装CentOS后无法无法识别网卡的解决方法
请找到安装CentOS虚拟机的安装目录,找到.vmx后缀名的文件,点击鼠标右键选择用记事本打开,在文件的最后一行添加内容:ethernet0.virtualDev = "e1000" ...
- [占位符 ]
在做项目的时候,数据库中的数据会存在空值;这样,我们需要在前台给它加以判断, 如果我们不加以判断也是可行的,我们需要添加一个空白占位符 空白占位符 是个不错的选择,这样我们的页面显示数据的时候就不会 ...
- 理解MVC/MVP/MVVM的区别
转载至[http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html] MVC 所有的通信都是单向的. M(Model)V(View)C(Contro ...
- 六十:Flask.Cookie之flask设置cookie的有效域名
设置cookie有效域名cookie默认只能在主域名下使用,如果要在子域名下使用,则应该给set_cookie设置属性domain='.主域名',此时,此cookie在此主域名下的所有子域名均有效 f ...
- C语言:“冒泡排序”与“二分法”
1.冒泡排序: what:将元素进行两两比较,大的(小的)向后排. when:数组中有多个元素,需要进行比较排序比较的时候使用. how:N个数字来排队,两两比较小靠前.(升序) 外层循环:N-1(控 ...
- Linux进程间通信(IPC)之信号量
[Linux]进程间通信(IPC)之信号量详解与测试用例 2017年03月22日 17:28:50 阅读数:2255 学习环境centos6.5 Linux内核2.6 进程间通信概述 1. 进程通信机 ...
- 数据测试003:利用Jmeter推送测试数据(下)
数据测试003:利用Jmeter推送测试数据(中) 今天继续学习用Jmeter推送数据,这次换Oracle数据 1)安装jdbc驱动,对应自己数据库安装的版本,我的是11g的,安装目录是在Jmeter ...
- python-Web-django-富文本编辑器
views: def gbook(request): '''''' text = request.POST.get('text') soup = BeautifulSoup(text, "h ...
- @Value注解
1.注入 基本字符 public class Student { @Value("qq") private String name; @Value("12") ...
- Windows文件共享配置与遇到的问题
一.Windows 7 访问共享文件权限不足 问题 最近在 Windows 10 上共享了一个文件夹,并创建了一个用户,用于在别人访问该共享文件夹时进行认证,但是在一个同事的电脑(Windows7,当 ...