window.onload / onscroll/onresize 事件
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 事件的更多相关文章
- Window.onLoad 和 DOMContentLoaded事件的先后顺序
相信写js的,都知道window.onload吧,但是并不是每个人都知道DOMContentLoaded,其实即使你不知道,很有可能你也经常使用了这个东西. 一般情况下,DOMContentLoade ...
- Window.onload事件
window.onload是一个事件,当文档加载完成之后就会触发该事件,可以为此事件注册事件处理函数,并将要执行的脚本代码放在事件处理函数中,于是就可以避免获取不到对象的情况
- window.onload用法详解:
网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本代码放在网页的底端,这样在运行脚本代 ...
- 网站开发进阶(十三)window.onload用法详解
window.onload用法详解 网页中的javaScript脚本代码往往需要在文档加载完成后才能够去执行,否则可能导致无法获取对象的情况,为了避免这种情况的发生,可以使用以下两种方式: 一.将脚本 ...
- window.onload和3的小游戏
window.onload出现的原因? 我们都知道页面的代码顺序是从上往下进行加载,很多时候我们要对页面中的某一个模块进行操作,这时候我们常常使用javascript代码来进行操作.为了能够保证操作 ...
- js中一个标签在按顺序执行没有被读取到时可以用window.onload
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!DOCTYPE html PUBLIC " ...
- js动态添加onload、onresize、onscroll事件(另类方法)
js动态添加onload.onresize.onscroll事件(另类方法) window 的 onload.onresize.onscroll 事件,跟其他的事件不一样,它不能用 attachE ...
- onscroll事件,onresize事件
js获取页面元素高度.宽度 网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; 网页可见区域宽: do ...
- 浏览器事件window.onload、o…
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
- [转载]浏览器事件window.onload、onfocus、onblur、ons
原文地址:浏览器事件window.onload.onfocus.onblur.onscroll和resize作者:lilyxiao <html> <head> <titl ...
随机推荐
- Day10-数组
数组 一.什么是数组 数组是相同数据类型的有序集合 数字描述的是相同类型的若干个数据,按照一定的先后次序排列组合而成 其中.每一个数据称作一个数组元素,每个数组元素可以通过一个下表来访问它们 二.数组 ...
- 前端常用函数(find、includes、filter、Set、forEach、map、some、every、findIndex、splice、reduce)
https://blog.csdn.net/qq_24280125/article/details/119275109 array.join(separator) .拼接返回字符串 参数 separa ...
- Windows,easygui 安装
在官网下载了easygui,但是根据网上的方法解压后将 easygui 文件夹(创建文件:easygui,只放easygui.py)放到Python36\Lib\site-packages下不行,有模 ...
- java.io.IOException: Cannot run program "phantomjs": CreateProcess error=2, 系统找不到指定的文件
一.问题 运行该指令的程序找不到phantomjs这个指令 二.解决 1.配置全局变量 注意!!! 要配置系统变量,只配置用户变量,可能还会出现该错误.ps:我就是只配置用户变量,导致一直出错... ...
- vue npm安装指令汇总
1.elmentui:npm i element-ui -S 2.打印插件:npm install vue-print-nb --save 3.时间转换插件Moment:npm install mom ...
- UE C++教程之接口 UINTERFACE
我是谁不重要,重要的是,我能做什么. 近期笔者在进行UE的开发时,实现多武器的换弹与开火需要用到接口.而笔者以前是做Unity开发的,遂没有使用过UE C++的UINTERFACE,而这个接口在使用过 ...
- ARP协议 路由器原理
ARP协议 路由器原理 1 广播与广播域 广播:将广播地址作为目的地址的数据帧 广播域:网络中能够接收到同一个广播所有节点的集合(在这里广播域越小越好) 交换机控制不了广播 路由器可以控制广播 ...
- C 语言 数制
C 语言 数制 数制也称计数制,是指用一组固定的符号和统一的规则来表示数值的方法.计算机处理的信息必须转换成二进制形式数据后才能进行存储和传输.计算机中,经常使用的进制有二进制.八进制.十进制.十六进 ...
- SQL Server 错误:特殊符号“•”导致的sql查询问题
问题描述: 对于一些标题或字符串,例如: 如果导入数据库,就会发现会自动变成?号了: 在进行SQL查询的时候,会出现一个同一条sql语句在mysql直接执行sql可以查询到,但是mssql进行查询的时 ...
- 二维Svg转矢量 不支持Svg2.0
import { ElMessage } from 'element-plus' import { parse } from 'svgson' import JsonToView from './vi ...