1、定时器——setInterval("执行函数名",间隔时间);

　　setInterval(fun,1000);每隔1秒钟执行一次fun函数

　　setInterval("fun()",1000);每隔1秒钟执行一次fun函数

　　排队执行——间隔时间t1和程序执行时间t2，如果t1<t2（程序执行时间比间隔时间还长），这样是不合理的。必须是t2<=t1。

timer=setInterval(fun,1000); clearInterval(timer); 关闭定时器

2、倒计时

　　原理：最终时间-现在时间=倒计时

　　问题1：如果直接用年份和月份来减，会存在年份不一样，月份不一样导致天数不一样的尴尬局面，所以就借助于一个基准时间，就是1970年1月1日午夜。

　　解决办法：用最终时间的距离1970 的毫秒数-现在距1970的毫秒数=将得到的结果不断转化就可以了

　　问题2：现在距离1970的毫秒数容易获取，但是最终时间的毫秒数如何获取呢？

　　解决办法：var nowTime=new Date();//不写参数，得到的是当前时间

　　　　　　 var endTime=new Date("2016/11/11"); //写了参数，就可以设置一个未来的时间

　　　　　　　var endTime=new Date("2016/11/11 12:00:00");//这个是写了一个更具体的参数，带时钟的未来时间

3、定时器——setTimeout("fun()",1000);

　　　　延迟1秒钟执行函数，只执行一次。

4、setTimeout应用实例

功能：页面倒计时跳转　

代码：这个比setinterval要更友好，更常用。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

    </head>

    <body>

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

    </body>

</html>

    <script type="text/javascript">

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

    setTimeout(goIndex,1000);

    var time=5;

    function goIndex(){

        time--;

        if(time<0){

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

        }else{

            box.innerHTML="<a href='http://www.baidu.com'>还有"+time+"秒跳转到百度首页...</a>";

            setTimeout(goIndex,1000);

        }

    }

</script>

5、setTimeout应用实例

　　描述：图片上下滚动播放

　　原理：让图片绝对定位，改变图片的top值，让其上下移动。

　　代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{margin:0;padding: 0;}

            #box{

                width: 512px;

                height: 400px;

                margin:20px auto;

                overflow: hidden;

                position: relative;

            }

            #box img{

                position: absolute;

                top: 0;

                left: 0;

            }

            #box span{

                position: absolute;

                left:0;

                width:512px;

                height:200px;

                cursor: pointer;

            }

            #box #top{

                top:0;

            }

            #box #bottom{

                bottom:0;

            }

        </style>

        <script type="text/javascript">

            window.onload=function(){

                var top=document.getElementById("top");

                var bottom=document.getElementById("bottom");

                var pic=document.getElementsByTagName("img")[0];

                var topposition=0;

                var height=1470;

                var timer=null;

                top.onmouseover=function(){

                    timer=setTimeout(goDown,10);

                    function goDown(){

                        topposition--;

                        if(topposition>(-1*1070)){

                            pic.style.top=topposition+"px";

                            timer=setTimeout(goDown,10);

                        }else {

                            topposition=-1070;

                            pic.style.top=topposition+"px";

                            clearTimeout(timer);//跳出递归

                        }

                    }

                }

                top.onmouseout=function(){

                    clearTimeout(timer);

                    pic.style.top=topposition+"px";

                }

                bottom.onmouseover=function(){

                    timer=setTimeout(goUp,10);

                    function goUp(){

                        topposition++;

                        if(topposition<0){

                            pic.style.top=topposition+"px";

                            timer=setTimeout(goUp,10);

                        }else{

                            topposition=0;

                            pic.style.top=topposition+"px";

                            clearTimeout(timer);//跳出递归

                        }

                    }

                }

                bottom.onmouseout=function(){

                    clearTimeout(timer);

                    pic.style.top=topposition+"px";

                }

            }

        </script>

    </head>

    <body>

        <div id="box">

            <img src="img/mi.png" alt="" />

            <span id="top"></span>

            <span id="bottom"></span>

        </div>

    </body>

</html>

JS基础知识——定时器的更多相关文章

[JS复习] JS 基础知识
项目结尾,空闲时间,又把<JS 基础知识> 这本书过了一遍,温故知新后,很多知其然不知其所以然的内容豁然开朗. [1. 用于范围的标签] display :inline or bloc ...
HTML+CSS+JS基础知识
HTML+CSS+JS基础知识目录对HTML+CSS+JS的理解基础知识对HTML+CSS+JS的理解基础知识插入样式表的三种方式外部样式表:<link rel="sty ...
Node.js基础知识
Node.js入门 Node.js Node.js是一套用来编写高性能网络服务器的JavaScript工具包,一系列的变化由此开始.比较独特的是,Node.js会假设在POSIX环境下运行 ...
网站开发进阶(十五)JS基础知识充电站
JS基础知识充电站 1.javascript alert弹出对话框时确定和取消两个按钮返回值? 用的不是alert对话框,是confirm confirm(str); 参数str:你要说的话或问题: ...
NodeJs>------->>第三章：Node.js基础知识
第三章:Node.js基础知识一:Node.js中的控制台 1:console.log.console.info 方法 console.log(" node app1.js 1> ...
JS基础知识笔记
2020-04-15 JS基础知识笔记 // new Boolean()传入的值与if判断一样 var test=new Boolean(); console.log(test); // false ...
JS基础知识总结
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划() ...
js基础知识总结（2016.11.1）
js基础知识点总结如何在一个网站或者一个页面,去书写你的js代码:1.js的分层(功能):jquery(tool) 组件(ui) 应用(app),mvc(backboneJs)2.js的规划():避 ...
js基础知识--BOM
之前说过,在js的运行环境为浏览器时,js就主要有三部分组成: ECMAScript核心语法.BOM.DOM.今天就和大家详细说一下BOM的一些基础知识. BOM BOM通常被称为浏览器对象模型,主 ...

随机推荐

访问WEB-INF下的jsp/html
基于Servlet的声明,WEB-INF不作为Web应用的公共文档树的一部分.因此,WEB-INF 目录下的资源不是为客户直接服务的.因此客户端不能直接访问WEB-INF下的文件,但是可以通过requ ...
【dfs 回溯】 zoj 1004
题意:给出一个源字符串和一个目标字符串,打出所有符合stack操作的i,o串使得对于源字符串的操作能变为目标字符串思路:搜索,回溯. 之前想过是不是队列,觉得不对那样bfs是求最优解了:也想过用结构 ...
Windows任务管理器中内存使用、虚拟内存区别及与页面文件的关系
原文地址:Windows任务管理器中内存使用.虚拟内存区别及与页面文件的关系虚拟内存(VirtualMemory)是Windows管理所有可用内存的方式.对于32位Windows系统,每个进程所用到 ...
Timewarp 一种生成当中帧技术，异步时间扭曲（Asynchronous Timewarp）
翻译: https://www.oculus.com/blog/asynchronous-timewarp/ 异步时间扭曲(Asynchronous Timewarp 时间扭曲,即调整时长) 关 ...
Struts2 请求数据的自动封装及自定义转换器类
请求数据自动封装: 实现原理:使用了参数拦截器.struts-default.xml中 <interceptor name="params" class="com. ...
iOS拨打电话（三种方法）
iOS拨打电话(三种方法) 查了很多地方的关于iOS程序拨打电话,大都不全,今天我总结了三种方法,各有不同,拿来给大家分享,希望给大家有所帮助 1,这种方法,拨打完电话回不到原来的应用,会停留在通讯 ...
动画——animation（2）
日常中,我们使用的动画来源有两个方面—— 第一个,自己去定义. 通过@keyframes去定义即可,格式如下: @keyframe animatename{ 0%{ //这里面写初始的对象的css样式 ...
转：LoadRunner中参数化技术详解
LoadRunner中参数化技术详解 LoadRunner在录制脚本的时候,只是忠实的记录了所有从客户端发送到服务器的数据,而在进行性能测试的时候,为了更接近真实的模拟现实应用,对于某些信息需要每次提 ...
Code Blocks 使用 VC2013编译HelloWord
首先在 Settings-Complier中把 Microsoft Visual c++ 2010 设置成默认(莫不默认也无所谓,就是改着方便而已) 然后在ToolChain excutable 中, ...
“inno setup打包，win7下安装没有桌面快捷方式，xp下安装正常”
修改桌面的快捷键为选中就行了:Flags: checkablealone;在[Tasks]下面修改代码如下:Name: "desktopicon"; Description: &q ...