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 ...
随机推荐
- re模块相关介绍
re模块 模块和实际工作时间的关系 time模块和时间是什么关系?re模块和正则表达式的关系? 有了re模块就可以在python语言中操作正则表达式 正则表达式 1:什么是正则表达式? 一套规则--- ...
- 更多Linux实用命令
更多实用命令 进程相关 当程序运行在系统上时,我们称之为进程(process).想监测这些进程,需要熟悉 ps/top 等命令的用法.ps 命令好比工具中的瑞士军刀,它能输出运行在系统上的所有程序的许 ...
- 记一次因为关键字OUT 导致的后台"sql injection violation" 报错的问题
在navicat和mssm中执行用字段别名'out'均没有问题,但是在mybatis里使用就会报 "sql injection violation, syntax error: ERROR. ...
- linux sync命令
Linux sync命令用于数据同步,sync命令是在关闭Linux系统时使用的. Linux 系统中欲写入硬盘的资料有的时候为了效率起见,会写到 filesystem buffer 中,这个 buf ...
- RabbitMQ管理控制台的使用
RabbitMQ管理控制台的使用 添加一个用户 添加一个Virtual Hosts 把虚拟机和用户绑定 点击创建的虚拟机 配置 rabbitmq.config cp rabbitmq.config.e ...
- [C++] epoll server实例
// IO多路复用,事件驱动+非阻塞,实现一个线程完成对多个fd的监控和响应,提升CPU利用率 // epoll优点: // 1.select需要每次调用select时拷贝fd,epoll_ctl拷贝 ...
- idea项目编译时报错:程序包XXX不存在
问题如下: 解决方法: 点击File-->点击settings-->点击maven-->点击Runner-->勾选Delegate IDE build/run action t ...
- find . -name "*.php" -execdir grep -nH --color=auto foo {} ';'
find . -name "*.php" -execdir grep -nH --color=auto foo {} ';'
- JavaScript 函数的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- CH573 CH582 CH579蓝牙从机(peripheral)例程讲解四(蓝牙动态广播)
动态广播有两种实现方式: 1.关闭广播,更改广播包数据,等待关闭上报状态后,开启广播. uint8_t initial_advertising_enable = FALSE; GAPRole_SetP ...