• JavaScript-client、offset、scroll、定时器


    • client

    • offset

    • scroll

    client、offset、scroll系列

    他们的作用主要与计算盒模型,盒子的偏移量和滚动有关

    clientTop 内容区域到边框顶部的距离, 说白了, 就是边框的高度
    clientLeft 内容区域到边框左部的距离, 说白了, 就是边框的宽度
    clientWidth 内容区域+左右padding        可视宽度
    clientHeight 内容区域+上下padding       可视高度

    client演示

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            .box{
                 200px;
                height: 200px;
                position: absolute;
                border: 10px solid red;
                padding: 80px;
            }
        </style>
    </head>
    <body>
        <div class="box" id="box">
            专业丰富的课程体系,博学多闻的实力讲师以及风趣生动的课堂,在路飞,不是灌输知识,而是点燃你的学习火焰。专业丰富的课程体系,博学多闻的实力讲师以及风趣生动的课堂,在路飞,不是灌输知识,而是点燃你的学习火焰。专业丰富的课程体系,博学多闻的实力讲师以及风趣生动的课堂,在路飞,不是灌输知识,而是点燃你的学习火焰。专业丰富的课程体系,博学多闻的实力讲师以及风趣生动的课堂,在路飞,不是灌输知识,而是点燃你的学习火焰。
        </div>
    
    </body>
    <script type="text/javascript">
        var oBox = document.getElementById("box");
        console.log(oBox.clientTop);
        console.log(oBox.clientLeft);
        console.log(oBox.clientWidth);
        console.log(oBox.clientHeight);
    </script>
    </html>
    View Code

    屏幕的可视区域

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
        </head>
        <body>
        </body>
        <script type="text/javascript">
    
            // 屏幕的可视区域
            window.onload = function(){
    
                // document.documentElement 获取的是html标签
                console.log(document.documentElement.clientWidth);
                console.log(document.documentElement.clientHeight);
                // 窗口大小发生变化时,会调用此方法
                window.onresize = function(){    
                    console.log(document.documentElement.clientWidth);
                    console.log(document.documentElement.clientHeight);
                }         
            }
        </script>
    </html>
    View Code

    offset演示

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{
                    padding: 0;
                    margin: 0;
                }
            </style>
    
        </head>
        <body style="height: 2000px">
            <div>
                <div class="wrap" style="  300px;height: 300px;background-color: green">
                    <div id="box" style=" 200px;height: 200px;border: 5px solid red;position: absolute;top:50px;left: 30px;">            
                    </div>
                </div>
            </div>
        </body>
        <script type="text/javascript">
            window.onload = function(){
                var box = document.getElementById('box')
                /*
                 offsetWidth占位宽  内容+padding+border
                 offsetHeight占位高 
                 offsetTop: 如果盒子没有设置定位 到body的顶部的距离,如果盒子设置定位,那么是以父辈为基准的top值
                 offsetLeft: 如果盒子没有设置定位 到body的左部的距离,如果盒子设置定位,那么是以父辈为基准的left值
    
                 * */
                console.log(box.offsetTop)
                console.log(box.offsetLeft)
                console.log(box.offsetWidth)
                console.log(box.offsetHeight)
    
            }
    
        </script>
    </html>
    View Code

    scroll演示

    实施监听滚动事件

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css">
                *{padding: 0;margin: 0;}
            </style>
        </head>
        <body style=" 2000px;height: 2000px;">
            <div style="height: 200px;background-color: red;"></div>
            <div style="height: 200px;background-color: green;"></div>
            <div style="height: 200px;background-color: yellow;"></div>
            <div style="height: 200px;background-color: blue;"></div>
            <div style="height: 200px;background-color: gray;"></div>
            <div id = 'scroll' style=" 200px;height: 200px;border: 1px solid red;overflow: auto;padding: 10px;margin: 5px 0px 0px 0px;">
                <p>学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界学习新技能,达成人生目标,开始用自己的力量影响世界
                </p>
    
            </div>
    
    
        </body>
        <script type="text/javascript">
    
            window.onload = function(){
    
                //实施监听滚动事件
                window.onscroll = function(){
    //                console.log(1111)
    //                console.log('上'+document.documentElement.scrollTop)
    //                console.log('左'+document.documentElement.scrollLeft)
    //                console.log('宽'+document.documentElement.scrollWidth)
    //                console.log('高'+document.documentElement.scrollHeight)
    
    
                }
    
                var s = document.getElementById('scroll');
    
                s.onscroll = function(){
    //            scrollHeight : 内容的高度+padding  不包含边框
                    console.log(''+s.scrollTop)
                    console.log(''+s.scrollLeft)
                    console.log(''+s.scrollWidth)
                    console.log(''+s.scrollHeight)
                }
            }
    
        </script>
    </html>
    View Code

    定时器

    • setTimeout()

    • setInterval()

    在js中有两种定时器:

    • 一次性定时器:setTimeout()
    • 周期性循环定时器:setInterval()

    setTimeout()

    只在指定的时间后执行一次

    /定时器 异步运行  
    function hello(){  
    alert("hello");  
    }  
    //使用方法名字执行方法  
    var t1 = window.setTimeout(hello,1000);  
    var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
    window.clearTimeout(t1);//去掉定时器

    setInterval()

    在指定时间为周期循环执行

    /实时刷新  时间单位为毫秒  
    setInterval('refreshQuery()',8000);   
    /* 刷新查询 */  
    function refreshQuery(){  
      console.log('每8秒调一次') 
    }

    对于这两个方法,需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作,那么最好使用setInterval,而如果不想由于连续调用产生互相干扰的问题,尤其是每次函数的调用需要繁重的计算以及很长的处理时间,那么最好使用setTimeout

  • 相关阅读:
    css单位及颜色值
    web表单作业
    打卡第一天
    IIS的应用池-网站
    Sublime 提示 The package specified, DocBlockr, is not available
    Git/GitHub 初用体验与总结
    自定义置顶TOP按钮
    Firebug 学习使用教程
    ASP.NET导出文件FileResult的使用
    DataGrid获取当前行某列值
  • 原文地址:https://www.cnblogs.com/Xuuuuuu/p/10510461.html
Copyright © 2020-2023  润新知