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 ...
随机推荐
- 二叉树系列之Treap树
Treap是一棵拥有键值.优先级两种权值的树 struct node{ int size;//以这个结点为根的子树的结点总数量,用于名次树 int rank;//优先级 int key ...
- hdu1710 二叉树(C/C++)
hdu1710 题目地址:https://acm.dingbacode.com/showproblem.php?pid=1710 (最近几天杭电原网址开不进去了,之后应该可以通..吧) Binary ...
- java pta第二次阶段性总结
一.前言 经过这三次的pta训练,我对java再一次有了一个新的认识,这三次比起之前难度更大,所涉及的知识点更多.第4.5次作业是在前几次作业上的再次拓展,由三角形拓展到四边形,再由四边形拓展到五边形 ...
- 如何服务好B端客户
核心价值: 2B公司的核心价值在于服务.如何服务好客户,需要的是了解客户,与客户共赢. 一.客户信任度的建立 服务:不是口头说说,是要落地与实践. 对于客户的承诺至关重要,承诺的时间点.承诺的事情要保 ...
- css卡片样式
.view-1-user-card { margin: 20px 5% 10px 5%; height: 124px; width: 90%; background: linear-gradient( ...
- VBA类模块完全教程(www.accessoft.com软件网)
这份礼物送给现在想学习类知识或曾经学过但因为各种原因没有"修成正果"的朋友,我期望的结果是这篇文章后,您可以在类模块中像在标准模块中写代码一样熟练,我也期望不至于太乏味而使您没有耐 ...
- Servlet的学习之路
一.什么是什么Servlet? Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程 ...
- springboot中redis使用和工具
application.properties #Redis相关配置 spring.data.redis.host=localhost #端口 spring.data.redis.port=6379 # ...
- Oracle表主键作为外键都用在哪些表查询
Oracle中,如果设置了外键,删除数据时,必须将外键关联一并删除,但是如果对项目不是很熟悉时,我们无法判断到底都在哪些表中有外键关联,以下提供了一个查询的SQL,可以通过数据库查询,查找到所有的外键 ...
- Navicat 连接MySQL数据库 报错2059
Navicat 连接MySQL数据库 报错2059 - authentication plugin 'caching_sha2_password'的解决办法 2059 - Authentication ...