BOM初了解

最新推荐文章于 2024-08-10 21:46:55 发布

轨迹oc

最新推荐文章于 2024-08-10 21:46:55 发布

阅读量78

点赞数

分类专栏：笔记文章标签：前端 javascript 服务器

本文链接：https://blog.csdn.net/weixin_52417433/article/details/115841152

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

BOM

load等页面内容全部加载完毕，包含dom元素，图片， flash CSS等

    DOMContentLoaded是DOM加载完毕， 不包含图片， falsh等可以执行， 加载速度比load快

setTimeout计时器
window.setTimeout(调用函数，延时时间);
window在调用的时候可以省略
延时时间单位是毫秒
所调用的函数直接写函数名,或者"函数名()"

<script>
function jay() {
   alert('你好');
}
setTimeout(jay, 3000);
</script>

停止计时器
clearTimeout（计时器名称）
setInterval定时器
window.setInTerval(回调函数，间隔的毫秒时间);
每隔所给的间隔的时间就输出，会重复调用

停止计时器
clearInterval();
发送短信案例

<body>
	手机号：<input type="number"><button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 10;
        btn.addEventListener('click', function() {
            btn.disabled = true;
            var timer = setInterval(function() {
                if (time == 0) {
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                    time = 3;
                } else {
                    btn.innerHTML = '还剩下' + time + ' 秒 ';
                    time--;
                }
            }, 1000);
        })
    </script>
</body>

js执行机制
1.先执行执行栈中的同步任务
2.异步任务（回调函数）放入任务队列当中
3.一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列当中的异步任务，于是被读取的异步任务结束等待状态，进入执行栈开始执行。

location对象
URL的一般语法格式；

protocol://host[:port]/path/[?query]#fragment
http://www.itcast.cn/index.html?name=andy&age=18#link

组成	说明
protocol	通信协议常用的http，ftp，maito
host	主机（域名）www.itheima.com
port	端口号可选，省略时使用方案的默认端口如http的默认端口为80
path	路径由零或多个’/'符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址
query	参数以键值对的形式，通过&符号来分隔开
fragment	片段 #后面内容常见于链接锚点
location对象的属性
location对象属性	返回值
–	–
location.href	获取或者设置整个URL
location.host	返回主机（域名）www.itheima.com
location.port	端口号如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段 #后面内容常见于链接锚点

substr(‘起始位置’，截取几个字符)；

location对象的方法

location对象的方法	返回值
location.assign()	跟href一样，可以实现跳转页面（也称为重定向页面）
location.replace()	替换当前页面，因为不记录历史，所以不能后退页面
location.reload()	重新加载页面，相当于刷新按钮或者F5，如果参数为true强制刷新ctrl+f5
pageshow事件重新加载页面触发的事件
元素偏移量offset系列（可以动态获得位置）

获取元素距离带有定位父元素的位置,如果没有就以body为准
获得元素自身的大小（宽度高度）
返回值都不带单位
offsetTop/offsetLeft

offset系列属性	作用
elment.offsetParent	返回作为元素带有定位的父级元素，如果父级都没有定位则返回body
elment.offsetTop	返回元素带有定位父元素上方的偏移
elment.offsetLeft	返回元素相对带有定位元素左边框的偏移
elment.offsetWidth	返回自身包括padding，边框，内容区的宽度，返回数值不带有单位
elment.offsetHeight	返回自身包括padding，边框，内容区的高度，返回数值不带有单位
实现盒子跟随鼠标拖拽效果

<!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>javascript</title>
</head>
<style>
    .box {
        height: 400px;
        width: 400px;
        background-color: rgb(110, 233, 206);
        display: none;
        transform: translate(-50%, -50%);
        position: fixed;
        left: 50%;
        top: 50%;
        text-align: center;
    }
</style>
<script>
    window.onload = function() {
        var btn = document.querySelector('btn');
        var box = document.querySelector('.box');
        var box1 = document.querySelector('#box');
        var btn = addEventListener('click', function() {
            box.style.display = 'block';
        });
        box1.addEventListener('mousedown', function(e) {
            var x = e.pageX - box1.offsetLeft;//鼠标位置减去盒子相对页面的位置，即鼠标（在盒子内部）到盒子的左距离
            var y = e.pageY - box1.offsetTop;//鼠标到盒子的上距离
            document.addEventListener('mousemove', move)

            function move(e) {
                box.style.left = e.pageX - x + 'px';//用鼠标位置减去，鼠标到盒子的距离，即获得实时变化的盒子到页面的左距离。
                box.style.top = e.pageY - y + 'px';//获得实时变化的盒子到页面的上距离。
            }
            document.addEventListener('mouseup', function() {

                document.removeEventListener('mousemove', move)
            })
        })
    };
</script>

<body>
    <p id="btn">请点击我!!!
        <div class="box" id='box'>
            <span>拖拽</span>
        </div>
    </p>
</body>

client系列

client系列属性	作用
element.clientTop	返回元素上边框的大小
element.clientLeft	返回元素左边框的大小
element.clientWidth	返回自身包括padding，内容区的宽度，不含边框，返回数值不带单位
element.clientHeight	返回自身包括padding，内容区的高度，不含边框，返回数值不带单位
立即执行函数
多个立即执行函数用逗号隔开

写法:（function(a,b){
		}) (1,2);
		或者
	(function(a,b){
	}(1,2));

scroll系列

scroll系列属性	作用
elment.scrollTop	返回被卷上去的测距离，返回数值不带单位
elment.scrollLeft	返回被卷上去的测距离，返回数值不带单位
elment.scrollWidth	返回自身实际的宽度，不含边框，返回数值不带单位
elment.scrollHeight	返回自身实际的高度，不含边框，返回数值不带单位

页面被卷去头部：可以用window.pageYOffset 获得，被卷去的左侧：window.pageXOffset

动画实现原理
核心原理：通过定时器setInterval()不断移动盒子