JavaScript 学习 Day6_p287-p334

最新推荐文章于 2024-09-14 19:44:09 发布
最新推荐文章于 2024-09-14 19:44:09 发布
阅读量210 收藏
点赞数
分类专栏： JavaScript学习 文章标签： javascript 学习 前端
超老师学习使用，如需转载请标明出处！
本文链接：https://blog.csdn.net/qq_42317222/article/details/125256965
版权
本文涵盖了JavaScript中的一些重要概念和实用案例，包括获取鼠标坐标、模态框实现、立即执行函数、处理页面刷新bug、响应式设计、轮播图制作、特效应用以及阻止事件冒泡等。通过这些内容，读者将能提升JavaScript实战技能。
摘要由CSDN通过智能技术生成

在这里插入图片描述
在这里插入图片描述

<!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;
        }
        .father{
     
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 150px;
            position: relative;
        }

        .son{
     
            width: 100px;
            height: 100px;
            background-color: yellow;
            margin-left: 45px;
        }

        .w{
     
            width: 200px;
            height: 200px;
            background-color: skyblue;
            margin: 0 auto 200px;
            padding: 10px;
            border: 15px solid red;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <div class="w"></div>
    <script>
            //offset系列
            var father = document.querySelector('.father');
            var son = document.querySelector('.son');

            //1.可以得到元素的偏移  位置  返回的不带单位的数值
            console.log(father.offsetTop);
            console.log(father.offsetLeft);

            //它以带有定位的父亲为准 如果没有父亲 或者父亲没有定位 则以body为准
            console.log(son.offsetTop);
            console.log(son.offsetLeft);

            //2.可以得到元素的大小 宽度和高度 是包含padding + border + width
            var w = document.querySelector('.w');
            console.log(w.offsetWidth);
            console.log(w.offsetHeight);

            //3.返回带有定位的父亲 否则返回的是body
            console.log(son.offsetParent);//返回带有定位的父亲 否则一级一级往上找 知道找到带有定位的父亲为止
            console.log(son.parentNode);//返回父亲 是最近一级的父亲 亲爸爸 不管有没有定位

    </script>
</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>获取鼠标在盒子内的坐标</title>
    <style>
        .box{
     
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="son"></div>
    </div>

    <script>
        var box = document.querySelector('.box');

        box.addEventListener('mousemove', function(e){
     
            console.log('x坐标为:' + (e.pageX - box.offsetLeft));
            console.log('y坐标为:' + (e.pageY - box.offsetTop));
        });
    </script>
</body>
</html>
很重要的模态框案例

在这里插入图片描述

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .login-header {
     
            width: 100%;
            text-align: center;
            height: 30px;
            font-size: 24px;
            line-height: 30px;
        }

        ul,
        li,
        ol,
        dl,
        dt,
        dd,
        div,
        p,
        span,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        a {
     
            padding: 0px;
            margin: 0px;
        }

        .login {
     
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #ebebeb solid 1px;
            left: 50%;
            top: 50%;
            background: #ffffff;
            box-shadow: 0px 0px 20px #ddd;
            z-index: 9999;
            transform: translate(-50%, -50%);
        }

        .login-title {
     
            width: 100%;
            margin: 10px 0px 0px 0px;
            text-align: center;
            line-height: 40px;
            height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;/* 十字架型鼠标 */
        }

        .login-input-content {
     
            margin-top: 20px;
        }

        .login-button {
     
            width: 50%;
            margin: 30px auto 0px auto;
            line-height: 40px;
            font-size: 14px;
            border: #ebebeb 1px solid;
            text-align: center;
        }

        .login-bg {
     
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background: rgba(0, 0, 0, .3);
        }

        a {
     
            text-decoration: none;
            color: #000000;
        }

        .login-button a {
     
            display: block;
        }

        .login-input input.list-input {
     
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
        }

        .login-input {
     
            overflow: hidden;
            margin: 0px 0px 20px 0px;
        }

        .login-input label {
     
            float: left;
            width: 90px;
            padding-right: 10px;
            text-align: right;
            line-height: 35px;
            height: 35px;
            font-size: 14px;
        }

        .login-title span {
     
            position: absolute;
            font-size: 12px;
            right: -20px;
            top: -30px;
            background: #ffffff;
            border: #ebebeb solid 1px;
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }
    </style>
</head>

<body>
    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
            </div>
            <div class="login-input">
                <label>登录密码：</label>
                <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
            </div>
        </div>
        <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
    </div>
    <!-- 遮盖层 -->
    <div id="bg" class="login-bg"></div>

    <script>
        //1.获取元素
        var login = document.querySelector('.login');
        var mask = document.querySelector('.login-bg');
        var link = document.querySelector('#link');
        var closeBtn = document.querySelector('#closeBtn');

        //鼠标只在title的范围内才能拖拽
        var title = document.querySelector('#title');


        //2.点击弹出层这个链接 link 让mask 和login 显示出来
        link.addEventListener('click', function(){
     
            mask.style.display = 'block';
            login.style.display = 'block';
        });

        //3.点击关闭mask和login
        closeBtn.addEventListener('click', function(){
     
            mask.style.display = 'none';
            login.style.display = 'none';
        });

        //4.开始拖拽
        //(1)当我们鼠标按下就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e){
     
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;

            //(2)鼠标移动的时候，把鼠标页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值了
            document.addEventListener('mousemove', move);
            function move(e){
     
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }

            //(3)鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup', function(e){
     
                document.removeEventListener('mousemove', move);
            });
        });
    </script>
</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>立即执行函数</title>
</head>
<body>
    <script>
        // 1.立即执行函数：不需要调用，立马能够自己执行的函数
        function fn(){
     
            console.log(1);
        }
        fn();

        //2.写法 也可以传递参数进来
        // (function(){})(); 或者 (function(){}());

        (function(a, b){
     
            console.log(a + b);
            var num = 10;//局部变量
        })(1, 2);//第二个小括号可以看看做调用函数

        (function sum(a, b){
     
            console.log(a + b);
            var num = 10;//局部变量
        }(2, 3));

        //3.立即执行函数最大的作用就是独立创建了一个作用域,里面所有的变量都是局部变量不会有命名冲突的情况
    </script>
</body>
</html>
pageshow事件可以解决火狐浏览器的页面刷新bug

在这里插入图片描述

resize事件表示页面大小发生变化时触发
flexible分析
(function flexible(window, document) {
   
    // 获取的html 的根元素
    var docEl = document.documentElement
        // dpr 物理像素比
    var dpr = window.devicePixelRatio || 1

    // adjust body font size  设置我们body 的字体大小
    function setBodyFontSize() {
   
        // 如果页面中有body 这个元素 就设置body的字体大小
        if (document.body) {
   
            document.body.style.fontSize = (12 * dpr) + 'px'
        } else {
   
            // 如果页面中没有body 这个元素，则等着 我们页面主要的DOM元素加载完毕再去设置body
            // 的字体大小
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10    设置我们html 元素的文字大小
    function setRemUnit() {
   
        var rem = docEl.clientWidth / 10
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize  当我们页面尺寸大小发生变化的时候，要重新设置下rem 的大小
    window.addEventListener('resize', setRemUnit)
        // pageshow 是我们重新加载页面触发的事件
    window.addEventListener('pageshow', function(e) {
   
        // e.persisted 返回的是true 就是说如果这个页面是从缓存取过来的页面，也需要从新计算一下rem 的大小
        if (e.persisted) {
   
            setRemUnit()
        }
    })

    // detect 0.5px supports  有些移动端的浏览器不支持0.5像素的写法
    if (dpr >= 2) {
   
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
   
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!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>
        div{
     
            width: 200px;
            height: 200px;
            background-color: pink;
            /* text-align: center;
            line-height: 200px; */
            overflow: auto;
        }
    </style>
</head>
<body>
    <div>
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
        我是内容
    </div>

    <script>
        //scroll系列
        var div = document.querySelector('div');
        console.log(div.scrollHeight);//返回自身实际的高度，不含边框，返回值不带单位
        console.log(div.clientHeight);

        // scroll 是滚动事件 当滚动条发生变化会触发
        div.addEventListener('scroll',function(){
     
            console.log(div.scrollTop);
        });
    </script>
</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>
        .slider-bar {
     
            position: absolute;
            left: 50%;
            top: 300px;
            margin-left: 600px;
            width: 45px;
            height: 130px;
            background-color: pink;
        }

        .w {
     
            width: 1200px;
            margin: 10px auto;
        }

        .header {
     
            height: 150px;
            background-color: purple;
        }

        .banner {
     
            height: 250px;
            background-color: skyblue;
        }

        .main {
     
            height: 1000px;
            background-color: yellowgreen;
        }

        span {
     
            display: none;
            position: absolute;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div class="slider-bar">
        <span class="goBack">返回顶部</span>
    </div>
    <div class="header w">头部区域</div>
    <div class="banner w">banner</div>
    <div class="main w">主体部分</div>

    <script>
        //1.获取元素
        var sliderBar = document.querySelector('.slider-bar');
        var banner = document.querySelector('.banner');
        var bannerTop = banner.offsetTop;//一定要写在外面 防止页面滚动的时候不准确
        var sliderBarTop = sliderBar.offsetTop - bannerTop;//一定要写在外面 防止页面滚动的时候不准确
        //获取main元素 主体元素
        var main = document.querySelector('.main');
        var goBack = document.querySelector('.goBack');
        var mainTop = main.offsetTop;//一定要写在外面 防止页面滚动的时候不准确

        //2.页面滚动事件 scroll
        document.addEventListener('scroll', function(e){
     
            //pageYOffset整个页面被卷去的头部
            //console.log(window.pageYOffset);

            //3.当我们页面被卷去的头部大于等于了172此时 侧边栏就要改为固定定位
            if(window.pageYOffset >= bannerTop){
     
                sliderBar.style.position = 'fixed';
                sliderBar.style.top = sliderBarTop + 'px';
            }else{
     
                sliderBar.style.position = 'absolute';
                sliderBar.style.top = '300px';
            }

            //  4.当我们页面滚动到main盒子，就显示goback模块
            if(window.pageYOffset >= mainTop){
     
                goBack.style.display = 'block';
            }else{
     
                goBack.style.display = 'none';
            }
            
        });
    </script>
</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>
        div{
     
            position: absolute;
            left: 0px;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div></div>

    <script>
        //动画原理
        // 1.获得盒子当前位置
        // 2.让盒子在当前位置加上一个移动距离
        // 3.利用定时器不断重复这个操作
        // 4.加一个结束定时器的条件
        // 5.注意此元素需要添加定位，才能使用element.style.left

        var div = document.querySelector('div');
        var timer = window.setInterval(function(){
     
            if(div.offsetLeft >= 400){
     
                //停止动画 本质是停止定时器
                window.clearInterval(timer);
            }
            div.style.left = (div.offsetLeft + 1) + 'px';
        },
最低0.47元/天 解锁文章
TeacherChaos
关注
专栏目录
day02_SpringCloud-02
wuhua_0829的博客
12-25 197
- 会使用Feign进行远程调用 - 能独立搭建Zuul网关 - 能编写Zuul的拦截器
js中pageshow和load事件的区别
爱唯主机
03-27 1214
我们一般在三种情况下刷新页面都会触发load事件 1、a标签的超链接 2、F5或者刷新按钮（强制刷新） 3、前进后退按钮 但是在火狐浏览器中，有个特点，有个”往返缓存“，这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态，实际上是将庚哥页面都保存在了内存里 所以此时后退按钮就不能刷新页面，导致load事件不被执行。 此时我们可以使用pageshow事件来触发，这个...
JavaScript 网页特效
十二间记，知不足而奋斗，望远山而前行。千里不辞行路远，时光早晚到天涯。
12-20 1314
JS的BOM、DOM、以及轮播图特效
event.persisted判断是否后退进入
weixin_42871061的博客
11-23 9619
后退返回 window.addEventListener(‘pageshow’, function (event) { if (event.persisted || window.performance &amp;&amp; window.performance.navigation.type == 2) { location.reload(); } },false); 作者：章文顺 链接：htt...
通过event.persisted和window.performance判断页面是否为后退进入
xiamoziqian的博客
03-07 4403
今天有一个需求是判断页面为通过后退进入的时，重新加载页面刷新。 window.performance.navigation.type == 2 通过后退返回该页面 event.persisted 从缓存获取数据时为true，否则为false window.onpageshow = function(event) { if (event.persisted || window.perform...
JavaScript学习 Day4~Day5
qq_58614840的博客
07-11 1598
所有函数都有的一个函数在 js 中控制 this 的指向。
JavaScript ES(6-11)学习笔记
倩mys的博客
04-19 4767
课程资源：链接：https://pan.baidu.com/s/1YChjK2-p9rkl0Veds6nMNw 提取码：897y 1 课程介绍与环境搭建 1-1 课程介绍 配套电子书地址：http://es.xiecheng.live/introduction/preface.html 1-2 Node安装与NPM源切换 1、Node环境安装： 下载地址：https://nodejs.org/zh-cn/ (下载长期支持版本LTS) 安装完成，在终端输入：node -v 查看版本号 2、NPM：
JavaScript 逆向 ( 一 ) --- JavaScript 语法基础、逆向技巧
freeking101的博客
05-11 7030
JavaScript 语法基础、逆向技巧
JavaScript-day15------＞主要内容包含有伪数组；事件等相关内容。
莫名的博客
12-25 443
1.伪数组 数组 Array 数组2 Arguments 数组3 NodeList 数组4 HTMLCollection 以上每种数组属于不同的类别，所以拥有不同的属性和方法 如何把伪数组转真数组 <p></p> <p></p> <p&...
Python_day19--HTML基础--文本标签、超链接标签、图片标签
Biu_Biu_0329的博客
06-27 925
一、什么是Web开发     最早的软件都是运行在大型机上的,软件使用者通过“哑终端”登陆到大型机上去运行软件。后来随着PC机的兴起,软件开始主要运行在桌面上,而数据库这样的软件运行在服务器端,这种Client/Server模式简称CS架构。随着互联网的兴起,人们发现,CS架构不适合Web,最大的原因是Web应用程序的修改和升级非常迅速,而CS架构需要每个客户端逐个升级桌面App,因此,Brows...
python如何模拟微信扫码登录_Python实例---模拟微信网页登录(day3)
weixin_39606799的博客
12-10 1767
第四步： 扫码成功后获取最近联系人信息---day3代码settings.py"""Django settings for weixin project.Generated by 'django-admin startproject' using Django 2.0.1.For more information on this file, seehttps://docs.djangoprojec...
flexible.js 移动端自适应 rem
Your_Smile_的博客
08-24 1013
(function flexible(window, document) { var docEl = document.documentElement var dpr = window.devicePixelRatio || 1 // adjust body font size function setBodyFontSize() { if (document.body) { d...
移动端H5页面返回并且刷新页面（BFcache）
weixin_30877181的博客
11-05 2303
项目中的需求：点击浏览器中的返回按钮，要让页面重新加载资源。因为这部分的资源每次去加载的内容都不一样，如果返回的时候，还是看到原先的内容，那做这个内容块的意义就很小了；而如果用户看完了这部分内容，再返回来的时候，这个地方换成了新的内容，这样就能体现这部分的价值了。 而对于浏览器来说，大部分浏览器的返回是直接使用缓存的，不会执行任何的javascript代码。原因：部分浏览器在后退时不会触发onl...
解决手机上页面返回但是页面js没有刷新的痛点（BFcache）
热门推荐
每天都记录一点点！
04-21 2万+
一些浏览器中返回按钮是直接使用缓存的，不会执行任何js代码，例如, 在提交的时候将按钮设置为loading状态，如果在提交成功后没有对按钮进行处理，那么返回后按钮依然是loading状态，这就很尴尬了。 原因：部分浏览器在后退时不会触发onload事件，這是HTML5世代浏览器新增的特性之一——Back-Forward Cache(简称bfcache) 什么是bfcache 《J
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 854
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 470
【代码】【JavaScript】LeetCode：707设计链表。
记录开发一个英语听力训练网站
最新发布
业余程序员Blue的博客
09-14 431
目前只导入了雅思历年真题的听力音频，作为我日常练习英语听力的素材足够了。网站的主要功能其实就是英语句子精听，核心目的就是反复听每一句话，直到听懂为止，我觉得听力训练也没有太多技巧可言，就是老老实实地坚持去听，所谓网上经常说的“磨耳朵”吧。基于此，听力页面主要功能有：播放/暂停、上一句/下一句、播放次数选择、播放倍速选择、字体大小选择、是否显示原文、是否显示译文、是否自动播放下一句。而这些功能，基本上都是页面js操作。
前端入门：HTML+CSS 学习笔记 Day01
例如，`<h1>`到`<h6>`用于定义标题，` `用于换行，`<hr>`绘制水平线，`<p>`定义段落，`<strong>`、`<b>`强调文字，`<em>`、`<i>`表示着重或斜体，`<ins>`、`<u>`表示插入文本，`<del>`、`<s>`表示删除文本，`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值