一、定时器在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. wpf中应该使用c#四种定时器中的DispatcherTimer

    c#中有四种定时器 1:System.Threading.Timer 使用: private System.Threading.Timer timerClose; timerClose = new S ...

  2. 为什么java需要序列化对象

    序列化是一种用来处理对象流的机制 所谓对象流:就是将对象的内容进行流化,可以对流化后的对象进行读写操作,也可将流化后的对象传输与网络之间 序列化是为了解决在对象流进行读写操作时所引发的问题 序列化的实 ...

  3. Spring-全局异常拦截

    Spring MVC那一篇里提到了异常拦截来做参数校验返回,那里是对特定的 controller 做异常捕捉,但是我们也可以选择全局拦截处理 快速开始 @ResponseBody @Controlle ...

  4. ASP.NET MVC 简单事务添加

    ASP.NET MVC 简单事务 //实例化查询上下文 using ( BookStoreEntities db = new BookStoreEntities()) { //找到需要价格和名称的数据 ...

  5. Firbe Channel光纤信道

    简介 中文名:网状信道 外文名:Fibre Channel 简    称:FC 光纤信道是一种高速网络技术标准(T11),主要应用于SAN(存储局域网).其拓扑结构分为三种,点到点.仲裁循环.交换结构 ...

  6. JavaScript之Array

    JavaScript是一门非常灵活的动态语言,涵盖的内容也挺多,<JavaScript高级程序设计>看了也有两遍,但是在实际开发的时候,还是有很多东西记不清,然后还得去翻书,特别是一些Ar ...

  7. js判断移动端页面按home键切换到桌面事件

    ---恢复内容开始--- 原理就是通过页面标签切换事件(visibilitychange)来判断,亦可用户移动端桌面和app切换. 先看代码: var hiddenProperty = 'hidden ...

  8. js移动终端浏览器版本

    //当要在不同移动终端浏览器中运行不同的代码时,需要对各个终端浏览器进行判断 //判断浏览器 var browser = { versions: function () { var u = navig ...

  9. libevent2笔记（linux、windows、android的编译）

    0. 前言 我使用的版本是libevent-2.0.21-stable.高级的应用还是得看官网文档http://www.wangafu.net/~nickm/libevent-2.0/doxygen/ ...

  10. Eclipse工程 导入 Android Studio

    最近Eclipse好多项目转Android Studio 百度翻看好多文章 这篇不错 特纪录下 地址:http://www.cnblogs.com/bluestorm/p/3757402.html 一 ...