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. python基础篇 13-模块的导入 安装第三方模块

    一.模块 一个python文件就是一个模块 标准模块(内置模块) 第三方模块 需要自己安装的 自己写的 需要导入的 import 一个模块的实质: 实际上就是把一个py文件从头到尾执行了一遍,main ...

  2. Day09-参数+递归

    参数+递归 一.命令行传参 有时候你希望运行一个程序时候再传递给它消息.这要靠传递命令行参数给main()函数实现 public class CommandLine{ public static vo ...

  3. HTTP协议中的长连接和短链接

    一.概念 HTTP长连接,也称持久连接,是使用同一个TCP连接来发送和接受多个HTTP请求/应答,而不是位每一个新的请求/应答打开新的TCP连接.这种方式由于通信连接一直存在,此种方式常用于P2P通信 ...

  4. docker build提示 error checking context:can't stat xxx

    这个提示基本是权限不够外加目录结构不对,保险的做法直接删除 Dockerfile. 正确做法:(可能还有其他的解决方案吧,这个可以生效) 重新建个目录,给目录授权,然后再dockerfile文件夹中建 ...

  5. 在 Linux 上使用《算法》第4版官网中的 algs4.jar 包

    使用<算法>第4版( Algorithms Fourth Edition ) 中的 algs4.jar 包 下载 algs4.jar 官网网址: https://algs4.cs.prin ...

  6. uni-app微信小程序文本框计数功能

    <view> <textarea placeholder="请输入" @input="sumfontnum" :maxlength=" ...

  7. Vue Element使用第三方图标(iconfont阿里矢量图标库)

    在  www.iconfont.cn 中搜索图标并加入购物车然后添加至项目,编辑项目名称 然后将项目下载至本地解压后将如下文件复制移到到  src/assets/icon中, 并把iconfont.c ...

  8. xml与DataSet互转

    //将DataSet转换为xml字符串   public static string ConvertDataSetToXMLFile(DataSet xmlDS, Encoding encoding) ...

  9. OSIDP-单处理器调度-09

    处理器调度的类型 处理器调度的目的是为了满足系统的目标,将进程分配到处理器上执行. 系统并发度:正等待处理器处理的进程个数.(这里的表述和08里面的不同,以这里为准.主要是懒得改,见谅= =) 长程调 ...

  10. vscode设置终端主题,设置终端选中颜色

    vscode定义主题色官网: https://code.visualstudio.com/api/references/theme-color#integrated-terminal-colors 问 ...