setInterval的用法以及示例

最新推荐文章于 2024-02-01 13:54:20 发布

shiki0083

最新推荐文章于 2024-02-01 13:54:20 发布

阅读量7.4w

点赞数 4

分类专栏： JS

JS 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

这篇文章主要介绍了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" οnclick="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>

转自https://www.cnblogs.com/tanxiang6690/p/6836392.html

shiki0083

关注

4
点赞
踩
35

收藏

觉得还不错? 一键收藏
0
评论
setInterval的用法以及示例

这篇文章主要介绍了js的setInterval方法的用法以及示例，非常的有用，这里推荐给小伙伴们。　　　setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。　　setinterval()用法　　setInterval(code,millisec...
复制链接

扫一扫