JavaDay23-陈明泽

最新推荐文章于 2018-08-28 17:37:36 发布

转载最新推荐文章于 2018-08-28 17:37:36 发布 · 162 阅读

Java学习专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨了JavaScript中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" 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>

案例三：类似于广告弹窗的效果；

<!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>