setInterval的用法以及示例

这篇文章主要介绍了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
  • 4
    点赞
  • 34
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值