js对dom的操作以及定时器的使用

第一种类型

<!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>
        body {
            overflow: hidden;
            cursor: pointer;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        #cont {
            width: 150px;
            height: 200px;
            background: red;
            position: absolute;
            top: 200px;
        }
        
        #side {
            width: 20px;
            height: 90px;
            background: green;
            position: absolute;
            left: -20px;
        }
    </style>
    <script>
        window.onload = function() {
            let w = document.body.offsetWidth; //获取页面的宽度
            console.log(w);
            //获取页面的长度
            let cont = document.getElementById('cont');
            let cw = cont.offsetWidth;
            //获取cont的长度
            cont.style.left = w + 'px'; //cont所在的位置是页面的长度
            let timer = null //设置定时器为null

            cont.onmouseover = function() {
                clearInterval(timer) //关闭定时器,防止定时器冲突
                timer = setInterval(() => {
                    if (cont.offsetLeft <= w - cw) {
                        clearInterval(timer)
                    } else {
                        cont.style.left = cont.offsetLeft - 10 + 'px';
                    }
                }, 100);
            }

            cont.onmouseout = function() {
                clearInterval(timer)
                timer = setInterval(() => {
                    if (cont.offsetLeft == w) {
                        clearInterval(timer)
                    } else {
                        cont.style.left = cont.offsetLeft + 10 + 'px';
                    }
                }, 100);
            }
        }
    </script>

</head>

<body>
    <div id="cont">
        <div id="side">查看更多</div>
    </div>
</body>

</html>

第二种类型

<!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>
        body {
            overflow: hidden;
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        #a {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 200px;
            font-size: 40px;
            cursor: pointer;
        }
        
        #b {
            width: 40px;
            height: 40px;
            position: absolute;
            top: 200px;
        }
    </style>
    <script>
        window.onload = function() {
            let w = document.body.offsetWidth;

            let a = document.getElementById('a'); //红方块
            let aw = a.offsetWidth //红方块的长度
            a.style.left = w - aw + 'px' //红方块的位置

            let b = document.getElementById('b'); //绿方块
            let bw = b.offsetWidth //绿方块的长度
            b.style.left = w + 'px' //绿方块的位置

            let greenLift, redleft, greenRight = null //重置一下没个定时器

            a.onclick = function() { //红方块的点击事件
                clearInterval(greenLift, greenRight, redleft)
                    //先清除一下定时器防止冲突

                redleft = setInterval(() => {
                    if (a.offsetLeft >= w) {
                        clearInterval(redleft)
                    } else {
                        a.style.left = a.offsetLeft + 10 + 'px'
                    }
                }, 100); //红方块向右移动

                greenLift = setInterval(() => {
                    if (b.offsetLeft <= w - bw) {
                        clearInterval(greenLift)
                    } else {
                        b.style.left = b.offsetLeft - 10 + 'px'
                    }
                }, 100); //绿方块向左移动

            }

            b.onclick = function() { //小绿方块的点击事件
                clearInterval(greenLift, greenRight, redleft)

                greenRight = setInterval(() => {
                    if (b.offsetLeft >= w) {
                        clearInterval(greenRight)
                    } else {
                        b.style.left = b.offsetLeft + 10 + 'px'
                    }
                }, 100);

                redLeft = setInterval(() => {
                    if (a.offsetLeft <= w - aw) {
                        clearInterval(redLeft)
                    } else {
                        a.style.left = a.offsetLeft - 10 + 'px'
                    }
                }, 100);

            }
        }
        console.log('在我写的时候上帝和我都知道要写什么,但是现在只有上帝才知道');
    </script>
</head>

<body>
    <div id="a">&times;</div>
    <div id="b"><img src="bot.jpg"></div>
</body>

</html>

拜拜

最后修改:2021 年 08 月 31 日 09 : 44 PM
如果觉得我的文章对你有用,请随意赞赏