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 ...
随机推荐
- base64EncodedStringWithOptions iOS
// 64位编码//先将string转换成dataNSData *data = [string dataUsingEncoding:NSUTF8StringEncoding];NSData *base ...
- 基于Python接口自动化测试持续集成----在jenkins创建任务->检出git的代码-->生成报告-->发送邮件
步骤一:先在jenkins创建一个自由风格的任务 步骤二:然后在源码管理选择git检出代码的方式,需要提供代码所在git的路径和登录git的账号和密码 步骤三:返回到任务配置的界面,先在构建后操作增加 ...
- C#使用JSON相关
一.Json字符串转换为Dictionary /// <summary> /// JSON字符串转为 Dictionary /// </summary> /// <typ ...
- Java开发的事务
代码来自https://blog.csdn.net/weixin_42950079/article/details/99674292 可以看出jdbc的一个事务有这么几个步骤:1.关闭sql自动提交: ...
- IntelliJ IDEA 最新激活破解教程,永久激活,亲测有效
使用ja-netfilter激活Jetbrains系列软件 注意:无限试用脚本已经失效.本教程适合2021.3.*之上的高版本,使用ja-netfilter插件进行激活操作,永久有效 激活步骤: 第一 ...
- Vivado中综合,实现,编程和调试工程可能会出现的问题及解决方案
Xilinx公司的IDE(集成开发环境) Vivado用处广泛,学会使用Vivado对FPGA的学习至关重要,这里以PRX100-D开发板为例,对Vivado的学习使用进行探讨.本文将会持续更新,列出 ...
- 关于nth-of-type的注意事项
普通使用 nth-of-type: <div class="box"> <div> 第一个元素 </div> <p>没有用的元素&l ...
- [C++] epoll server实例
// IO多路复用,事件驱动+非阻塞,实现一个线程完成对多个fd的监控和响应,提升CPU利用率 // epoll优点: // 1.select需要每次调用select时拷贝fd,epoll_ctl拷贝 ...
- python 编程找出矩阵中的幸运数字:说明,在一个给定的M*N的矩阵(矩阵中的取值0-1024,且各不相同),如果某一个元素的值在同一行中最小,并且在同一列中元素最大,那么该数字为幸运数字。
假设给定矩阵如下: matrix=[[10,36,52], [33,24,88], [66,76,99]] 那么输出结果应为66(同时满足条件) 代码如下: arr=[[10,36,52], [33, ...
- 汇编程序 - TD调试
为了写这个Blog,无奈的我深夜打开虚拟机,希望也能帮助一些人,因为好像真的有人不会欸!(→_→) 写在前面的话: 1. TD面板下的调试十分重要.可以观察内存(GOTO DS:XXXX)存放的位置与 ...