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. re模块相关介绍

    re模块 模块和实际工作时间的关系 time模块和时间是什么关系?re模块和正则表达式的关系? 有了re模块就可以在python语言中操作正则表达式 正则表达式 1:什么是正则表达式? 一套规则--- ...

  2. 2月27日Android开发学习

    App工程目录结构 App工程分为两个层次,第一个层次是项目,另一个层次是模块. 模块依附于项目,每个项目至少有一个模块.一般而言的"编译运行App",指的是运行某一模块,而非运行 ...

  3. Tomcat和Maven安装与配置

    链接:https://pan.baidu.com/s/1aezz2pfCn0DCCPw8udQFXA 提取码:wd4f 一.网站发布1.1.为什么要用tomcat网页开发好了,该如何发布呢?我们需要一 ...

  4. poi读取Excel文件,数字变成科学计数法及数字自动带上“.0”的处理办法

    解决poi解析excel遇到数值类型科学计数问题 NumberFormat nf = NumberFormat.getInstance();HSSFCell cell= hssfRow.getCell ...

  5. window nginx php ci框架环境搭建

    下载nginx 后修改配置文件: location / { #try_files $uri $uri/ /index.php?$query_string; root C:\Software\serve ...

  6. PCRaster安装

    改了很久才import成功.期间查了不少东西,虽然大部分没用上,但还是记录一下. PCRaster的安装和个人的最终解决方法 Software for environmental modelling ...

  7. iframe页面加载完成为什么还是获取不到里面的dom

    iframe页面加载完成为什么还是获取不到里面的dom? 因为Iframe是跨域,跨域的情况下是无法获取到iframe里面的DOM的,即使iframe加载完成,也无法获取到里面的DOM. 有什么方法获 ...

  8. MobaXterm注册认证版,亲测可用,操作简单(本机已安装python3环境)

    去github地址下下载代码 解压后在该目录下打开CMD 执行MobaXterm-Keygen.py <UserName> <Version>命令 生成的文件放在安装目录下,我 ...

  9. CH573 CH582 CH579蓝牙从机(peripheral)例程讲解三(蓝牙服务修改)

    修改服务需要对蓝牙比较熟悉的工程师去完成,否则在例程功能满足自己需求时,不建议修改,很容易改错,下面就简单介绍下如何在别的char添加一个nofify属性. step1: 给Simple Profil ...

  10. CH573 CH582 CH579外设ADC例程讲解

    在adc的例程中共有六种AD测量,1.温度测量,2.单通道测量,3.DMA单通道测量,4.差分通道测量,5.触摸按键测量,6.中断方式单通道测量,接下来我们逐一描述. 粗调:粗调使得用0db测量VIN ...