JS定时器的用法及示例

目录

js 定时器的四个方法

示例一

示例二

示例三

js 定时器的四个方法

  • setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
  • setTimeout() :在指定的毫秒数后调用函数或计算表达式。
  • clearTimeout(timer):取消由setTimeout()设置的定时操作。
  • clearInterval(timer):取消由setInterval()设置的定时操作。

setInterval()与clearInterval(timer)

语法

  1. setInterval(code,millisec,lang)
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
lang 可选。 JScript | VBScript | JavaScript

以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:

  1. <html>
  2. <body>
  3.  
  4. <input type="text" id="clock" />
  5. <script type="text/javascript">
  6. var int=self.setInterval("clock()",1000);
  7. function clock()
  8. {
  9. var d=new Date();
  10. var t=d.toLocaleTimeString();
  11. document.getElementById("clock").value=t;
  12. }
  13. </script>
  14.  
  15. <button onclick="int=window.clearInterval(int)">停止</button>
  16.  
  17. </body>
  18. </html>

setTimeout()与clearTimeout()

语法

  1. setTimeout(code,millisec,lang)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
lang 可选。脚本语言可以是:JScript | VBScript | JavaScript

实例演示如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>菜鸟教程(runoob.com)</title>
  6. </head>
  7. <body>
  8.  
  9. <p>点击按钮,在等待 3 秒后弹出 "Hello"。</p>
  10. <button onclick="myFunction()">点我</button>
  11.  
  12. <script>
  13. function myFunction()
  14. {
  15. setTimeout(function(){alert("Hello")},3000);
  16. }
  17. </script>
  18.  
  19. </body>
  20. </html>

示例一

示例一我们将用定时器做一个鼠标点击定向移动div的demo。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. *{
  8. margin:0;
  9. padding: 0;
  10. }
  11. #box{
  12. position:absolute;
  13. left: 0;
  14. height:100px;
  15. width:100px;
  16. background:#000;
  17. }
  18. #bt{
  19. position: absolute;
  20. top:110px;
  21. }
  22.  
  23. </style>
  24. <script type="text/javascript">
  25. window.onload=function(){
  26. var bt=document.getElementById("bt");
  27. var box=document.getElementById("box");
  28.  
  29. var timer;
  30. bt.onclick=function(){
  31. //关闭上一次定时器
  32. clearInterval(timer);
  33. //开启一个定时器
  34. timer=setInterval(function(){
  35.  
  36. var oldvalue=parseInt(getStyle(box,"left"));
  37. var newvalue=oldvalue+10;
  38. if(newvalue>800)
  39. {
  40. newvalue=800;
  41. }
  42. box.style.left=newvalue+"px";
  43. //当元素到达800关闭定时器
  44. if(newvalue===800)
  45. clearTimeout(timer);
  46.  
  47. },30);
  48.  
  49. };
  50. };
  51.  
  52. function getStyle(obj,name){
  53. if(window.getComputedStyle){
  54. return getComputedStyle(obj,null)[name];
  55. }else{
  56. return obj.currentStyle[name];
  57. }
  58. };
  59. </script>
  60. </head>
  61. <body>
  62. <div id="box">
  63.  
  64. </div>
  65. <button id="bt">开始</button>
  66. </body>
  67. </html>

示例二

示例一我们将用定时器做一个鼠标点击可以左右移动div的demo。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. *{
  8. margin:0;
  9. padding: 0;
  10. }
  11. #box{
  12. position:absolute;
  13. left: 0;
  14. height:100px;
  15. width:100px;
  16. background:#000;
  17. }
  18. #bt{
  19. position: absolute;
  20. top:110px;
  21. }
  22. #bt1{
  23. position:absolute;
  24. top:110px;
  25. left:50px;
  26. }
  27.  
  28. </style>
  29. <script type="text/javascript">
  30. window.onload=function(){
  31. var bt=document.getElementById("bt");
  32. var bt1=document.getElementById("bt1");
  33. var box=document.getElementById("box");
  34. var timer;
  35. bt.onclick=function(){
  36. move(box,10,800);
  37. };
  38. bt1.onclick=function(){
  39. move(box,10,0);
  40. };
  41.  
  42. //动画函数
  43. /*参数
  44. * -1.obj 对象
  45. * -2.speed 速度
  46. * -3.target 执行动画的目标
  47. */
  48.  
  49. function move(obj,speed,target){
  50. clearInterval(timer);
  51. //判断速度的正负值
  52. //如果从0向800移动则为正
  53. //如果从800向0移动则为负
  54. var current=parseInt(getStyle(obj,"left"));
  55. if(current>target){
  56. speed=-speed;
  57. }
  58. //开启一个定时器
  59. timer=setInterval(function(){
  60. //关闭上一次定时器
  61.  
  62. var oldvalue=parseInt(getStyle(obj,"left"));
  63. var newvalue=oldvalue+speed;
  64. if(speed<0&&newvalue<target||speed>0&&newvalue>target)
  65. {
  66. newvalue=target;
  67. }
  68. obj.style.left=newvalue+"px";
  69. //当元素到达target关闭定时器
  70. if(newvalue===target||newvalue===target)
  71. clearTimeout(timer);
  72.  
  73. },30);
  74. };
  75.  
  76. };
  77.  
  78. function getStyle(obj,name){
  79. if(window.getComputedStyle){
  80. return getComputedStyle(obj,null)[name];
  81. }else{
  82. return obj.currentStyle[name];
  83. }
  84. };
  85. </script>
  86. </head>
  87. <body>
  88. <div id="box">
  89.  
  90. </div>
  91. <button id="bt">左移</button>
  92. <button id="bt1">右移</button>
  93. </body>
  94. </html>

示例三

示例三中我们对move函数做了扩展及封装。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style type="text/css">
  7. *{
  8. margin:0;
  9. padding: 0;
  10. }
  11. #box{
  12. position:absolute;
  13. top:30px;
  14. left: 0;
  15. height:100px;
  16. width:100px;
  17. background:#000;
  18. }
  19. #box2{
  20. position:absolute;
  21. top:200px;
  22. left: 0;
  23. height:100px;
  24. width:100px;
  25. background:yellow;
  26. }
  27.  
  28. </style>
  29. <script type="text/javascript" src="js/tools.js"></script>
  30. <script type="text/javascript">
  31. window.onload=function(){
  32. var bt=document.getElementById("bt");
  33. var bt1=document.getElementById("bt1");
  34. var bt2=document.getElementById("bt2");
  35. var bt3=document.getElementById("bt3");
  36. var box=document.getElementById("box");
  37. var box2=document.getElementById("box2");
  38. //var timer;
  39. bt.onclick=function(){
  40. move(box,10,800,"left");
  41. };
  42. bt1.onclick=function(){
  43. move(box,10,0,"left");
  44. };
  45. bt2.onclick=function(){
  46. move(box2,10,800,"left");
  47. };
  48. bt3.onclick=function(){
  49. move(box2,10,800,"width",function(){
  50. move(box2,10,400,"height",function(){
  51. move(box2,10,100,"width",function(){
  52. move(box2,10,100,"height",function(){
  53.  
  54. });
  55. });
  56. });
  57. });
  58. };
  59.  
  60. };
  61.  
  62. </script>
  63. </head>
  64. <body>
  65. <button id="bt">box右移</button>
  66. <button id="bt1">box左移</button>
  67. <button id="bt2">box2右移</button>
  68. <button id="bt3">测试</button>
  69. <div id="box"></div>
  70. <div id="box2"></div>
  71.  
  72. </body>
  73. </html>

tool.js

  1. //动画函数
  2. /*参数
  3. * -1.obj 对象
  4. * -2.speed 速度
  5. * -3.target 执行动画的目标
  6. * -4.arrt 要变化的样式
  7. * -5.callback:回调函数 将会在动画执行完后执行
  8. */
  9.  
  10. function move(obj,speed,target,arrt,callback){
  11. //关闭上一次定时器
  12. clearTimeout(obj.timer);
  13. //判断速度的正负值
  14. //如果从0向800移动则为正
  15. //如果从800向0移动则为负
  16. var current=parseInt(getStyle(obj,arrt));
  17. if(current>target){
  18. speed=-speed;
  19. }
  20. //开启一个定时器
  21. //为obj添加一个timer属性,用来保存它1自己的定时器的标识
  22. obj.timer=setInterval(function(){
  23.  
  24. //获取原来的left值
  25. var oldvalue=parseInt(getStyle(obj,arrt));
  26. //在旧值的基础上增加
  27. var newvalue=oldvalue+speed;
  28. if(speed<0&&newvalue<target||speed>0&&newvalue>target)
  29. {
  30. newvalue=target;
  31. }
  32. obj.style[arrt]=newvalue+"px";
  33. //当元素到达target关闭定时器
  34. if(newvalue===target||newvalue===target){
  35. clearTimeout(obj.timer);
  36. //动画执行完 执行函数
  37. callback&&callback();
  38. }
  39.  
  40. },30);
  41. };
  42.  
  43. function getStyle(obj,name){
  44. if(window.getComputedStyle){
  45. return getComputedStyle(obj,null)[name];
  46. }else{
  47. return obj.currentStyle[name];
  48. }
  49. };

JS定时器的用法及示例的更多相关文章

  1. JS定时器相关用法

    一.定时器在javascript中的作用 1.制作动画 <!DOCTYPE html> <html lang="en"> <head> < ...

  2. jquery.validate.min.js 用法方法示例

    页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  3. JS的简单用法

    JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...

  4. javascript中window与document对象、setInterval与setTimeout定时器的用法与区别

    一.写在前面 本人前端菜鸟一枚,学习前端不久,学习过程中有很多概念.定义在使用时容易混淆,在此给向我一样刚踏入前端之门的童鞋们归纳一下.今天给大家分享一下js中window与document对象.se ...

  5. JS 定时器的4种写法及介绍

    JS提供了一些原生方法来实现延时去执行某一段代码,下面来简单介绍一下setTiemout.setInterval.setImmediate.requestAnimationFrame. 一.什么是定时 ...

  6. js定时器及定时器叠加问题

    回武汉隔离的第二天打卡,武汉加油,逆战必胜!今天想和大家简单聊一下js定时器的问题. 1.setTimeout 延时器 在指定时间后执行一次,注意只会执行一次 当然有的时候我们想用延时器做出定时器的效 ...

  7. js定时器的使用(实例讲解)

    在javascritp中,有两个关于定时器的专用函数,分别为: 1.倒计定时器:timename=setTimeout("function();",delaytime);2.循环定 ...

  8. js事件监听器用法实例详解

    这篇文章主要介绍了js事件监听器用法,以实例形式较为详细的分析了javascript事件监听器使用注意事项与相关技巧,需要的朋友可以参考下本文实例讲述了js事件监听器用法.分享给大家供大家参考.具体分 ...

  9. 移动Web与js定时器暂停或不准确计时的问题解决

    PC 上的 Firefox.Chrome 和 Safari 等浏览器,都会自动把未激活页面中的 JavaScript 定时器(setTimeout.setInterval)间隔最小值改为 1 秒以上: ...

随机推荐

  1. VMware安装CentOS后无法无法识别网卡的解决方法

    请找到安装CentOS虚拟机的安装目录,找到.vmx后缀名的文件,点击鼠标右键选择用记事本打开,在文件的最后一行添加内容:ethernet0.virtualDev = "e1000" ...

  2. [占位符 &nbsp; ]

    在做项目的时候,数据库中的数据会存在空值;这样,我们需要在前台给它加以判断, 如果我们不加以判断也是可行的,我们需要添加一个空白占位符  空白占位符 是个不错的选择,这样我们的页面显示数据的时候就不会 ...

  3. 理解MVC/MVP/MVVM的区别

    转载至[http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html] MVC 所有的通信都是单向的. M(Model)V(View)C(Contro ...

  4. 六十:Flask.Cookie之flask设置cookie的有效域名

    设置cookie有效域名cookie默认只能在主域名下使用,如果要在子域名下使用,则应该给set_cookie设置属性domain='.主域名',此时,此cookie在此主域名下的所有子域名均有效 f ...

  5. C语言:“冒泡排序”与“二分法”

    1.冒泡排序: what:将元素进行两两比较,大的(小的)向后排. when:数组中有多个元素,需要进行比较排序比较的时候使用. how:N个数字来排队,两两比较小靠前.(升序) 外层循环:N-1(控 ...

  6. Linux进程间通信(IPC)之信号量

    [Linux]进程间通信(IPC)之信号量详解与测试用例 2017年03月22日 17:28:50 阅读数:2255 学习环境centos6.5 Linux内核2.6 进程间通信概述 1. 进程通信机 ...

  7. 数据测试003:利用Jmeter推送测试数据(下)

    数据测试003:利用Jmeter推送测试数据(中) 今天继续学习用Jmeter推送数据,这次换Oracle数据 1)安装jdbc驱动,对应自己数据库安装的版本,我的是11g的,安装目录是在Jmeter ...

  8. python-Web-django-富文本编辑器

    views: def gbook(request): '''''' text = request.POST.get('text') soup = BeautifulSoup(text, "h ...

  9. @Value注解

    1.注入 基本字符 public class Student { @Value("qq") private String name; @Value("12") ...

  10. Windows文件共享配置与遇到的问题

    一.Windows 7 访问共享文件权限不足 问题 最近在 Windows 10 上共享了一个文件夹,并创建了一个用户,用于在别人访问该共享文件夹时进行认证,但是在一个同事的电脑(Windows7,当 ...