web总结-js(9)

最新推荐文章于 2024-08-05 17:07:25 发布

YoungManxia

最新推荐文章于 2024-08-05 17:07:25 发布

阅读量201

点赞数

文章标签：前端 css js

本文链接：https://blog.csdn.net/YoungManxia/article/details/120860541

版权

学习目标：

1.获取URL参数
2.5秒后跳转到指定页面
3.location对象方法
4.history对象方法
网页效果
1.offset系列和style系列对比
2.获取盒子内位置
3.点击弹出登录框
4.元素可视区
5.立即执行函数
6.flexible分析
7.元素滚动scroll系列
8.返回顶部侧边栏按钮
10.mouseover和mouseenter的区别

学习内容：

1.获取URL参数

index.html
通过观察login.html from表单传过来的地址标志可以发现，传过来的是？uname=asd而我们需要的是asd。先去掉？采用substr（1），任何采用字符分割split（‘=’)

   <script>
        console.log(location.search);
        //先去掉？uname=asd
        var params = location.search.substr(1)
        console.log(params);
        //利用=把字符分割为数组 split（‘=’）
        var arr = params.split('=')
        console.log(arr[1]);
        var div = document.querySelector('div')
        div.innerHTML
    </script>

 <form action="index.html">用户名：<input type="text" name="uname">
        <input type="submit" value="登录">

    </form>

2.5秒后跳转到指定页面
设置一个常数时间timer，设置一个定时器setInterval每隔1000毫秒循环调用一次，每调用一次timer减一，当timer为0时调用location.href跳转。

<body>
    <button>点击</button>
    <div></div>
    <script>
        var div = document.querySelector('div')
        var timer = 5
        var btn = document.querySelector('button')
        // btn.addEventListener('click', function () {
        //     location.href = 'http://www.baidu.com'
        // })
        setInterval(function () {
            if (timer == 0) {
                location.href = 'http://www.baidu.com'
            }
            else {
                div.innerHTML = '您将在' + timer + '之后跳转'
                timer--
            }
        }, 1000)
    </script>
</body>

3.location对象方法
location.assign()记录浏览历史，可以实现后退功能
location.replace（）不能记录历史，不能后退。
location.reload(true)重新加载页面刷新，true强制刷新。

    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            //记录浏览历史，所以可以实现后退功能
            //location.assign('http://www.baidu.com')
            //不能记录历史，不能后退
            // location.replace('http://www.baidu.com')
            //重新加载页面刷新，true强制刷新
            location.reload(true);
        })
    </script>

4.history对象方法
history.forward()前进
history.back()后退
history.go(1)前进一步，两步
-1后退一步。

   <a href="list.html">123123</a>
    <button>前进</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click', function () {
            //history.forward()
            //history.back()
            history.go(1)
            //前进1步，2两步。。。。-1后退一步

        })
    </script>
</body>

网页效果
1.offset系列和style系列对比
offset系列：
element.offsetTop
element.offsetLeft
可以得到元素的偏移位置，返回不带单位的数值。
以带有定位的父亲为准，如果没有父亲或者父亲没有定位，以body为准。
offset返回的元素大小，宽度，高度是包含padding+width的。
element.offsetParent返回的是带有定位的父亲
element.parentNode返回的是最近一级的父亲，不管有没有定位。

    <script>
        //offset系列
        var father = document.querySelector('.father')
        var son = document.querySelector('.son')
        console.log();
        //可以得到元素的偏移位置，返回不带单位的数值
        console.log(father.offsetTop);
        console.log(father.offsetLeft);
        //它以带有定位的父亲为准，如果没有父亲或者父亲没有定位，以body为准
        console.log(son.offsetLeft);
        //湖片区元素的大小，宽度，高度 是包含padding+border+width
        var w = document.querySelector('.w')
        console.log(w.offsetWidth);
        console.log(w.offsetHeight);
        //返回带有定位的父亲，否则返回body
        console.log(son.offsetParent);
        console.log(song.parentNode);//返回最近一级的父亲，不管有没有定位
    </script>

2.获取盒子内位置
e.pageX是得到鼠标在页面中的坐标。
其次得到盒子在页面中的距离。

    <script>
        //点击事件
        //得到鼠标在页面中坐标哦（e.pagex)
        //其次得到盒子在页面中的距离
        var box = document.querySelector('.box')
        box.addEventListener('mousemove', function (e) {
            var x = e.pageX - this.offsetLeft
            var y = e.pageY - this.offsetTop
            this.innerHTML = 'x坐标是' + x + 'y坐标是' + y
        })
    </script>

3.点击弹出登录框
功能描述：点击文字，弹出登录对话框，对话框可以实现拖拽，实现关闭等功能。
1.首先点击后让mask和login显示出来。
2.点击closeBtn隐藏mask,login
3.拖拽功能
1）当我们按下鼠标，获得鼠标在盒子内的坐标
2）鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子内的坐标就是登录框的left和top值。

<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>
        var login = document.querySelector('.login')
        var mask = document.querySelector('.login-bg')
        var link = document.querySelector('#link')
        var closebtn = document.querySelector('#closeBtn')
        var title = document.querySelector('#title')
        //点击弹出这个连接link让mask和login显示出来
        link.addEventListener('click', function () {
            mask.style.display = 'block'
            login.style.display = 'block'
        })
        //点击closeBtn就隐藏mask，login
        closebtn.addEventListener('click', function () {
            mask.style.display = 'none'
            login.style.display = 'none'
        })
        //开始拖拽
        //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'
            }
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move)
            })

        })

    </script>
</body>

4.元素可视区
client系列函数和offset系列最大区别就是不包含边框，不包含border包含padding

 <script>
        //client宽度和offsetWidth最大区别是不包含边框,不包含border包含padding
        var div = document.querySelector('.div')
        console.log(div.clientWidth);
        console.log(div.clientTop);//返回上边框大小
        console.log(div.clientLeft);//返回左边框
    </script>

5.立即执行函数
1.立即执行函数，不需要调用，立马就能自己执行的函数。
2.（function（）{}）（）或者（function（）{}（））
3.主要作用，创建了一个独立的作用域，不与其他冲突。

   <script>
        //1,立即执行函数：不需要调用，立马能够自己执行的函数
        function fn() {
            console.log(1);
        }
        fn()
            //2.写法
            //(function () { })() 或者(function () { }())
            (function (a, b) {
                console.log(a + b);
            })(1, 2);//第二个小括号可以看作调用函数
        (function (a, b) {
            console.log(a + b);//局部变量
        }(2, 3))
        //主要作用：创建了一个独立作用域，不与其他冲突
    </script>

7.元素滚动scroll系列
1.scroll滚动事件，我们滚动进度条时触发的事件
2.scrollTop被卷进去的头部距离
3.scrollHeight指内容总长度
4。clientHeight指可视长度

 <script>
        var div = document.querySelector('div')
        console.log(div.scrollHeight);
        console.log(div.clientHeight);
        //scroll滚动事件，我们滚动进度条触发的事件
        div.addEventListener('scroll', function () {
            //scrolltop被卷进去的头部 
            console.log(div.scrollTop);
        })
    </script>

8.返回顶部侧边栏按钮
1.给页面添加事件document，
2.页面被卷曲了时window.pageYoffset获得，如果是被卷曲了左侧，window.pageXoffset.元素时element.scrollTop/scrollLeft

<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>
        //给页面添加事件document
        //页面被卷曲了是window.pageYOffset获得，如果是被卷去左侧，window.pageXOffset.元素是element.scrollTop/scrollleft
        var sliderbar = document.querySelector('.slider-bar')
        var banner = document.querySelector('.banner')
        //banner.offsetTop是被卷曲的头部，一定要写在外面
        var main = document.querySelector('.main')
        var goBack = document.querySelector('.goBack')
        var mainTop = main.offsetTop
        var bannertop = banner.offsetTop
        var sliderbartop = sliderbar.offsetTop - bannertop
        document.addEventListener('scroll', function () {
            //window.pageYOffset被卷曲的头部
            // console.log(window.pageYOffset);
            if (window.pageYOffset >= bannertop) {
                sliderbar.style.position = 'fixed'
                sliderbar.style.top = sliderbartop + 'px'
            } else {
                sliderbar.style.position = 'absolute'
                sliderbar.style.top = 300 + 'px'
            }
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block'

            } else {
                goBack.style.display = 'none'
            }
        })

    </script>
</body>

10.mouseover和mouseenter的区别
1.mouseover鼠标经过其子盒子也会触发事件，事件会冒泡。
2.mouseenter子盒子不会触发，不会冒泡，mouseleave也补会冒泡

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        var father = document.querySelector('.father')
        father.addEventListener('mouseover', function () {
            console.log(11);
        })
        //mouseover鼠标经过其子盒子也慧触发事件，要冒泡
        //mouseenter子盒子补回触发，不会冒泡mouseleave也补会冒泡
    </script>
</body>

学习时间：

2021.10.17

学习产出：

YoungManxia

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web总结-js(9)

学习目标：1.获取URL参数2.5秒后跳转到指定页面3.location对象方法4.history对象方法网页效果1.offset系列和style系列对比2.获取盒子内位置3.点击弹出登录框4.元素可视区5.立即执行函数6.flexible分析7.元素滚动scroll系列8.返回顶部侧边栏按钮10.mouseover和mouseenter的区别学习内容：1.获取URL参数index.html通过观察login.html from表单传过来的地址标志可以发现，传过来的是？
复制链接

扫一扫