js定时器案例1

喵俺第一专栏

已于 2022-02-01 20:50:18 修改

阅读量443

点赞数

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

于 2022-02-01 20:43:18 首次发布

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

版权

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>
        window.onload = function () {
            //获取box1,btn01
            var box1 = document.getElementById("box1");
            var btn01 = document.getElementById("btn01");
            //定义一个变量
            var time;
            //点击按钮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);

            };
        };
        /*
          定义一个函数，用来获取指定元素的当前的样式
          参数： obj：要获取样式的元素
                name：要获取的样式名   
        */
        function getStyle(obj, name) {
            if (window.getComputedStyle) {//正常浏览器有getComputedStyle这个方法，ie8以上有
                return getComputedStyle(obj, null)[name];//正常浏览器
            } else {
                return obj.currentStyle[name];//IE浏览器
            }

        }
    </script>
</head>

<body>
    <button id="btn01">点击按钮</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>

结果：

点击按钮后，div向右进行移动

喵俺第一专栏

关注

0
点赞
踩
0

收藏

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

点击按钮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"&g
复制链接

扫一扫