8月30日js学习笔记

博主： literature
发布时间：2023 年 08 月 27 日
118 次浏览
关闭评论
3242字数
分类：主机教程

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

第一种类型





    
    
    
    Document
    
    




    查看更多

第二种类型

拜拜

最后修改：2023 年 08 月 27 日

如果觉得我的文章对你有用，请随意赞赏

此处评论已关闭

8月30日js学习笔记

literature • 2023 年 08 月 27 日

<h2><center>
  js对dom的操作以及定时器的使用
 </center></h2><p>第一种类型</p><pre><code><!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>

</html>
</code></pre><h2>第二种类型</h2><pre><code><!DOCTYPE html>
<html lang="en">

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>
</code></pre><p>拜拜</p>

8月30日js学习笔记

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

第二种类型

live/msn等微软绝版邮箱详细的注册教程

欢迎使用 Typecho

一个功能强大又好用的RSS订阅器：FreshRSS安装教程

VPS使用BaiduPCS-Go高速下载百度网盘的文件，支持上传/离线下载等操作

使用Caddy申请免费的Let’s Encrypt泛域名SSL证书

关于WiFi密码破解工具汇总

miniconda 安装 tensorflow2.3

当黑客会有女朋友吗？

BaiduExporter：一个可以将百度云文件直接导出到Aria2下载的插件

侧边栏添加SEO优化模块-主机教程

8月30日js学习笔记