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 ...
随机推荐
- AutoCAD2018_64bit
「AutoCAD_2018_Simplified_...hinese_Win_64bit」https://www.aliyundrive.com/s/eiLscbxkMui 点击链接保存,或者复制本段 ...
- mac 安装 nginx 流程,并解决前端跨域问题
mac 安装 nginx 流程 首先mac安装brew包管理工具: /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN ...
- 阿里云下载ssl证书
"request合法域名"跟上面CA证书中申请的二级域名一致. Springboot增加证书 创建Springboot项目. 解压缩后,证书文件4375838_wechat.abc ...
- JS笔记(三):函数与对象
镇楼图 Pixiv:torino 四.Function类型 Rest语法 一些函数如Math.max可以支持任意数量的参数,JS中对于这样的参数可以简单使用...来实现,使用剩余参数,它支持收集剩余的 ...
- thymeleaf基础学习
Thymeleaf 1.标准表达式 ${...}:变量表达式 *{...}: 选择表达式 #{...} : 消息表达式 @{...}: 连接表达式 <img th:src="@{url ...
- python-文件和文件夹操作
1.os模块 import os 方法 功能说明 access(path,mode) 测试是否可以按照mode指定的权限访问文件 chdir(path) 把path设为当前工作目录 chmod(pat ...
- web之jquery
jquery 插件 下载解压插件 加载jQuery 加载插件 插件样式 按照使用例子给元素添加类名,id,函数.
- applicationContext使用注解代替
创建一个类SpringConfig @Configuration//证明这个类是spring的配置文件类 @ComponentScan("com.itheima")//扫描的哪些包 ...
- C++ || const_cast 将const变量转为非const
点击查看代码 #include <iostream> using namespace std; int main() { int a =5; const int* p=&a;//需 ...
- 在.NET中使用JWT
1.配置文件添加 //jwt配置文件 "JWT": { "SigningKey": "14fa5f2rrwsg627fs256fdgff2r5rf52 ...