bom浏览器对象模型

    bom由一系列相关的对象构成并且每个对象都提供了很多方法属性
    bom顶级对象是window
    bom是浏览器产商在各自浏览器上定义的,兼容性差
    window具有双重角色,他是一个全局对象.定义在全局作用域中的变量、函数都会变成window对象的属性和方法,但是在调用的时候可以省略window

窗口加载事件

    window.onload当前页面文档加载完成后会触发该事件,在页面中只能写一次,如果有多个就以最后一个为准
    可以换成window.addEventListener('load',function(){})则没有限制
    如果网页中图片特别多可以用document.addEventListener('DOMContentLoaded',function(){})
    DOMContentLoaded是DOM加载完毕,不包含图片,falsh,css等就可以执行 加载速度比load快一些
  <button>点击</button>
window.onload = function () {
var btn = window.document.querySelector('button')
btn.onclick = function () {
alert('ok')
}
}
window.addEventListener('load', function () {
var btn = window.document.querySelector('button')
btn.onclick = function () {
alert('ok')
}
})

调整窗口大小事件

    window.onresize=function(){} 只要窗口大小发生了变化就会触发该事件
    window.addEventListener('resize',function(){})
  <div class="box">123</div>
var box = document.querySelector('.box')
window.addEventListener('resize', function () {
if (window.innerWidth <= 800) {
box.style.display = 'none'
} else {
box.style.display = 'block'
}
})

两种定时器

window.setTimeout(调用函数,[延迟的毫秒数])

    这个window在调用的时候可以省略
    这个延迟单位是毫秒 默认就是0
    这个调用函数可以直接写函数 还可以写函数名 还有一种方法是setTimeout('fn()', 3000)但是不提倡
    页面中有很多的定时器 我们可以给定时器加标识符
    setTimeout这个函数也叫回调函数callback

注意

 如果页面中有多个定时器在循环使用如果不去除会导致定时器越来越多
  setTimeout(function () {
console.log('ok'); }, [2000]) function fn() {
console.log('okk');
}
var times1 = setTimeout(fn, 3000)
var times2 = setTimeout('fn()', 3000)
     var t = 3000;
fn1()
function fn1() {
imgs[0].style.display = 'block'
imgs[1].style.display = 'none'
imgs[2].style.display = 'none'
times1 = setInterval(fn2, t)
       clearInterval(times3)
} function fn2() {
imgs[0].style.display = 'none'
imgs[1].style.display = 'block'
times2 = setInterval(fn3, t)
clearInterval(times1)
} function fn3() {
imgs[0].style.display = 'none'
imgs[1].style.display = 'none'
imgs[2].style.display = 'block'
times3 = setInterval(fn1, t)
clearInterval(times2)
} })

案例

  <!-- 五秒之后自动关闭广告 -->
<img src="../imges/u=3568135932,2181685849&fm=26&gp=0.jpg" alt="" class="ad">
var ad = document.querySelector('.ad')
setTimeout(function () {
ad.style.display = 'none'
}, 5000)

效果图

停止setTimeout()定时器

    window.clearTimeout(定时器的名称)

案例

  <button class="btn">点击</button>
var btn = document.querySelector('.btn')
var times = setTimeout(function () {
console.log('lll'); }, 6000)
btn.addEventListener('click', function () {
clearTimeout(times)
})
 <button class="begin">开启</button>
<button class="stop">停止</button>
var begin = document.querySelector('.begin')
var stop = document.querySelector('.stop')
var times = null;
begin.addEventListener('click', function () {
times = setInterval(function () {
console.log('你好吗');
}, 1000)
})
stop.addEventListener('click', function () {
clearTimeout(times)
})

效果图

window.setInterval(调用函数,[延迟的毫秒数])

    方法和setTimeout十分相同
    每隔这个延迟时间就去调用这个回调函数,会调用很多次,重复调用这个函数

案例

    <!-- 京东倒计时案例 -->
 <div class="box2">
<span class="hour">1</span>
<span class="minute">2</span>
<span class="second">3</span>
</div>
var hour = document.querySelector('.hour')
var minute = document.querySelector('.minute')
var second = document.querySelector('.second')
var inputTime = +new Date('2020-4-9 18:00:00') conutDown() //先调用一次防止第一次刷新页面有空白 // 开启定时器
setInterval(conutDown, 1000) function conutDown() {
var nowTime = +new Date()
var times = (inputTime - nowTime) / 1000; //剩余时间的秒数
var d = parseInt(times / 60 / 60 / 24) //天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24) //时
h = h < 10 ? '0' + h : h;
hour.innerHTML = h;
var m = parseInt(times / 60 % 60) //分
m = m < 10 ? '0' + m : m;
minute.innerHTML = m;
var s = parseInt(times % 60) //秒
s = s < 10 ? '0' + s : s;
second.innerHTML = s;
}

效果图

JS 窗口加载与定时器笔记的更多相关文章

  1. AMD加载器实现笔记(二)

    AMD加载器实现笔记(一)中,我们实现了一个简易的模块加载器.但到目前为止这个加载器还并不能称为AMD加载器,原因很简单,我们还不支持AMD规范中的config配置.这篇文章中我们来添加对config ...

  2. 转:web前端面试题合集 (Javascript相关)(js异步加载详解)

    1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...

  3. sea.js模块加载工具

    seajs的使用 seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js') 1.安装 np ...

  4. js 模版加载到前端

    js 模版加载到前端 简单有效不高端 配个路由 /js/:filename ,  用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...

  5. 前端设计中关于外部js文件加载的速度优化

    在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...

  6. js动态加载以及确定加载完成的代码

    利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...

  7. 第三课:sea.js模块加载原理

    模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...

  8. js资源加载优化

    互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN  + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...

  9. 判断JS是否加载完成

    在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载.这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证 ...

随机推荐

  1. java 面向对象(三十七):反射(一) 反射的概述

    1.本章的主要内容 2.关于反射的理解 Reflection(反射)是被视为动态语言的关键,反射机制允许程序在执行期借助于Reflection API取得任何类的内部信息,并能直接操作任意对象的内部属 ...

  2. AI芯片

    课程作业,正好自己也在学深度学习,正好有所帮助,做了深度学习的AI芯片调研,时间比较短,写的比较仓促,大家随便看看 近年来,深度学习技术,如卷积神经网络(CNN).递归神经网络(RNN)等,成为计算机 ...

  3. js dom演示

    <body> <div id="div1"> <p name="p1">p1内容</p> <p name= ...

  4. 在Access中执行SQL

    1.基本介绍 Microsoft Access在很多地方得到广泛使用,例如小型企业,大公司的部门.喜爱编程的开发人员亦利用它来制作处理数据的桌面系统.它也常被用来开发简单的WEB应用程序. 2.Ace ...

  5. Oracle RACDB 增加、删除 在线重做日志组

    Oracle RACDB 增加.删除 在线重做日志组 select * from v$log;select * from v$logfile ; ----删除日志组:alter database dr ...

  6. 设计模式:singleton模式

    目的:限制类的实例个数只能是一个 例子: #define AGT_DECLARE_SINGLETON(ClassName) \ public: \ static ClassName *Instance ...

  7. HTTP请求方式及常见问题

    请求方式 当前HTTP一共有八种方式.有三种是有HTTP1.0提供,剩余五种则是有HTTP1.1提供 常见问题 啥是OPTIONS?有啥作用 是浏览器对复杂跨域请求的一种处理方式,在真正发送请求之前, ...

  8. git安装并与远程仓库关联相关配置

    git是当前最流行的版本控制系统,下面简单记录一下git的安装及其与远程仓库的关联. git安装 打开git官网,下载对应的安装包. 双击运行安装包,安装过程中可以直接选择默认配置,一路next下去. ...

  9. javac不是内部或外部命令,也不是可运行的程序或批处理文件的错误解决方法(Windows10/Windows7)

    前言:在配置JDK环境变量后,java显示正常,javac则显示javac不是内部或外部命令,也不是可运行的程序或批处理文件.造成javac不是内部或外部命令,也不是可运行的程序或批处理文件的问题一般 ...

  10. Python网络编程基础|百度网盘免费下载|零基础入门学习资料

    百度网盘免费下载:Python网络编程基础|零基础学习资料 提取码:k7a1 目录: 第1部分 底层网络 第1章 客户/服务器网络介绍 第2章 网络客户端 第3章 网络服务器 第4章 域名系统 第5章 ...