定时器在JS中的作用：

1）制作动画、时钟、倒计时

2）异步操作

3）函数缓冲与节流

定时器类型：

1）setTimeout 只执行一次的定时器

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

3）setInterval 反复执行的定时器

4）clearInterval 关闭反复执行的定时器

demo：

1）setTimeout(自制弹窗)

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .pop_con{

            /*暂时隐藏*/

            display: none;

        }

        .pop{

            width: 300px;

            height:200px;

            background-color: #fff;

            border:1px solid #000;

            /*使框居中*/

            position: fixed;

            left:50%;

            top:50%;

            margin-left:-150px;

            margin-top: -100px;

            /*让弹窗覆盖在mask上面*/

            z-index:9999;

        }

        .mask{

            position: fixed;

            width:100%;

            height: 100%;

            background-color: #000;

            left:0;

            top:0;

            /*设置透明度*/

            opacity:0.3;

            /*ie兼容的透明度*/

            filter:alpha(opacity=0.3);

            /*让弹窗覆盖在mask上面*/

            z-index:9990;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

            var oPop = document.getElementById('pop');

            <!--设置定时器-->

            setTimeout(showpop,2000);

            function showpop() {

               oPop.style.display = 'block';

            }

        }

    </script>

</head>

<body>

    <h1>首页标题</h1>

    <p>页面内容</p>

    <!--自制弹框-->

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

        <div class="pop">

            <h3>提示信息！</h3>

        </div>

        <div class="mask"></div>

    </div>

</body>

</html>

2）setInterval

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        .box{

            width:100px;

            height:100px;

            background-color: gold;

            position: fixed;

            left:20px;

            top:20px;

        }

    </style>

    <script type="text/javascript">

        window.onload = function () {

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

            var left = 20;

            var timer = setInterval(function () {

                left+=2;

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

                //按照一定条件关闭定时器

                if(left>700){

                    clearInterval(timer);

                }

            },30)

        }

    </script>

</head>

<body>

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

</body>

</html>

3）定时器制作时钟

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <script type="text/javascript">

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            function timego() {

                //实例化一个对象Date

                var now = new Date();

                var year = now.getFullYear();

                //这里要注意，这里得到的月份是0~11月，所以要+1

                var month = now.getMonth()+1;

                var date = now.getDate();

                //星期：星期天是一个礼拜的第一天，week=0

                var week = now.getDay();

                var hour = now.getHours();

                var minute = now.getMinutes();

                var second = now.getSeconds();

                //标签里面的内容：innerHTML

                oDiv.innerHTML = '当前时间：'+year+'年'+month+'月'+date+'日'+

                    ' '+toweek(week)+" "+tudou(hour) +':'+ tudou(minute)+":"+ tudou(second);

            }

            //一秒钟刷新一次，但是这样的话，页面的第一秒中是没有内容的，所以加一个timego（）

            timego();

            setInterval(timego,1000);

        }

        //将数字返回成汉字

        function toweek(num){

            switch(num){

                case 0:

                    return '星期天';

                case 1:

                    return '星期一';

                case 2:

                    return '星期二';

                case 3:

                    return '星期三';

                case 4:

                    return '星期四';

                case 5:

                    return '星期五';

                case 6:

                    return '星期六';

            }

        }

        function tudou(num) {

            if(num<10){

                return '0'+ num;

            }

            else{

                return num;

            }

        }

    </script>

</head>

<body>

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

</body>

</html>

4）定时器制作倒计时

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <script type="text/javascript">

        window.onload = function () {

            var oDiv = document.getElementById('div1');

            //真实的时间是要从服务器获取的，不能从客户端获取

            function tiimeleft(){

                var now = new Date();

                var future = new Date(2018,5,19,15,21,0);

                //ms转为s

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

                var days = parseInt(lefts/86400);

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

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

                var seconds = parseInt(lefts%60);

                //这是一个有底线的倒计时

                if(lefts<=0){

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

                }

                oDiv.innerHTML = '距离2018年6月22日24时还有'+days+'天'+tudou(hours)+'时'

                +tudou(minutes)+'分'+tudou(seconds)+'秒';

            }

            tiimeleft();

            setInterval(tiimeleft,1000);

        };

        // 将数字返回成汉字

        function tudou(num) {

            if(num<10){

                return '0'+ num;

            }

            else{

                return num;

            }

        }

    </script>

</head>

<body>

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

</body>

</html>

JS——定时器的更多相关文章

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

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

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

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

  3. js定时器 特定时间执行某段程序的例子

    定时器想必大家并不陌生吧,在本文为大家详细介绍下js中是如何实现定时器的,具体原理及代码如下. 例子: $(function(){ var handler = function(){ //www.jb ...

  4. js定时器setInterval()与setTimeout()

    js定时器setInterval()与setTimeout() 1.setTimeout(Expression,DelayTime),在DelayTime过后,将执行一次Expression,setT ...

  5. C#-WebForm JS定时器

    JS定时器: 1.window.setTimeout(function(){},3000) 延迟3秒执行 2.window.setInterval(function(){},3000) 也叫重复器,每 ...

  6. Vue清除所有JS定时器

    Vue清除所有JS定时器 在webpack + vue 的项目中如何在页面跳转的时候清除所有的定时器 JS定时器会有一个返回值(数字),通过这个返回值我们可以找到这个定时器 在vue项目中可以使用路由 ...

  7. js定时器关闭，js定时器停止，一次关闭所有正在运行的定时器，自定义函数clearIntervals()一次关闭所有正在运行的定时器

    js定时器关闭,一次关闭所有正在运行的定时器,自定义函数clearIntervals()一次关闭所有正在运行的定时器,原理:利用数组存储定时器id,然后遍历数组,关闭定时器 附上页面的截图,代码在截图 ...

  8. JS定时器做物体运动

    JS定时器是函数 setInterval(函数体/函数名  , 时间) 清楚定时器 clearInterval(函数) 时间单位(毫秒) 1000毫秒  = 1秒 首先我们要知道用JS定时器能干什么? ...

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

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

  10. js定时器 离开当前页面任然执行的问题

    今天在博客上看到有人问 js定时器-----离开当前页面原本匀速运动的div加速了,回到页面若干时间恢复匀速??? 他是js定时器控制一个盒子做旋转动画 离开页面后js还在执行 但是盒子这个dom却被 ...

随机推荐

  1. 编译Python出现Tab，空格的问题

    我们编译python代码时, 经常出现各种因为tab和空格的问题, 例如: IndentationError: unindent does not match any outer indentatio ...

  2. Linux负载均衡软件之LVS

    一. LVS简介 LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起的自由软件项目,它的官方站点是linuxvirtualserver.org ...

  3. SpringBoot系列（1）

    简介:用来简化新Spring应用的初始搭建以及开发过程:该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置. 特点:1. 创建独立的Spring应用程序2. 嵌入的Tomcat, ...

  4. shell入门-特殊符号

    特殊符号:* 说明:通配符,多个字符.所有后缀为”.txt“的文件列出来 [root@wangshaojun 111]# ls *.txt11.txt 1.txt 22.txt 2.txt 33.tx ...

  5. 伪分布模式 hive查询

    [root@node1 ~]# lscpu Architecture: x86_64 CPU op-mode(s): 32-bit, 64-bit Byte Order: Little Endian ...

  6. JDBC操作MySQL(crud)

    这两天复习了一下JDBC操作MySQL,把crud操作的例子记一下, 类库链接(mysql-connector-java-5.1.37-bin.jar):http://files.cnblogs.co ...

  7. C++中栈结构建立和操作

    什么是栈结构 栈结构是从数据的运算来分类的,也就是说栈结构具有特殊的运算规则,即:后进先出. 我们可以把栈理解成一个大仓库,放在仓库门口(栈顶)的货物会优先被取出,然后再取出里面的货物. 而从数据的逻 ...

  8. [原创]SQL 把表中某一个列按照逗号拼接成一行

    在我们开发的过程中,难免遇到一种场景,把某个表中的的某个列的值拼接成用逗号隔开的一行数据 如图:我们把UserId列拼接成一行数据 -------> 为此我写了一个存储过程来解决此类问题. -- ...

  9. python笔记——均值、方差、中位数计算

    from __future__ import print_function # 均值计算 data = [3.53, 3.47, 3.51, 3.72, 3.43] average = float(s ...

  10. Dijkstra 路径规划 C#

    示例无向图如下:(起始点为v0) 邻接矩阵为: 注意:其中没有连接的边和自己到自己的点权值用10000表示. 代码: static void Main(string[] args) { , , , , ...