一、定时器在javascript中的作用

1、制作动画

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>用定时器制作动画</title>
  6. <style>
  7. .box{
  8. width:100px;
  9. height:100px;
  10. background: #ffb8f9;
  11. position: fixed;
  12. left:20px;
  13. top:20px;
  14. }
  15. </style>
  16. <script>
  17. window.onload = function(){
  18. var left=20;
  19. var oBox = document.getElementById('box');
  20. var timer = setInterval(function(){
  21. if(left>700){
  22. clearInterval(timer);
  23. }
  24. left++;
  25. oBox.style.left = left+'px';
  26. },30);
  27. }
  28.  
  29. </script>
  30. </head>
  31. <body>
  32. <div class="box" id="box"></div>
  33. </body>
  34. </html>

2、异步操作

3、函数缓冲与节流

二、定时器的类型与语法

1、setTimeout只执行一次的定时器,指定的毫秒数后执行指定的代码

语法:setTimeout(函数名code,延迟时间time);

参数说明:code:指定毫秒数后要执行的函数或js代码

       time:指定毫秒数

实例:3秒后页面跳转到百度首页

    setTimeout(function(){

      location.href = "https://www.baidu.com";

    },3000);

实例:弹框,效果图如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>定时器弹框</title>
  6. <link rel="stylesheet" href="../css/reset.css">
  7. <style>
  8. .pop_con{
  9. position: fixed;
  10. top:0;
  11. left:0;
  12. bottom:0;
  13. right:0;
  14. background: rgba(0,0,0,0.3);
  15. z-index: 999;
  16. display: none;
  17. }
  18. .pop{
  19. width:380px;
  20. height:180px;
  21. border:1px solid #ccc;
  22. position:fixed;
  23. left:50%;
  24. top:50%;
  25. margin-top:-150px;
  26. margin-left:-250px;
  27. padding:10px;
  28. border-radius: 15px;
  29. box-shadow: 1px 1px 20px 1px #333;
  30. background:#fff;
  31. z-index: 9999;
  32. overflow: auto;
  33. animation: popTip 0.3s;
  34. }
  35. .pop_title{
  36. display: flex;
  37. justify-content: space-between;
  38. }
  39. .pop_title a{
  40. width:30px;
  41. height:30px;
  42. background:#E26359;
  43. border-radius: 15px;
  44. color:#fff;
  45. text-align: center;
  46. line-height: 30px;
  47. transition: all 1s ease;
  48. }
  49. .pop_title a:hover{
  50. transform:rotate(360deg);
  51. cursor: pointer;
  52. }
  53. .pop_message{
  54. height:100px;
  55. text-align: center;
  56. line-height: 100px;
  57. }
  58. .pop_confirm{
  59. text-align: center;
  60. }
  61. .pop_confirm button{
  62. width:100px;
  63. border:0;
  64. background: #E26359;
  65. color:#fff;
  66. padding:10px 0;
  67. border-radius: 15px;
  68. cursor: pointer;
  69. outline: none;
  70. }
  71. @keyframes popTip {
  72. 0%{
  73. width:100px;
  74. height:20px;
  75. }
  76. 100%{
  77. width:380px;
  78. height:180px;
  79. }
  80. }
  81. </style>
  82. <script>
  83. window.onload = function(){
  84. var oPop = document.getElementById("pop_con");
  85. var oMessage = document.getElementById("message");
  86. var oConfirm = document.getElementById("confirm");
  87. var oPopout = document.getElementById("popOut");
  88. function myPop(){
  89. oPop.style.display = "block";
  90. oMessage.innerHTML = "请输入数字";
  91. oConfirm.onclick = function(){
  92. oPop.style.display = "none";
  93. };
  94. oPopout.onclick = function(){
  95. oPop.style.display = "none";
  96. };
  97. }
  98. setTimeout(myPop,3000);
  99. }
  100. </script>
  101. </head>
  102. <body>
  103. <h3>弹框信息</h3>
  104. <div class="pop_con" id="pop_con">
  105. <div class="pop" id="pop">
  106. <div class="pop_title">
  107. <p>提示信息</p>
  108. <a id="popOut">X</a>
  109. </div>
  110. <div class="pop_message">
  111. <p class="message" id="message">输入框不能为空</p>
  112. </div>
  113. <div class="pop_confirm">
  114. <button id="confirm">朕知道了</button>
  115. </div>
  116. </div>
  117. </div>
  118.  
  119. </body>
  120. </html>

2、clearTimeout关闭只执行一次的定时器

要使用 clearTimeout() 方法, 在创建超时方法时必须使用全局变量:

     

3、setInterval反复执行的定时器(每隔指定的毫秒数不停地执行指定的代码)

语法:setInterval(code,time);

参数说明:

    code为每隔指定的毫秒数要执行的函数或js代码

    time是指定的毫秒数

实例:倒计时,效果图如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>定时器倒计时</title>
  6. <script>
  7. window.onload = function(){
  8. var oBox = document.getElementById('box');
  9. function timeleft(){
  10. var now = new Date();
  11. //实际开发中,now和future都要从服务器获取,否则的话用户修改系统时间会出现bug
  12. var future = new Date(2017,6,17,14,0,0);
  13. //把毫秒/1000转换为秒
  14. var lefts = parseInt((future-now)/1000);
  15. var days = parseInt(lefts/86400);
  16. var hour =parseInt((lefts%86400)/3600);
  17. var min = parseInt(lefts%86400%3600/60);
  18. var sec = lefts%60>9?lefts%60:"0"+lefts%60;
  19. str = '距离2017年7月17日下午2点还剩下'+days+'天'+hour+'时'+min+'分'+sec+'秒';
  20. if(lefts<0){
  21. window.location.href="http://www.baidu.com";
  22. }
  23. oBox.innerHTML = str;
  24. }
  25. timeleft();
  26. setInterval(timeleft,1000);
  27. }
  28.  
  29. </script>
  30. </head>
  31. <body>
  32. <div class="box" id="box"></div>
  33. </body>
  34. </html>

倒计时代码

实例:动态时钟,效果图如下:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>定时器时钟</title>
  6. <script>
  7. window.onload = function(){
  8. var oBox = document.getElementById("box");
  9. function timego(){
  10. var today = new Date();
  11. var year = today.getFullYear();
  12. var month = today.getMonth()+1;
  13. var day = today.getDate();
  14. var week = today.getDay();
  15. var hour = today.getHours();
  16. var minutes = today.getMinutes()>9?today.getMinutes():"0"+today.getMinutes();
  17. var seconds = today.getSeconds()>9?today.getSeconds():"0"+today.getSeconds();
  18. //var HMS = today.toLocaleTimeString();返回结果为:上午11:50:08
  19. str = "当前时间是:"+year+"年"+month+"月"+day+"日"+" "+toweek(week)+" "+hour+":"+minutes+":"+seconds;
  20. oBox.innerHTML = str;
  21. }
  22. timego();
  23. setInterval(timego,1000);
  24. function toweek(n){
  25. switch(n){
  26. case 0:
  27. return "星期天";
  28. break;
  29. case 1:
  30. return "星期一";
  31. break;
  32. case 2:
  33. return "星期二";
  34. break;
  35. case 3:
  36. return "星期三";
  37. break;
  38. case 4:
  39. return "星期四";
  40. break;
  41. case 5:
  42. return "星期五";
  43. break;
  44. case 6:
  45. return "星期六";
  46. break;
  47. }
  48. }
  49. }
  50.  
  51. </script>
  52. </head>
  53. <body>
  54. <div id="box"></div>
  55. </body>
  56. </html>

4、clearInterval关闭反复执行的定时器,停止 setInterval() 方法执行的函数代码

要使用 clearInterval() 方法, 在创建计时方法时必须使用全局变量:

  

     

三、setInterval()和setTimeout的区别

前者会不停的循环执行,而后者只会执行一次

四、日期时间写法

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

  1. JS定时器的用法及示例

    JS定时器的用法及示例 目录 js 定时器的四个方法 示例一 示例二 示例三 js 定时器的四个方法 setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式.方法会不停地调用函 ...

  2. Js相关用法个人总结

    Js相关用法个人总结  js中将数组元素添加到对象中var obj = {}; var pushArr = [11,22,33,44,55,66]; for(var i=0;i<pushArr. ...

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

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

  4. JS的简单用法

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

  5. JS定时器和单线程异步特性

    首先要说的是,定时器相关的方法都是属于BOM方法,而定时器呢,它是用于在设定的时间执行一段代码,或者在给定的时间间隔内重复该代码.具体函数: setTimeout(callback, delay);/ ...

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

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

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

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

  8. JS定时器不可靠的原因及解决方案

    前言 在工作中应用定时器的场景非常多,但你会发现有时候定时器好像并没有按照我们的预期去执行,比如我们常遇到的setTimeout(()=>{},0)它有时候并不是按我们预期的立马就执行.想要知道 ...

  9. slf4j log4j logback关系详解和相关用法

    slf4j log4j logback关系详解和相关用法 写java也有一段时间了,一直都有用slf4j log4j输出日志的习惯.但是始终都是抱着"拿来主义"的态度,复制粘贴下配 ...

随机推荐

  1. [转] Hadoop管理员的十个最佳实践

    前言 接触Hadoop有两年的时间了,期间遇到很多的问题,既有经典的NameNode和JobTracker内存溢出故障,也有HDFS存储小文件问题,既有任务调度问题,也有MapReduce性能问题.遇 ...

  2. 【JavaScript 从零开始】表达式和运算符(1)

    原始表达式 最简单的表达式是"原始表达式"(primary expression).JavaScript中的原始表达式包含常量或直接量.关键字和变量. // 常量或直接量 1.23 ...

  3. 防止TableView 上的tap手势隔断 cell的选择

    遵循UIGestureRecognizerDelegate协议: 1.0添加手势   - (void)addTapGest {    UITapGestureRecognizer *tap = [[U ...

  4. VisualVM监控远程阿里云主机

    一.前言 使用VisualVM监控远程主机,主要是要在远程主机上部署JMX服务和jstat服务,jstat服务的部署花了我半天的时间,而且,网上的资基本都是缺胳膊少腿的,没有一篇是一个整体(行得通的) ...

  5. 概述Java集合框架

    JAVA集合框架主要分为三个部分:接口,实现和算法.接口是指以Collection和Map为起始的一系列公用接口,其中还有Vector接口,也就是迭代器,Collection接口下面又有List 和S ...

  6. java实现返回一个字符串所有排列

    今天偶然看到了一个笔试题,觉得挺有意思,分享一下解题思路 public void permute(String string); public void permute(char[] chars , ...

  7. 通过UA判断,对滚动条样式进行不同的操作

    浏览器滚动条的默认样式比较丑,有些情况下,又不能直接overflow:hidden掉. 本文阐述如何通过 document.styleSheets[0].insertRule 简单的实现pc端和移动端 ...

  8. 使用镶嵌数据集 MosaicDataSet管理不同分辨率影像数据

    镶嵌数据集 MosaicDataSet是Esri推出的一种用于管理海量影像数据的数据模型,它是Geodatabase数据模型的一个子集定义. 该数据模型强大之处在于它能统一管理不同采集时间.不同采集来 ...

  9. csv注入漏洞原理&&实战

    前言  为了找工作,巩固巩固知识.本文会介绍 csv 注入漏洞的原理,最后给出一个示例.  正文 在 csv 文件 和 xlsx 文件中的每一项的值如果是 =, @, +, - 就会被 excel 识 ...

  10. Jmeter 测试 JMS (Java Message Service)/ActiveMQ 性能

    前言 JMS介绍:JMS即Java消息服务(Java Message Service)应用程序接口,是一个Java平台中关于面向消息中间件(MOM)的API,用于在两个应用程序之间,或分布式系统中发送 ...