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. RStudio中有常用的快捷键

    1.常用快捷键 转自:https://blog.csdn.net/swuteresa/article/details/8649067 2.RStudio中如何撤销上一步操作: 一般运行过的程序都会在H ...

  2. DAST 代码分析

    DA部分 输入图片大小: images.size: torch.Size([1, 3, 512, 1024])labels.size: torch.Size([1, 512, 1024]) input ...

  3. 关于*p++的执行顺序

    不确定*p++哪个优先级高了,想偷懒到百度找找解释,发现高赞的评论下也骂声一片,还是回头自己试试. 1 #include <iostream> 2 using namespace std; ...

  4. IDEA 启动SpringBoot项目或Spring项目出现程序包XXX不存在

    该方法是在你的pom中的依赖(是否缺少,版本是否兼容)maven仓库等配置没有问题的情况下 第一种方法: 打开IDEA底部的终端Terminal,输入"mvn idea:idea" ...

  5. angular 父组件调用子组件的方法

  6. 01. JavaScript基础知识

    一.JavaScript简介   JavaScript 是一门解释型编程语言,解释型编程语言指代码不需要手动编译,而是通过解释器边解释边执行.所以,要运行 JS,我们需要在计算机中安装 JS 的解释器 ...

  7. BubbleSort,冒泡排序,C++非递归和递归实现

    1 // g++ bubble_sort.cc -Wall -O3 && ./a.exe 2 3 4 #include <iostream> 5 #include < ...

  8. 点击按钮触发div颜色改变的几种写法

    目录 JavaScript 行内事件 onclick绑定 关于选取元素 关于改变颜色 addEventListener jQuery 获取元素 绑定事件 设置样式 css() 添加class Vue ...

  9. 精通Spring 4.x 企业应用开发实战- 1.6 新特性

  10. 使用angular/cli新建一个angular项目

    1.打开cmd,进入你代码保存的文件夹,你想把新建的项目保存在哪个文件夹,即进入哪个文件夹: 我把文件放到这里: 然后,使用下面的命令创建项目: // ng new 项目名称,如下示例:创建名为 he ...