这篇文章主要介绍了js的setInterval方法的用法以及示例，非常的有用，这里推荐给小伙伴们。　

　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
　　setinterval()用法

　　setInterval(code,millisec[,"lang"])

　　后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计

　　案例一：滚动条的控制

        <script type="text/javascript">

            var t = setInterval(function(){

                window.scrollBy(0,20);

                console.log(document.body.scrollTop);

                if(document.body.scrollTop || document.documentElement.scrollTop >= 100){

                    clearInterval(t);

                }

            }, 1000);

        </script>

　　案例二：页面显示时间

<html>

    <head>

        <meta charset="UTF-8">

        <title>setInterval案例</title>

    </head>

    <body style="height: 2000px">

        <input type="text" name="clock" id="clock" value="" style="width: 500px;"/>

        <button id="stop" onclick="timer=window.clearInterval(timer)">停止时间函数</button>

        <script type="text/javascript">

            function clock(){

                var t = new Date();

                document.getElementById('clock').value = t;

            }

            var timer = setInterval(clock, 50);

            var stop = document.getElementById('stop');

            stop.onclick = function(){

                clearInterval(timer);

            }

        </script>

    </body>

</html>

　　案例三：

            function show(){

                console.log("每隔一秒我就会显示一次");

            }

            var sh;

            sh=setInterval(show,1000);

            clearInterval(sh);

　　案例四：类似于广告弹窗的效果；

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>setInterval案例</title>

    </head>

    <style type="text/css">

        #content{

            position:relative;

            height: 500px;

            width: 500px;

            background-color: #666;

        }

        #one{

            position: absolute;

            top: 0px;

            left: 0px;

            height: 100px;

            width: 100px;

            background-color: red;

            font-size: 50px;

            line-height: 50px;

            text-align: right;

            color: #fff;

        }

    </style>

    <body>

         <div id="content">

            <div id="one"><div id="close">X</div></div>

        </div>

        <p>距离国庆节还有</p>

        <script>

            var content = document.getElementById('content');

            var one = document.getElementById('one');

            var close = document.getElementById('close');

            var x=0;

            var y=0;

            var xs=10;

            var ys=10;

            function scroll(){

                x += xs;

                y += ys;

                if(x >= content.offsetWidth-one.offsetWidth || x <= 0){

                    xs = -1 * xs;

                }

                if(y >= content.offsetHeight-one.offsetHeight || y<=0){

                    ys = -1 * ys;

                }

                one.style.left = x + 'px';

                one.style.top = y + 'px';

            }

            var dt = setInterval(scroll, 100);

            one.onmouseover = function(){

                clearInterval(dt);

            };

            one.onmouseout = function(){

                dt = setInterval(scroll,100);

            };

            close.onclick = function(){

                one.style.display = 'none';

            }

        </script>

    </body>

</html>

期待！！！

　　

　　

几个例子弄懂JS 的setInterval的运行方式的更多相关文章

  1. 几个例子弄懂JS 的setTimeout的运行方式

                        function test() {   var a = 1;   setTimeout(function() {     alert(a);     a = 5 ...

  2. js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获

    js进阶 12-2 彻底弄懂JS的事件冒泡和事件捕获 一.总结 一句话总结:他们是描述事件触发时序问题的术语.事件捕获指的是从document到触发事件的那个节点,即自上而下的去触发事件.相反的,事件 ...

  3. 彻底弄懂JS的事件冒泡和事件捕获（不推荐阅读）

    由于搬去敌台了,好久没来博客园,今天无意中翻到有“误认子弟”的评论,这里特意做个说明. 本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jquery去展示了利用事件冒泡的例子有误,其 ...

  4. 一文弄懂js的执行上下文与执行上下文栈

    目录 执行上下文与执行上下文栈 变量提升与函数提升 变量提升 函数提升 变量提升与函数提升的优先级 变量提升的一道题目引出var关键字与let关键字各自的特性 执行上下文 全局执行上下文 函数(局部) ...

  5. 彻底弄懂js循环中的闭包问题

    来源:http://www.108js.com/article/article1/10177.html?id=899 第一次接触这个问题还是在我刚开始学js的时候,当时就是一头雾水,时隔一年多了,突然 ...

  6. 摘录和再编：彻底弄懂JS执行机制

    网文: https://juejin.im/post/59e85eebf265da430d571f89 并发模型和事件循环:https://developer.mozilla.org/zh-CN/do ...

  7. 彻底弄懂JS事件委托的概念和作用

    一.写在前头    接到某厂电话问什么是事件代理的时候,一开始说addEventListener,然后他说直接绑定新的元素不会报dom不存在的错误吗?然后我就混乱了,我印象中这个方法是可以绑定新节点的 ...

  8. 彻底弄懂JS原型与继承

    本文由浅到深,循序渐进的将原型与继承的抽象概念形象化,且每个知识点都搭配相应的例子,尽可能的将其通俗化,而且本文最大的优点就是:长(为了更详细嘛). 一.原型 首先,我们先说说原型,但说到原型就得从函 ...

  9. JavaScript中的this详解（彻底弄懂js中的this用法）！

    要想学好js,那么其中那些特别令人混淆迷惑的知识点,就一定要弄清楚.this关键字就是其中让初学者比较迷惑的知识点之一,不过灵活运用this可以提升代码的性能和复用性,那么今天我就和大家一起来了解th ...

随机推荐

  1. [转] Shell编程之数组使用

    #!/bin/bash #基本数组操作a=(1 2 3) ##()表示空数组echo "第0个元素:"${a[0]}echo "所有元素: "${a[@]}ec ...

  2. WPF: Hide grid row

    http://stackoverflow.com/questions/2502178/wpf-hide-grid-row Setting all the Items in the Row to Vis ...

  3. Python_面向对象_类2

    类的几个装饰器方法: @classmethod (类方法):使之无法访问实例变量 class Animal(object): def __init__(self, name): self.name = ...

  4. python --判断列表重复

    一.判断单个列表中的元素是否存在重复 使用set方法去重后,和原list进行对比,如果相等,那么说明原列表无重复,如果存在重复,说明列表存在重复 def is_repect_all(L): repea ...

  5. 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢？

    假设你正在爬楼梯.需要 n 阶你才能到达楼顶. 每次你可以爬 1 或 2 个台阶.你有多少种不同的方法可以爬到楼顶呢? 注意:给定 n 是一个正整数. 示例 1: 输入: 2 输出: 2 解释: 有两 ...

  6. 066 基于checkpoint的HA机制实现

    1.说明 针对需要恢复的应用场景,提供了HA的的机制 内部实现原理:基于checkpoint的 当程序被kill的时候,下次恢复的时候,会从checkpoint对用的文件中进行数据的恢复 2.HA原理 ...

  7. 002 如何在一台PC上装两个版本的python

    在之前学习爬虫的时候,使用的是python2.7,现在主流已经是3.7了. 在这里,写了一下如何在2.7的基础上安装python3.6 一:检查python版本 1.cmd 二:安装python3 1 ...

  8. win10系统桌面快捷键图标异常解决方法

    win10系统桌面快捷键图标异常解决方法 前言: 有一次我的一个图标变成白色,找到:https://jingyan.baidu.com/article/948f5924148e67d80ef5f947 ...

  9. 【python】数据库

    No1: [SQLite] 插入 # 导入SQLite驱动: >>> import sqlite3 # 连接到SQLite数据库 # 数据库文件是test.db # 如果文件不存在, ...

  10. VBA调用DOS程序两种方法

    Set wsh = VBA.CreateObject("WScript.Shell") 'wsh.Run strExePath & " g", vbHi ...