JS 窗口加载与定时器笔记
bom浏览器对象模型
窗口加载事件
<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')
}
})
调整窗口大小事件
<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(调用函数,[延迟的毫秒数])
注意
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()定时器
案例
<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(调用函数,[延迟的毫秒数])
案例
<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 窗口加载与定时器笔记的更多相关文章
- AMD加载器实现笔记(二)
AMD加载器实现笔记(一)中,我们实现了一个简易的模块加载器.但到目前为止这个加载器还并不能称为AMD加载器,原因很简单,我们还不支持AMD规范中的config配置.这篇文章中我们来添加对config ...
- 转:web前端面试题合集 (Javascript相关)(js异步加载详解)
1. HTTP协议的状态消息都有哪些? 1**:请求收到,继续处理2**:操作成功收到,分析.接受3**:完成此请求必须进一步处理4**:请求包含一个错误语法或不能完成5**:服务器执行一个完全有效请 ...
- sea.js模块加载工具
seajs的使用 seajs是一个jS模块加载器,由淘宝前端架构师玉伯开发,它可以解决命名空间污染,文件依赖的问题.可以在一个js文件中引入另外一个js.require('a.js') 1.安装 np ...
- js 模版加载到前端
js 模版加载到前端 简单有效不高端 配个路由 /js/:filename , 用 readTemplate 响应请求,前端可以按模块方式直接 require 模板 'use strict' var ...
- 前端设计中关于外部js文件加载的速度优化
在一般情况下,许多人都是将<script>写在了<head>标签中,而许多浏览器都是使用单一的线程来加载js文件的,从上往下,从左往右. 若是加载过程出错,那么网页就会阻塞,就 ...
- js动态加载以及确定加载完成的代码
利用原生js动态加载js文件到页面,并在确定加载完成后调用相关function var otherJScipt = document.createElement("script") ...
- 第三课:sea.js模块加载原理
模块加载,其实就是把js分成很多个模块,便于开发和维护.因此加载很多js模块的时候,需要动态的加载,以便提高用户体验. 在介绍模块加载库之前,先介绍一个方法. 动态加载js方法: function l ...
- js资源加载优化
互联网应用或者访问量大的应用,对js的加载优化是不可少的.下面记录几种优化方法 CDN + 浏览器缓存 CDN(content delivery network)内容分发网络, 最传统的优化方式.其 ...
- 判断JS是否加载完成
在正常的加载过程中,js的加载都是同步的,也就是在加载过程中,浏览器会阻塞接下来的内容的加载.这时候我们就要用到动态加载,动态加载是异步的,如果我们在后边要用到这个动态加载的js文件里的东西,就要保证 ...
随机推荐
- java 面向对象(三十七):反射(一) 反射的概述
1.本章的主要内容 2.关于反射的理解 Reflection(反射)是被视为动态语言的关键,反射机制允许程序在执行期借助于Reflection API取得任何类的内部信息,并能直接操作任意对象的内部属 ...
- AI芯片
课程作业,正好自己也在学深度学习,正好有所帮助,做了深度学习的AI芯片调研,时间比较短,写的比较仓促,大家随便看看 近年来,深度学习技术,如卷积神经网络(CNN).递归神经网络(RNN)等,成为计算机 ...
- js dom演示
<body> <div id="div1"> <p name="p1">p1内容</p> <p name= ...
- 在Access中执行SQL
1.基本介绍 Microsoft Access在很多地方得到广泛使用,例如小型企业,大公司的部门.喜爱编程的开发人员亦利用它来制作处理数据的桌面系统.它也常被用来开发简单的WEB应用程序. 2.Ace ...
- Oracle RACDB 增加、删除 在线重做日志组
Oracle RACDB 增加.删除 在线重做日志组 select * from v$log;select * from v$logfile ; ----删除日志组:alter database dr ...
- 设计模式:singleton模式
目的:限制类的实例个数只能是一个 例子: #define AGT_DECLARE_SINGLETON(ClassName) \ public: \ static ClassName *Instance ...
- HTTP请求方式及常见问题
请求方式 当前HTTP一共有八种方式.有三种是有HTTP1.0提供,剩余五种则是有HTTP1.1提供 常见问题 啥是OPTIONS?有啥作用 是浏览器对复杂跨域请求的一种处理方式,在真正发送请求之前, ...
- git安装并与远程仓库关联相关配置
git是当前最流行的版本控制系统,下面简单记录一下git的安装及其与远程仓库的关联. git安装 打开git官网,下载对应的安装包. 双击运行安装包,安装过程中可以直接选择默认配置,一路next下去. ...
- javac不是内部或外部命令,也不是可运行的程序或批处理文件的错误解决方法(Windows10/Windows7)
前言:在配置JDK环境变量后,java显示正常,javac则显示javac不是内部或外部命令,也不是可运行的程序或批处理文件.造成javac不是内部或外部命令,也不是可运行的程序或批处理文件的问题一般 ...
- Python网络编程基础|百度网盘免费下载|零基础入门学习资料
百度网盘免费下载:Python网络编程基础|零基础学习资料 提取码:k7a1 目录: 第1部分 底层网络 第1章 客户/服务器网络介绍 第2章 网络客户端 第3章 网络服务器 第4章 域名系统 第5章 ...