时间戳

首页 > 技术文章 > JS基础知识——定时器

JS基础知识——定时器

sylz 2016-08-07 14:12 原文

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>

 

　　

推荐阅读