JavaScript——BOM（笔记）

    window.onload = function(){ // onload等页面加载完毕执行
    	alert('窗口加载事件'); // 阔以放到页面任何位置
    }

    window.addEventListener("load",function(){
    	alert('窗口加载事件'); // 与onload相同
    })

    document.addEventListener("DOMContentLoaded",function(){ 
    	alert('窗口加载事件'); // 主要的DOM 标签 加载完毕后执行 不包括图片，
    })

    window.onresize = function(){ // onresize 浏览器窗口发生改变时触发
    	console.log(window.innerWidth); // 当前浏览器屏幕的宽度
    }

    window.addEventListener('resize',function(){
    	console.log(window.innerWidth); // 当前浏览器屏幕的宽度
    })

    window.setTimeout(function(){
    	alert('调用1次'); // 处理函数
    },2000) // 延迟时间

    var btn = document.querySelector("button");
    var timer = setTimeout(function(){ // timer 是代表着这个定时器
    	alert('爆炸了');
    },3000) // 延迟时间
    btn.addEventListener("click",function(){ 
    	clearTimeout(timer); // 清除timer这个定时器
    })

    window.setInterval(function(){
    	alert('调用多次')
    },2000) // 延迟时间

    var btn = document.querySelector("button");
    var timer = window.setInterval(function(){ // timer 代表这个定时器
    	alert('调用多次')
    },2000) // 延迟时间
    btn.addEventListener("click",function(){
    	clearInterval(timer); // 清除timer这个定时器
    })

    console.log(1);
    document.onclick = function(){
    	console.log('click');
    }
    console.log(2);
    setTimeout(function(){
    	console.log(3);
    },3000) 
    // 先执行同步 1 , 2 在将点击事件和定时器提交给异步任务 当点击了就输出 click 3秒后输出 3
    // 1 2 click 3 或 1 2 3 click

    <form action="JavaScript.html"> <!-- 在另一页面实现表单跳转功能 -->
    	<input type="text" name="username" />
    	<input type='submit'/>
    </form>

    var div = document.querySelector("div");
    var str = location.search.substr(1); // 获取另一页面的参数 ?username=luokong 截取字符串
    var arr = str.split('='); // 通过 = 将字符串分隔成数组
    console.log(str); // username=luokong
    console.log(arr); // [username,luokong]
    div.innerHTML = arr[1] + '欢迎你的登录' // 修改div的内容

    var btn = document.querySelector('button');
    btn.addEventListener("click",function(){
    	// location.assign('http://www.baidu.com'); // 实现跳转功能
    	// location.replace('http://www.baidu.com'); // 实现跳转不记录历史
    	location.reload(); // 刷新页面
    })

    if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
     } else {
    window.location.href = "";     //电脑
     }

    .father {
    	width: 400px;
    	height: 200px;
    	background-color: pink;
    	position: absolute; /* 父元素代定位 */
    }
    .son {
    	width: 200px;
    	height: 100px;
    	margin-top: 50px;
    	margin-left: 50px;
    	border: 5px solid red;
    	background-color: blue;
    }

    <div class="father">
    	<div class="son"></div>
    </div>

    var son = document.querySelector('.son');
    console.log(son.offsetParent); // 父元素有定位返回父元素 没有返回body
    console.log(son.offsetTop); // 元素距父元素的上边距 50
    console.log(son.offsetLeft); // 50
    console.log(son.offsetWidth); // 210 包括边框
    console.log(son.offsetHeight); // 110

    .box {
    	width: 200px;
    	height: 100px;
    	background-color: pink;
    	border-left: 5px solid red;
    	border-top: 10px solid red;
    }

    <div class="box"></div>
    <script type="text/javascript">
    	var box = document.querySelector('.box');
    // client 与 offset 类似 区别在于不带边框
    	console.log(box.clientTop); // 获取上边框
    	console.log(box.clientLeft); // 获取左边框
    	console.log(box.clientWidth); // 获取宽度不带边框
    	console.log(box.clientHeight); // 获取高度不带边框
    </script>

    <textarea class="box">
    	我是内容我是内容我是内容我是内容
    	我是内容我是内容我是内容我是内容
    	我是内容我是内容我是内容我是内容
    	我是内容我是内容我是内容我是内容
    </textarea>
    <script type="text/javascript">
    	var box = document.querySelector('.box');
    	console.log(box.scrollHeight); // 返回文字自身的宽度
    	console.log(box.scrollWidth); // 返回文字自身的高度
    	box.addEventListener('scroll',function(){ // scroll 滚动事件
    		console.log(box.scrollTop); // 被卷上去的距离
    	})
    </script>

    document.addEventListener('scroll',function(){
    	console.log(window.pageYOffset); // 页面距顶部的距离
    })

    (function(){
    	alert("666666")
    })() // 立即执行
    (function(){
    	alert('888888')
    }())

    function animate(obj,times,main){//对象，距离，回调函数
    	clearInterval(obj.timer);//清除原先的定时器
    	obj.timer = setInterval(function(){
        // (目标值 - 现在的位置) / 10 每次的步长
        // 100 - 0 / 10 = 10
        // 100 - 10 / 10 = 9 
    		var step = (times - obj.offsetLeft) / 10;//缓动
    		step = step > 0 ? Math.ceil(step) : Math.floor(step);//取整
    		if(obj.offsetLeft == times){ // 当目标值 = 现在的位置 结束
    			clearInterval(obj.timer);
    			if(main){
    				main();//结束时调用回调函数
    			}
    		}
    		obj.style.left = obj.offsetLeft + step +'px';
    		//均速 //缓动递减
    	},30);
    }

    // 开始为true执行前关闭false 结束后为true
    var t = null;
    $(function(){
    	$(document).on('mousemove',function(e){
    	//鼠标移动时改变位置
    	if(t){ // 有定时器就不执行
    		return 
    	}
    	console.log('1s')
    	t = setTimeout(function(){
    		$("#img").css("left",e.pageX + 'px')
    		$("#img").css("top",e.pageY + 'px');
    		t = null;// 执行完开启节流
    		},50)
    	})			
    })

    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
    console.log(localStorage.getItem('username'));
    var ipt = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var del = document.querySelector('.del');
    set.addEventListener('click', function() {
    	// 当我们点击了之后，就可以把表单里面的值存储起来
    	var val = ipt.value;
    	sessionStorage.setItem('uname', val);
    	sessionStorage.setItem('pwd', val);
    });
    get.addEventListener('click', function() {
    	// 当我们点击了之后，就可以把表单里面的值获取过来
    console.log(sessionStorage.getItem('uname'));
    });
    remove.addEventListener('click', function() {
    	sessionStorage.removeItem('uname');
    });
    del.addEventListener('click', function() {
    	// 当我们点击了之后，清除所有的
    	sessionStorage.clear();
    });
    </script>

    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="del">清空所有数据</button>
    <script>
    var ipt = document.querySelector('input');
    var set = document.querySelector('.set');
    var get = document.querySelector('.get');
    var remove = document.querySelector('.remove');
    var del = document.querySelector('.del');
    set.addEventListener('click', function() {
        var val = ipt.value;
        localStorage.setItem('username', val);
    })
    get.addEventListener('click', function() {
        console.log(localStorage.getItem('username'));
    })
    remove.addEventListener('click', function() {
        localStorage.removeItem('username');
    })
    del.addEventListener('click', function() {
        localStorage.clear();
    })
    </script>