BOM定时器案例

最新推荐文章于 2022-05-12 21:08:05 发布

原创最新推荐文章于 2022-05-12 21:08:05 发布 · 478 阅读

3 ·

CC 4.0 BY-SA版权

运用BOM定时器的两个对象方法：

（一）window. setInterval（函数，时间）； // 页面加载完毕后，过了指定的时间，执行一次函数代码，再过指定时间再执行；依次反复；

window.clearInterval (要清理的定时器id值)；

1. 要实现效果：点击按钮“摇一摇”，图片不规则距离动；点击按钮“停止”，图片不动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            position: absolute;
        }
    </style>
</head>
<body>
    <input type="button" value="摇一摇" id="btn">
    <input type="button" value="stop" id="btn1">
    <div id="dv">
        <img src="image/11.jpg" alt="">
        <img src="image/22.jpg" alt="">
    </div>
    <script src="H1.js"></script>
    <script>
        var timeId = "";
        my$("btn").onclick = function () {
            timeId = setInterval(function () {
               var x = parseInt(Math.random()*100+1);
               var y = parseInt(Math.random()*100+1);
               my$("dv").style.left = x+"px";
                my$("dv").style.top = y+"px";
            },1000);
        };
        my$("btn1").onclick = function () {
            clearInterval(timeId);
        }


    </script>
</body>
</html>

（2）一闪一闪亮晶晶（实现效果：星星在框内跳动）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #dv {
            width: 400px;
            height: 400px;
            border: 2px solid yellowgreen;
            background-color: black;
            position: relative;
        }
        span {
            font-size: 30px;
            color: yellow;
            position: absolute;
        }
    </style>
</head>
<body>
    <input type="button" value="一闪一闪亮晶晶" id="btn">
    <div id="dv">
    </div>
    <script src="H1.js"></script>
    <script>
        my$("btn").onclick = function () {
            setInterval(function () {
                my$("dv").innerHTML = "<span>★</span>";
                var x = parseInt(Math.random()* 400+1);
                var y = parseInt(Math.random()* 400+1);
                my$("dv").firstElementChild.style.left = x + "px";
                my$("dv").firstElementChild.style.top = y + "px";
            },100);
        }
    </script>
</body>
</html>

（3）图片时钟展示（一张图片对应一个时间，图片为00：00 ~ 23：59）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img src="" alt="" id="im">
    <script src="H1.js"></script>
    <script>
        function f1() {
            var dt = new Date();
            var hour = dt.getHours();
            var second = dt.getSeconds();
            hour = hour<10? "0"+hour : hour;
            second = second<10?"0"+ second : second;
            my$("im").src = "meimei/" + hour + "_" + second +".jpg";
        }
        f1();
        setInterval(f1,10);
    </script>
</body>
</html>

（2）一次性定时器（只执行一次，即一次性创建，若不消除仍存在；但一旦消除，就会彻底清除）

window.setTimeout(函数，时间);

window.clearTimeout(要清理的定时器id值)；

<input type="button" value="按钮" id="btn1">
<script src="H1.js"></script>
<script>
    var timeId = window.setTimeout(function () {
            alert("hha");
        },1000);
    my$("btn1").onclick = function () {
          window.clearTimeout(timeId);
    }
</script>

===================BOM两个定时器用的比较多的是第一个，故案例都以第一个为主========================

（case one）协议禁用按钮

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <textarea name="texta" id="" cols="30" rows="10">
        hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh
    </textarea><br>
    <input type="button" value="请仔细阅读协议(5)" id="btn" disabled>
    <script src="H1.js"></script>
    <script>
        var time = 5;
        var timeId = setInterval(function () {
            time--;
            my$("btn").value = "请仔细阅读协议("+time+")";
                if (time<=0){
                    clearInterval(timeId);
                    my$("btn").disabled = false;
                    my$("btn").value = "同意";
                }
            },1000);

    </script>
</body>
</html>

（case two） =================div渐变============

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1 {
            width: 300px;
            height: 300px;
            background-color: pink;
        }
    </style>
</head>
<body>
        <div id="div1"></div>
        <input type="button" value="透明" id="btn">
        <script src="H1.js"></script>
        <script>

            my$("btn").onclick = function () {
                var opacity = 10;
                var timeId = setInterval(function () {
                    opacity--;
                    if (opacity<=0){
                        clearInterval(timeId);
                    }
                    my$("div1").style.opacity = opacity/10;
                },200)
            }
        </script>
</body>
</html>

(case Three) ============================div变宽===============================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #div1 {
            width: 200px;
            height: 100px;
            background-color: pink;
            border-radius: 30px;
        }
    </style>
</head>
<body>
    <!--===============div变宽==========-->
    <input type="button" value="按钮" id="btn">
    <div id="div1"></div>
    <script src="H1.js"></script>
    <script>
        my$("btn").onclick = function () {
            var width = 200;
            var timeId = setInterval(function () {
                width += 5;
                if (width>=800){
                    clearInterval(timeId);
                }
                my$("div1").style.width = width + "px";
            },20)
        }
    </script>
</body>
</html>

（case Four）============移动元素(两个按钮，一个移动到400px,一个移动到800px)（封装动画函数）================

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        #btn1 {
            margin-top: 10px;
        }

        #div1 {
            margin-top: 20px;
            width: 200px;
            height: 100px;
            background-color: pink;
            position: absolute;
        }
    </style>
</head>
<body>
    <input type="button" value="移动到400px" id="btn1">
    <input type="button" value="移动到800px" id="btn2">
    <div id="div1"></div>
    <script src="H1.js"></script>
    <script>
        ////点击第一个按钮移动到400px
        my$("btn1").onclick = function () {
            animate(my$("div1"),400);
        };
        //点击第二个按钮移动到800px
        my$("btn2").onclick = function () {
            animate(my$("div1"),800);
        };
        //动画函数---任意一个元素移动到指定的目标位置
        function animate(element,target) {
            //先清理定时器
            clearInterval(element.timeId);
            //一会要清理定时器(只产生一个定时器)
            element.timeId = setInterval(function () {
                //获取div的当前的位置
                var current = element.offsetLeft;
                //div每次移动多少像素---步数
                var step =10;
                //每次移动后的距离
                step = current<target?step:-step;
                current += step;
                //判断当前移动后的位置是否到达目标位置
                if (Math.abs(target-current)>=Math.abs(step)){
                    element.style.left = current + "px";
                } else {
                    //清理定时器
                    clearInterval(element.timeId);
                    element.style.left = target + "px";
                }
            },20);
        }
    </script>
</body>
</html>