1、Math 使用方式 :Math.方法/属性
1、ceil 向上取整
2、floor向下取整
3、random 生成随机数
2、Date
1、获取到对象 new Date()
参数:不传递 表示以当前时间
传递多个数字 指定的年月日、时分秒
传递字符串
2、获取时间
getFullYear 获取年份
getMonth 获取月份
。。。所有以get开头的方法都是获取的意思
3、日期时间与时间戳的转换
1、日期时间转换时间戳
Date.parse(日期)
2、时间戳转换日期时间
var d = new Date()
d.setTime(时间戳) d对象表示的就是时间戳对应的时间
BOM
BOM介绍
BOM全称browser object model 也就是浏览器对象模型
目前js是运行在浏览器上。所以js代码需要可以控制到整个浏览器的功能。对于JS而言ES只有语法规范,不能控制
到浏览器的功能。所以浏览器在处理js代码时,就提供了BOM功能使用(BOM就是浏览器内置提供的window对象)
每一个页面浏览器在解析时,内置就提供了window对象。window对象下的属性、方法(API)
window对象下有很多很多的属性,有的还是对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GhpYuTfS-1660375131772)(/1660272441112.png)]
navigator对象(不用记)
// 记录着系统相关的信息
console.log(window.navigator);
// 由于window是顶级对象 可以省略
// cookieEnabled 浏览器端cookie的使用是否不被禁用
console.log(navigator.cookieEnabled);
// 浏览器的版本信息
console.log(navigator.userAgent);
location对象
1、location对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MZOkpSd0-1660375131773)(/1660273780179.png)]
2、location对象获取当前URL地址
<button id="getUrl">获取URL</button>
<script>
// console.log(location);
getUrl.onclick = function(){
console.log(location.href);
}
</script>
3、跳转地址
jump.onclick = function(){
// 只要给href属性赋值 浏览器会自动的进行跳转
location.href = 'http://www.baidu.com';
// location.replace('http://www.baidu.com')
}
4、刷新
flush.onclick = function(){
location.reload();
}
5、模拟百度搜索
<input type="text" id="keyword"><input type="button" id="search" value="搜索"/>
<script>
search.onclick = function(){
// 获取输入框的值
var k = keyword.value;
var url = 'https://www.baidu.com/s?wd='+k;
location.href = url;
}
</script>
history对象
<h1>第二个页面</h1>
<a href="3.html">下一页</a>
<button id="go">前进</button>
<button id="back">后退</button>
<script>
go.onclick = function(){
// history.forward();
// go可以实现 前进或者后退 参数正数表示前面多少个页面 负数表示后退多少个页面
history.go(1);
}
back.onclick = function(){
// history.back();
history.go(-1);
}
</script>
定时器
定时器基本使用
1、语法
定时器控制反复执行某一项操作
1、设置定时器
var 变量 = setInterval(函数,时间)
函数:用于通知定时器做什么,可以使用匿名函数或者函数名称
时间:毫秒值
变量在接受定时器的标识符号
2、清除定时器
clearInterval(标识)
2、使用示例
<button id="end">停止</button>
<script>
// 1、使用有名称的函数
// function fn(){
// console.log(+new Date())
// }
// setInterval(fn,1000);
// 2、使用匿名函数
var timer = setInterval(function () {
console.log(+new Date())
}, 1000);
// 停止定时器
end.onclick = function(){
console.log(1111)
clearInterval(timer)
}
</script>
随机点名案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#content {
width: 600px;
height: 400px;
background: #000;
margin: 100px auto;
text-align: center;
position: relative;
line-height: 300px;
color: dodgerblue;
font-size: 70px;
}
#btn1 {
background: #ccc;
width: 180px;
height: 80px;
font-size: 30px;
color: #f40;
border-radius: 12px;
position: absolute;
bottom: 30px;
left: 50%;
margin-left: -90px;
}
</style>
</head>
<body>
<div id="content">
<span id="span1">
点击开始
</span>
<button id="btn1">
start
</button>
</div>
<script src="common.js"></script>
<script>
/*
思路:
当用户第一次点击时 按钮文字被设置为stop 并且名字再反复改变
按钮文字被设置为stop 找到按钮 使用innerHTML实现
名字再反复改变 使用定时器 在函数中设置修改名字(随机数取到下标 从数组中取出名字)
当用户第二次点击是 按钮文字被设置为start 并且停止修改名字
按钮文字被设置为start
停止修改名字 清除定时器
*/
var arr = ['孙悟空', '亚索', '嘉文', '赵信', '盖伦'];
var timer;
btn1.onclick = function () {
// 判断是要开始修改名字还是停止
if (btn1.innerHTML.trim() == 'start') {
btn1.innerHTML = 'stop';
timer = setInterval(function () {
span1.innerHTML = arr[makeRandom(0, arr.length, false)];
}, 100);
} else {
btn1.innerHTML = 'start';
clearInterval(timer);
}
}
</script>
</body>
</html>
时间案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">2019-09-09 </div>
<script>
function format(number){
return number>10 ? number :'0'+number;
}
function time() {
var d = new Date();
var year = d.getFullYear();
var month = format(d.getMonth() + 1);
var day = format(d.getDate());
var h = format(d.getHours());
var m = format(d.getMinutes());
var s = format(d.getSeconds());
// 模板字符串 `(是反引号) 在反引号中可以直接写变量 ${变量名称}
// str = `aaa ${month} aa`
str = `${year}-${month}-${day} ${h}:${m}:${s}`;
app.innerHTML = str;
}
setInterval(time, 1000);
time();
</script>
</body>
</html>
验证码倒计时
<input type="button" value="发送验证码" id="send">
<script>
/*
思路
当用户点击按钮
1、将按钮设置 不可以点击状态 send.disabled = true;
2、实现按钮的内容每秒钟改变一次 send.value = 值 一旦时间到达 按钮重新可以点击
*/
var timer; //保存定时器标识
var number = 4; //保存倒计时的时间
send.onclick = function () {
timer = setInterval(function () {
if (number > 1) {
number--;
// 禁用按钮
send.disabled = true;
send.value = number + 's重新获取'
} else {
// 设置按钮还可以继续点击
send.disabled = false;
send.value = '重新获取';
// 关闭定时器
clearInterval(timer);
// 重置number变量
number = 10;
}
}, 1000);
}
</script>
延时器
/*
延时器只会执行一次
1、创建延时器
var 变量 = setTimeout(函数,时间)
2、清除延时器
clearTimeout(标识)
*/
<button id="end">停止</button>
<script>
// 2、使用匿名函数
var timer = setTimeout(function () {
console.log(+new Date())
}, 10000);
// 停止定时器
end.onclick = function(){
console.log(1111)
clearTimeout(timer)
}
</script>
同步与异步
同步:代码从上向下执行,当某一行代码没有执行完毕,后面的代码等待
异步:代码还是继续向下执行,当前没做完的其他来处理。目前可以接触 setInterval、setTimeout 都是异步代码
setTimeout(function(){
console.log('2s后执行')
},2000);
setTimeout(function(){
console.log('延时器中')
},0)
console.log('end');
/*
浏览器属于单线程(主线程)。所以浏览器只能做一件事件
js引擎主线程在执行js代码时,遇到同步代码正常执行,碰到异步代码,将异步代码的任务交给浏览器中的任务队列(宏任务队列、微任务队列)
主线程代码继续向下执行 当执行完毕了,将任务队列中的任务取出来进行执行(按照时间先后顺序执行)
*/
DOM
浏览器主要任务是控制页面上各种元素显示。对于页面上每一个元素都存在一个对象(dom对象)对应。按照浏览器
的规则 需要找到这个对象之后再按照使用说明去使用
操作页面上元素永远是 dom对象.属性/方法名称 控制。dom对象是浏览器提供的
<ul>
<li class="one">第一个li</li>
<li id="two">第二个li</li>
</ul>
<input type="text" name="user">
<script>
// 1、getElementById 根据标签中id值找到标签的dom对象 返回的结果就是dom对象
// var id = document.getElementById('two');
// console.log(id);//单个dom对象 控制台输出时是直接显示的标签
// 2、getElementsByClassName 按照标签上的class值寻找dom对象 返回结果是伪数组,数组中每一个元素都是dom对象
// console.log(document.getElementsByClassName('one'))
// 3、getElementsByTagName根据标签名称寻找对应的dom对象 返回也是伪数组
// console.log(document.getElementsByTagName('li'));
// 4、按照标签上name属性值寻找dom对象,返回还是伪数组 但是可以使用forEach方法
// console.log(document.getElementsByName('user'))
// 5、querySelector根据css规则匹配满足的第一个标签的dom对象 返回结果就是dom对象
// 参数 就是css规则写法
// console.log(document.querySelector('.one'));
// 6、querySelectorAll根据css规则匹配满足所有标签的dom对象,返回结果是伪数组,数组中每个元素才是真正的dom对象
console.log(document.querySelectorAll('li'));
// document.querySelector('.one').innerHTML = 'change'
// document.querySelectorAll('li').innerHTML = 'change' 错误
</script>
事件
事件四要素
就是用户的行为触发导致了某种结果,这种行为叫做事件
1、事件源 事件产生的标签
2、事件名称 浏览器内置所规定的一些行为
3、事件处理程序 就是一个函数 事件一旦触发浏览器就会自动的将处理程序运行起来
4、事件对象 事件触发之后用于记录或者实现某些功能的对象,系统所分配
事件绑定方式
页面上一个普通标签,直接显示在页面上,不论用户做什么行为操作 都不会有对应的结果。事件绑定,就是将事
件源、事件名称、事件处理程序三者合并到一起
行内绑定
<!-- 直接在标签上设置以on开头的属性 只要对应的行为触发 系统会自动执行对应的代码 -->
<button onclick="console.log('保时捷')">行内绑定</button>
<button onclick="fn()">行内绑定配合函数使用</button>
<script>
function fn() {
console.log('奔驰C200L');
}
// 行内绑定方式 没有讲结构与行为分离 所以行内绑定方式一般不会使用
</script>
动态绑定
1、动态绑定
<button>按钮</button>
<script>
// 行内绑定事件语法 dom对象.事件名称=函数
document.querySelector('button').onclick = function(){
console.log('雅阁');
// 当前事件源的dom对象
console.log(this);
}
</script>
<button>按钮</button>
<button>按钮</button>
<script>
// document.querySelectorAll('button')确实是对象 但是不是dom对象 语法上不会报错 执行肯定没有效果
// 这个写法错误
// document.querySelectorAll('button').onclick = function(){
// console.log(this);
// }
// 多个相同元素要绑定事件 一定要做循环
document.querySelectorAll('button').forEach(function(dom){
dom.onclick = function(){
console.log('fn')
}
})
</script>