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. Vue双向绑定原理 从vue2的Object.defineProperty到vue3的proxy

    在网上查找资料的时候,看到很多关于Vue双向绑定的文章都直接说是通过Object.defineProperty实现的,但我隐约记得去年看过尤大的视频,记得好像是用proxy实现的,所以又好好找了一下, ...

  2. count(1) and count(*),count(字段)区别及效率比较

    执行结果: count(1)和count(*)之间没有区别,因为count(*)count(1)都不会去过滤空值, count(字段) 会统计该字段在表中出现的次数,忽略字段为null 的情况.即不统 ...

  3. 关于DELL服务器风扇远程控制失效

    关于DELL服务器风扇远程ipmitool控制失效 去年12月,公司突然断电,公司有一台DELL 720XD服务器,自从断电之后,使用ipmitool命令行控制风扇速度就失效了,因为之前忙其他的项目, ...

  4. JS Math与一些原始类型

    镇楼图 Pixiv:DSマイル 一.值属性.函数 globalThis JS有全局对象,但是在不同环境中全局对象均不同.在Web环境中,window.self.frames取得全局对象,在Web Wo ...

  5. Hive 操作与应用 词频统计

    一.hive用本地文件进行词频统计 1.准备本地txt文件 2.启动hadoop,启动hive 3.创建数据库,创建文本表 4.映射本地文件的数据到文本表中 5.hql语句进行词频统计交将结果保存到结 ...

  6. go写文件常用方法

    注意:打开文件,一定记得关闭 file, err := os.OpenFile(name, flag, perm) defer file.Close() 一.打开文件|创建 1.os.OpenFile ...

  7. [cisco]Configure private VLAN

    vlan 100 private-vlan isolated ! vlan 200 private-vlan community ! vlan 300 private-vlan primary pri ...

  8. ARMV8 short notes

    offset addressing pre-index addressing define like: load the compass content of the operand 2 to ope ...

  9. Java集合框架个人总结

    Java集合框架个人总结 集合主要分为两大类:①单列集合Collection ②双列集合Map 集合存储的都是引用类型,不可是基础类型,如果保存基础类型需要用包装类. 1.Collection接口 ​ ...

  10. Docker 容器的备份和迁移

    Docker的Save和Export的区别 Docker的镜像和容器有两种方式导出 Docker Save镜像方法,会保存该镜像的所有历史记录,包括数据 1.创建快照 使用 docker commit ...