这篇文章主要介绍了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. java运算符-算数、赋值、比较

    1.算术运算符 运算符是用来计算数据的符号.数据可以是常量,也可以是变量.被运算符操作的数我们称为操作数. 运算符 运算规则 范例 结果 + 正号 +3 3 + 加 2+3 5 + 连接字符串 “中” ...

  2. loadrunner场景报错:Error: CCI compilation error -/tmp/brr_5d65oV/netdir/E/\320\324/Action.c (318): undeclared identifier `LAST'解决思路

    在windows下写的脚本编译通过 但是拿到linux agent场景执行中就会提示如下,同样的脚本在windows agent下没有任何问题 agent连的是linux负载机 通过脚本一行一行排查, ...

  3. lvs - mask标记

    将两个服务绑定在一个集群服务中 如何将两种请求绑定在一个集群中通过一个director来调度, 这里需要iptable工具配合实现.首先在prerouting链上做一个标记,通过标记来调度 起两个服务 ...

  4. Python学习(十六)—— 数据库

    一.数据库介绍 数据库(Database,DB)是按照数据结构来组织.存储和管理数据的,并且是建立在计算机存储设备上的仓库. 数据库指的是以一定方式存储在一起.能为多个用户共享.具有尽可能小的冗余度. ...

  5. linq 将datatable分组求和在转datatable

    DataTable dt = new DataTable(); dt.Columns.Add("CustomerID"); dt.Columns.Add("aa" ...

  6. 谁说java里面有返回值的方法必须要有返回值,不然会报错????

    慢慢的总是发现以前的学得时候有些老师讲的不对的地方! 所以还是尽量别把一些东西说的那么绝对,不然总是很容易误导别人,特别是一些你自己根本就没有试过的东西,然后又斩钉截铁的告诉别人,这样不行,肯定不行什 ...

  7. lamp源码安装

    先从Apache开始装->MySQL->PHP PHP在编译的时候需要用到MySQL的一些参数,需要用到Apache的参数. 准备工作: 1.查看系统中是否有自带的Apache 如果提示你 ...

  8. python专题 --- 递归

    如果一个函数在函数内部调用自身本身,这个函数就是递归函数 举例如阶乘函数,其数学递归定义如下: 对应的算法实现 def fact(n): if n==1: return 1 return n * fa ...

  9. git命令详解( 七 )

    此为git命令详解的第七篇 这章我们可以来逐渐揭开 git push.fetch 和 pull 的神秘面纱了.我们会逐个介绍这几个命令,它们在理念上是非常相似的.   git push的参数 git ...

  10. CLR Via 第一 章 知识点整理(1)

    写这个纯粹是自己的一点学习总结,其实就学习的笔记整理,相当于对自己的一点督促,如有看到不正确的欢迎指出 一般我们写代码都是使用的高级语言,但是在CLR中运行的代码并不是我们直接写的代码,而是通过我们选 ...