onload当文档加载完成后执行一些操作
window.onload = function(){
console.log("页面加载完成")
} onscroll当页面发生滚动时执行一些操作
window.onload = function(){
console.log(1) //当页面发生滚动时,打印1
} onresize当窗口大小发生改变时执行一些操作
window.onresize = function(){
console.log(1) //当窗口大小发生改变时,打印1
}
页面滚动条距离顶部的距离
document.documentElement.scrollTop
页面滚动条距离左边的距离
document.documentElement.scrollLeft

demo: 做一个滚动条
var obox=document.querySelector(".box1")  //点击的盒子
var t;
obox.onclick=function () {
t=setInterval(function () {
var s=document.documentElement.scrollTop-=50 //设置定时器每0.01毫秒减少50
console.log(document.documentElement.scrollTop)
if(s<=0){ //减少为0时关闭计时器
clearInterval(t)
}
},10)
}

window.onload / onscroll/onresize 事件的更多相关文章

  1. Window.onLoad 和 DOMContentLoaded事件的先后顺序

    相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...

  2. Window.onload事件

    window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况

  3. window.onload用法详解:

    网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...

  4. 网站开发进阶(十三)window.onload用法详解

    window.onload用法详解 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本 ...

  5. window.onload和3的小游戏

    window.onload出现的原因?  我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作.为了能够保证操作 ...

  6. js中一个标签在按顺序执行没有被读取到时可以用window.onload

    <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC " ...

  7. js动态添加onload、onresize、onscroll事件(另类方法)

    js动态添加onload.onresize.onscroll事件(另类方法)   window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...

  8. onscroll事件,onresize事件

    js获取页面元素高度.宽度 网页可见区域宽: document.body.clientWidth;  网页可见区域高: document.body.clientHeight;  网页可见区域宽: do ...

  9. 浏览器事件window.onload、o…

    原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...

  10. [转载]浏览器事件window.onload、onfocus、onblur、ons

    原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...

随机推荐

  1. C#函数编程学习

    知识补缺 //用Func委托写简单函数 Func<int,int> add = i => i + 1; //定义一个只读属性 public class Tea { public Te ...

  2. 使用@Param注解时注意org.springframework.data.repository.query.Param与org.apache.ibatis.annotations.Param的区别

    注解@Param有以下两种: 1.Spring org.springframework.data.repository.query.Param 2.mybatis org.apache.ibatis. ...

  3. 通过Linux的socket套接字实现客户端与服务器端的通信

    具体案例:使用树莓派ds18b20温度传感器实现温度上报 首先需要获得传感器文件中保存的温度信息: 温度信息通常保存在路径为"/sys/bus/w1/devices/28-xxxxxxxxx ...

  4. dos的使用

    打开cmd的方式 开始+系统+命令提示符 win+r,输入cmd 在任意的文件夹下面,按住shift键+鼠标右键点击,在此处打开命令运行窗口 打开我的电脑 在资源管理器的地址栏前面加上cmd路径 常用 ...

  5. Java中继承相关知识点

    继承 1.继承概述 继承是面向对象的三大特征之一.可以使得子类具有父类的属性和方法,还可以在子类中重新定义,追加属性和方法 1.1 继承的格式 格式:public class 子类名 extends ...

  6. 20193314白晨阳《Python程序设计》实验四 Python综合实践

    课程:<Python程序设计> 班级: 1933 姓名: 白晨阳 学号:20193314 实验教师:王志强老师 实验日期:2021年6月13日 必修/选修: 公选课 实验内容: Pytho ...

  7. CentOS7 yum方式安装mysql 5.7

    1.检查服务器上有没有安装mysqlyum安装方式:yum list installed mysql*yum卸载 yum remove 已安装的包卸载完安装包后,删除安装文件rm -rf /var/l ...

  8. String类、StringBuffer类、StringBuilder类

    String类.StringBuffer类.StringBuilder类 String类的创建 // 方式一 直接赋值 String s = "woshihaoren"; // 方 ...

  9. springboot项目导出excel实现

    参见:https://blog.csdn.net/duli_0105/article/details/102809936

  10. promise一脸懵逼...

    // 要求:封装一个方法,能根据路径读取文件,并把内容返回 const fs=require('fs') const path=require('path') 1. 普通读取文件的方式 1 const ...