一、定时器在javascript中的作用

1、制作动画

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>用定时器制作动画</title>

     <style>

         .box{

             width:100px;

             height:100px;

             background: #ffb8f9;

             position: fixed;

             left:20px;

             top:20px;

         }

     </style>

     <script>

         window.onload = function(){

             var left=20;

             var oBox = document.getElementById('box');

             var timer = setInterval(function(){

                 if(left>700){

                     clearInterval(timer);

                 }

                 left++;

                 oBox.style.left = left+'px';

             },30);

         }

     </script>

 </head>

 <body>

     <div class="box" id="box"></div>

 </body>

 </html>

2、异步操作

3、函数缓冲与节流

二、定时器的类型与语法

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

语法：setTimeout(函数名code，延迟时间time)；

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

　　　　　  time:指定毫秒数

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

　　　　setTimeout(function(){

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

　　　　},3000);

实例：弹框，效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定时器弹框</title>

    <link rel="stylesheet" href="../css/reset.css">

    <style>

        .pop_con{

            position: fixed;

            top:0;

            left:0;

            bottom:0;

            right:0;

            background: rgba(0,0,0,0.3);

            z-index: 999;

            display: none;

        }

        .pop{

            width:380px;

            height:180px;

            border:1px solid #ccc;

            position:fixed;

            left:50%;

            top:50%;

            margin-top:-150px;

            margin-left:-250px;

            padding:10px;

            border-radius: 15px;

            box-shadow: 1px 1px 20px 1px #333;

            background:#fff;

            z-index: 9999;

            overflow: auto;

            animation: popTip 0.3s;

        }

        .pop_title{

            display: flex;

            justify-content: space-between;

        }

        .pop_title a{

            width:30px;

            height:30px;

            background:#E26359;

            border-radius: 15px;

            color:#fff;

            text-align: center;

            line-height: 30px;

            transition: all 1s ease;

        }

        .pop_title a:hover{

            transform:rotate(360deg);

            cursor: pointer;

        }

        .pop_message{

            height:100px;

            text-align: center;

            line-height: 100px;

        }

        .pop_confirm{

            text-align: center;

        }

        .pop_confirm button{

            width:100px;

            border:0;

            background: #E26359;

            color:#fff;

            padding:10px 0;

            border-radius: 15px;

            cursor: pointer;

            outline: none;

        }

        @keyframes popTip {

            0%{

                width:100px;

                height:20px;

            }

            100%{

                width:380px;

                height:180px;

            }

        }

    </style>

    <script>

        window.onload = function(){

            var oPop = document.getElementById("pop_con");

            var oMessage = document.getElementById("message");

            var oConfirm = document.getElementById("confirm");

            var oPopout = document.getElementById("popOut");

            function myPop(){

                oPop.style.display = "block";

                oMessage.innerHTML = "请输入数字";

                oConfirm.onclick = function(){

                    oPop.style.display = "none";

                };

                oPopout.onclick = function(){

                    oPop.style.display = "none";

                };

            }

            setTimeout(myPop,3000);

        }

    </script>

</head>

<body>

<h3>弹框信息</h3>

<div class="pop_con" id="pop_con">

    <div class="pop" id="pop">

        <div class="pop_title">

            <p>提示信息</p>

            <a id="popOut">X</a>

        </div>

        <div class="pop_message">

            <p class="message" id="message">输入框不能为空</p>

        </div>

        <div class="pop_confirm">

            <button id="confirm">朕知道了</button>

        </div>

    </div>

</div>

</body>

</html>

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

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

　　   

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

语法:setInterval(code,time);

参数说明:

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

　　　　time是指定的毫秒数

实例：倒计时，效果图如下：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>定时器倒计时</title>

     <script>

         window.onload = function(){

            var oBox = document.getElementById('box');

             function timeleft(){

                 var now = new Date();

                 //实际开发中，now和future都要从服务器获取，否则的话用户修改系统时间会出现bug

                 var future = new Date(2017,6,17,14,0,0);

                 //把毫秒/1000转换为秒

                 var lefts = parseInt((future-now)/1000);

                 var days = parseInt(lefts/86400);

                 var hour =parseInt((lefts%86400)/3600);

                 var min = parseInt(lefts%86400%3600/60);

                 var sec = lefts%60>9?lefts%60:"0"+lefts%60;

                 str = '距离2017年7月17日下午2点还剩下'+days+'天'+hour+'时'+min+'分'+sec+'秒';

                 if(lefts<0){

                     window.location.href="http://www.baidu.com";

                 }

                 oBox.innerHTML = str;

             }

             timeleft();

             setInterval(timeleft,1000);

         }

     </script>

 </head>

 <body>

     <div class="box" id="box"></div>

 </body>

 </html>

倒计时代码

实例：动态时钟，效果图如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定时器时钟</title>

    <script>

        window.onload = function(){

            var oBox = document.getElementById("box");

            function timego(){

                var today = new Date();

                var year = today.getFullYear();

                var month = today.getMonth()+1;

                var day = today.getDate();

                var week = today.getDay();

                var hour = today.getHours();

                var minutes = today.getMinutes()>9?today.getMinutes():"0"+today.getMinutes();

                var seconds = today.getSeconds()>9?today.getSeconds():"0"+today.getSeconds();

                //var HMS = today.toLocaleTimeString();返回结果为：上午11:50:08

                str = "当前时间是:"+year+"年"+month+"月"+day+"日"+" "+toweek(week)+" "+hour+":"+minutes+":"+seconds;

                oBox.innerHTML = str;

            }

            timego();

            setInterval(timego,1000);

            function toweek(n){

                switch(n){

                    case 0:

                        return "星期天";

                    break;

                    case 1:

                        return "星期一";

                    break;

                    case 2:

                        return "星期二";

                        break;

                    case 3:

                        return "星期三";

                        break;

                    case 4:

                        return "星期四";

                        break;

                    case 5:

                        return "星期五";

                        break;

                    case 6:

                        return "星期六";

                        break;

                }

            }

        }

    </script>

</head>

<body>

    <div id="box"></div>

</body>

</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 MapReduce开发最佳实践（上篇）

    前言 本文是Hadoop最佳实践系列第二篇,上一篇为<Hadoop管理员的十个最佳实践>. MapRuduce开发对于大多数程序员都会觉得略显复杂,运行一个WordCount(Hadoop ...

  2. Angular的第一个helloworld

    在安装了node,npm,angular-cli,vscode之后,我们来创建一个angular的应用 创建第一个hello world 使用的IDE工具为vscode 打开vscode,打开一个命令 ...

  3. （二）this、call和apply

    在javascript中,this关键字总让一些初学者迷惑,Function.prototype.call, Function.prototype.apply这两个方法广泛的运用.我们有必要理解这几个 ...

  4. Java基础教程(21)--泛型

    一.为什么使用泛型   泛型意味着编写的代码可以被很多不同类型的对象所重用.例如,我们不希望为存放String和Integer对象的集合设计不同的类.现在的ArrayList类可以存放任何类型的对象, ...

  5. HTML列表（组标签）+div（布局标签）与span

    一.列表 HTML中常见的列表有三种,分别是: 1.无序列表,是一组描述列表语义的组标签,列表中每个项之间没有先后顺序:如图: 1)组标签:组标签就是由多个标签组成的一个整体,它们之间共同存在:例如 ...

  6. Myeclipse安装与破解

    安装包+破解包 链接:https://pan.baidu.com/s/1G4mYsTOMDixyr2UmdqqY5A 提取码:a2n8 红色框框内的是安装包,蓝色框框内的是破解包 安装过程中比较简单, ...

  7. Android开发之旅5：应用程序基础及组件

    引言 上篇Android开发之旅:应用程序基础及组件介绍了应用程序的基础知识及Android的四个组件,本篇将介绍如何激活组关闭组件等.本文的主题如下: 1.激活组件:意图(Intents) 1.1. ...

  8. yii 修改模块使用的布局文件

    方法一:yii模块默认使用系统当前的主题布局文件,如果在主配置文件中配置了主题比如: 'theme'=>'mythm', 那么yii的模块就使用 protected/themes/mythm/v ...

  9. php初学记

    开始和结束标记 常用两种:<?php ?>,<script language="php"></script> 短标记:<? ?>,需 ...

  10. 浅谈 JavaScript 中常用数据及其类型转换

    在 JavaScript 中有一些 value 会经常碰到: [] (空数组).{} (空对象).'' (空字符串).undefined.null.0.NaN.Infinite 也会经常碰到数据类型转 ...