js进阶第5天

最新推荐文章于 2024-09-16 08:47:17 发布

Shuai_gou

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量36

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/Shuai_gou/article/details/131873498

版权

本文介绍了JavaScript中关于元素位置的offset属性，如offsetHeight和offsetLeft，以及滚动(scroll)属性scrollHeight和scrollTop，展示了如何获取元素的可视区域(clientWidth和clientHeight)。此外，还讲解了定时器的使用，包括setTimeout和setInterval，以及如何清除定时器。通过示例代码，阐述了这些概念在实际网页交互中的应用。

摘要由CSDN通过智能技术生成

一、三大家族

1.1、偏移量offset

offset是偏移、位移、补偿的意思（取整数值四舍五入），表示元素的偏移量。

offsetHeight和offsetWidth
- 元素盒子模型的宽高（width/height + padding+border）
offsetLeft和offsetTop
- 1、表示当前元素距离它最近的相对父级（定位元素）的水平或者垂直距离。
- 2、如果它一直没有相对父级元素，默认指向body
offsetParent和parentNode
- offsetParent 指的是最近的一个相对父级元素（默认指向body）
- parentNode 就是直接父级（标签结构中的父子关系）

html和css代码

<!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;
            border: 0;
            list-style: none;
        }

        div {
            width: 300px;
            height: 300px;
            border: 1px solid #000;
            margin: 100px;
            position: relative;
        }

        span {
            width: 100px;
            height: 100px;
            border: 1px solid #000;
            position: absolute;
            left: 120px;
            top: 30px;
        }
    </style>
</head>

<body>
    <div>
        <span></span>
    </div>
</body>

</html>

JavaScript代码

var oBox = document.getElementsByTagName('div')[0];
console.log(oBox.offsetLeft); // 到文档左侧的距离
console.log(oBox.offsetTop); // 到文档顶部的距离
console.log(oBox.offsetWidth); // 获取盒子的实际占位宽度(border+contentWidth+padding)
console.log(oBox.offsetHeight); // 获取盒子的实际占位高度(border+contentHeight+padding)
console.log("-------------------------------------");
var spanTag = document.getElementsByTagName('span')[0];
console.log(spanTag.offsetLeft); // 到父盒子左侧的距离(前提是父盒子有定位，没定位则直接索引到body)
console.log(spanTag.offsetTop); // 到父盒子顶部的距离(前提是父盒子有定位，没定位则直接索引到body)
console.log(spanTag.offsetWidth); // 获取span的实际占位宽度(border+contentWidth+padding)
console.log(spanTag.offsetHeight); // 获取span的实际占位高度(border+contentHeight+padding)
console.log(spanTag.offsetParent); // 相对父级元素（默认指向body）

1.2、滚动scroll

scroll是长卷纸，卷轴的意思，表示浏览器滚动时元素的卷曲值。

scrollHeight和scrollWidth
- 代表获容器内部可滚动的宽度和高度（width/height + padding）
- 包括由于溢出而无法展示在网页的不可见部分
scrollTop和scrollLeft
- 相对父盒子，元素向上/向左滚动的距离
**document.documentElement.scrollTop **

新方法window.pageYOffset( 兼容IE9+)
- html网页被卷去的距离
window.scrollTo(x,y)方法

window.scrollTo({left:xx,top:xx,behavior:“smooth”})
- 窗口跳转到指定的坐标x，y 方法
- left相当于x，top相当于y，behavior跳转行为 smooth 平滑的

html和css代码

<!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;
        }

        #box {
            width: 200px;
            height: 200px;
            overflow: auto;
        }

        #content {
            width: 300px;
            height: 300px;
            background: #ccf;
            border: 1px solid #000;
            padding: 2px;
        }
    </style>
</head>

<body>
    <div id="box">
        <div id="content">
            <p> 客户：“这个图下班之前必须发给我！” 设计师：“好的！” 
                第二天清早。 客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”。
                客户：“这个图下班之前必须发给我！” 设计师：“好的！” 
                第三天清早。客户：“图怎么还没发过来？” 设计师：“我还没下班呢…”</p>
        </div>
    </div>
    <button id="btn">按钮</button>
</body>

</html>

JavaScript代码

var oBox = document.getElementById('box');
var oContent = document.getElementById('content');
var oBtn = document.getElementById("btn")
console.log(oContent.scrollWidth); // 内容盒子的可滚动宽度
console.log(oContent.scrollHeight); // 内容盒子的可滚动高度

console.log(oBox.scrollWidth); // 限定了宽高的父盒子中，其内容盒子可滚动的宽度
console.log(oBox.scrollHeight); // 限定了宽高的父盒子中，其内容盒子可滚动的高度

oBtn.onclick = function () {
    console.log("-------------------------");
    console.log(oBox.scrollTop); // 获取内容盒子相对于父盒子已经滚动了多少高度
    console.log(oBox.scrollLeft); // 获取内容盒子相对于父盒子已经滚动了多少宽度
}

1.3、客户区client

client获取的是元素的可视区域

clientWidth和clientHeight
- 不包含border在内的实际宽度（width/height + padding）
clientLeft和clientTop
- 打印出盒子左侧边框/顶部边框的厚度
- 几乎不用

二、定时器

2.1、单次定时器

语法：

// 单次定时器，只能执行一次
setTimeout(function () { },time);
//  参数1：function 必需。函数，过time时间之后执行的业务逻辑。
//  参数2：time 可选。执行或调用 function 需要等待的时间，以毫秒ms计。默认为 0。1s=1000ms

// 清除setTimeout单次定时器
clearTimeout(定时器名称);

代码示例：

var timer = setTimeout(function () {
    console.log("单次定时器");
}, 2000);

//点击按钮清除定时器
var btn = document.getElementById("btn");
btn.onclick = function () {
    clearTimeout(timer);
    console.log("清除定时器");
}

2.2、循环定时器

语法：

// 循环定时器，不停歇，每过一段时间time，执行一次。
setInterval(function () { },time);
// 参数同setTimeout

// 清除setInterval循环定时器
clearInterval(定时器名称);

代码示例：

var timer = setInterval(function () {
    alert("循环定时器");
},2000);

//点击按钮清除定时器
var btn = document.getElementById("btn");
btn.onclick = function () {
    clearInterval(timer);
}

例子：设置div的宽度

html和css代码

<!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;
        }

        div {
            width: 200px;
            height: 150px;
            background-color: red;
            border-radius: 100px;
        }
    </style>
</head>

<body>
    <button id="btn">变宽</button>
    <div id="dv"></div>
</body>

</html>

JavaScript代码

 get_id("btn").onclick = function () {
     // 初始宽度
     var width = 200;
     // 开启定时器
     var timer = setInterval(function () {
         // 每次加10
         width += 10;
         // 设置临界值，最大只能是800
         if (width >= 800) {
             // 清除定时器
             clearInterval(timer);
         }
         // 实时设置div宽度
         get_id("dv").style.width = width + "px";
     }, 20);
 };

例：随机点名系统

html和css代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>随机点名系统</title>
    <style>
        body {
            background-color: hotpink;
        }

        .box {
            width: 1000px;
            height: 240px;
            margin: 0 auto;
            margin-top: 100px;
            clear: both;
        }

        #btn {
            width: 100px;
            height: 30px;
            margin-left: 600px;
            margin-top: 50px;
        }

        .name {
            width: 100px;
            height: 30px;
            float: left;
            background-color: antiquewhite;
            margin-left: 10px;
            margin-top: 10px;
            text-align: center;
            line-height: 30px;
        }

        h1 {
            text-align: center;
        }
    </style>

</head>

<body>
    <h1>随机点名系统</h1>
    <div class="box" id="box"></div>
    <button id="btn">点名</button>

</body>

</html>

JavaScript代码

//创造虚拟后台数据
var arrs = ["宋江", "卢俊义", "吴用", "公孙胜", "林冲", "花荣", "鲁智深", "武松", "李逵", "晁盖", "燕青", "潘金莲", "阎婆惜", "关胜", "秦明", "呼延灼", "陈达", "张青", "刘唐", "李俊", "张顺", "高俅", "孙二娘", "戴宗", "朱仝", "方腊", "阮小二", "李瓶儿", "庞春梅", "白胜", "吕方", "董平", "穆春", "宋清", "柴进", "施恩", "李忠", "周通", "杜兴", "时迁", "曹正", "宋万", "杨志", "镇关西", "西门庆"];

// 创建姓名列表
arrs.forEach(function (item, index) {
    // console.log(item,index);
    var nameNode = document.createElement("div");
    nameNode.innerText = item;
    nameNode.className = "name";
    get_id("box").appendChild(nameNode);
})

// 点名功能
var timer =null;
get_id("btn").onclick = function () {
    if (this.innerText === "点名") {
        // 开启定时器
        timer = setInterval(function () {
            // 清空所有颜色 排他
            for (var i = 0; i < arrs.length; i++) {
                get_id("box").children[i].style.background = "";
            }
            // 留下当前颜色
            var random = parseInt(Math.random() * arrs.length);
            get_id("box").children[random].style.background = "red";
        }, 10);
        this.innerText = "停止";
    } else {
        //清除计时器
        clearInterval(timer);
        this.innerText = "点名";
    }
}