js定时器案例2

最新推荐文章于 2024-05-30 11:27:58 发布

喵俺第一专栏

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量506

点赞数 1

分类专栏： # Html+css+js项目文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/dengfengling999/article/details/122766075

版权

Html+css+js项目专栏收录该内容

31 篇文章 2 订阅

订阅专栏

点击按钮div可以向右移动，向左移动，详细代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #box1 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
    <script>
        //定义一个变量
        var time;
        window.onload = function () {
            //获取box1,btn01
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            //获取btn02
            var btn02 = document.getElementById("btn02");


            //点击按钮box1向右移动
            btn01.onclick = function () {
                //关闭上一个定时器
                clearInterval(time);

                //开启一个定时器
                time = setInterval(function () {
                    //获取box1原来的值
                    var oldValue = parseInt(getStyle(box1, "left"));
                    //在旧值得基础上增加
                    var newValue = oldValue + 11;

                    //判断newValue是否大于800
                    if (newValue > 800) {
                        newValue = 800;
                    }

                    //将新值设置为box1
                    box1.style.left = newValue + "px";

                    //当元素移动到800px时，使其停止执行移动
                    if (newValue == 800) {
                        //达到目标，关闭定时器
                        clearInterval(time);
                    }

                }, 30);

            };
            //点击按钮box1向左移动
            btn02.onclick = function () {
                move(box1, 10, 0)//speed不用考虑正负值
            };
        };
        /*
          定义一个函数，用来获取指定元素的当前的样式
          参数： obj：要获取样式的元素
                name：要获取的样式名   
        */
        function getStyle(obj, name) {
            if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有
                return getComputedStyle(obj, null)[name];//正常浏览器
            } else {
                return obj.currentStyle[name];//IE浏览器
            }

        }
        //创建一个可以简单执行动画的函数，当在调用的时候就不用像第一个（点击按钮box1向右移动）一样写那么多代码
        /*
          参数：
            obj:要执行动画的对象
            speed：要传进来的速度(正值向右移动，负值向左移动)
            target：执行动画的目标位置
        */
        function move(obj, speed, target) {
            //关闭上一个定时器
            clearInterval(time);

            //获取元素当前的位置
            var current = parseInt(getStyle(obj, "left"));

            //判断速度正负值0-800speed为正，800-0speed为负
            if (current > target) {
                //此时速度为负值
                speed = -speed;
            }

            //开启一个定时器
            time = setInterval(function () {
                //获取box1原来的值
                var oldValue = parseInt(getStyle(obj, "left"));
                //在旧值得基础上增加
                var newValue = oldValue + speed;

                //800向0移动，向左移动，需要判断newValue是否小于target
                //0到800移动，向右移动，需要判断newValue是否大于target
                if ((speed < 0 && newValue < target) || (speed > 0 && newValue > target)) {
                    newValue = target;
                }

                //将新值设置为box1
                obj.style.left = newValue + "px";

                //当元素移动到0px时，使其停止执行移动
                if (newValue == target) {
                    //达到目标，关闭定时器
                    clearInterval(time);
                }

            }, 30);

        }
    </script>
</head>

<body>
    <button id="btn01">点击按钮box1向右移</button>&nbsp;<button id="btn02">点击按钮box1向左移</button><br><br>
    <div id="box1"></div>
    <div style="width:0;height:1000px;border-left:1px black solid;position:absolute;left:800px;top: 0;"></div>
</body>

</html>

点击按钮box1向右移动：

点击按钮box1向左移动：

喵俺第一专栏

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
js定时器案例2

点击按钮div可以向右移动，向左移动，详细代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale
复制链接

扫一扫