定时器（两种）
- setTimeout()
- setInterval()
setTimeout() 炸弹定时器
-
开启定时器
image5s之后关闭广告
<img src="../imgs/ad.jpg" alt="" class="ad">
<script>
setTimeout(function () {
document.querySelector('.ad').style.display = 'none';
}, 5000)
</script>
清除定时器
<button>点击停止炸弹</button>
<script>
function callback() {
alert('来颗华子')
}
var timer = setTimeout(callback, 5000)
document.querySelector('button').addEventListener('click', function () {
// 清除定时器
clearTimeout(timer)
})
</script>
-
setInterval() 闹钟定时器
开启定时器image
<script>
setInterval(function () {
alert('来不来华子')
}, 1000)
// setTimeout 延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
// setInterval 每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
</script>
<button class="begin">开启定时</button>
<button class="stop">关闭定时</button>
<script>
var begin = document.querySelector('.begin')
var stop = document.querySelector('.stop')
var time = null;
begin.addEventListener('click', function () {
time = setInterval(function () {
console.log('你最帅')
},500)
})
stop.addEventListener('click', function () {
clearInterval(time)
})
</script>
双十一倒计时
电子时钟
发送短信
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
手机号码： <input type="number"> <button>发送</button>
<script>
var btn = document.querySelector('button')
var time = 3;
btn.addEventListener('click', function () {
btn.disabled = true;
var timer = setInterval(function () {
if (time == 0){
time = 3;
// 清除定时器
clearInterval(timer);
btn.disabled = false;
btn.innerHTML = '发送';
}else {
btn.innerHTML = '还剩下'+time+'秒';
time--;
}
}, 1000)
})
</script>
</body>
</html>
location对象
image
url的一般语法
image
image
image
this指向问题
this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。
现阶段，我们先了解一下几个this指向
- 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
- 方法调用中谁调用this指向谁
- 构造函数中this指向构造函数的实例
<button>点击</button>
<script>
// this 一般情况下this指向的是调用那个对象
console.log(this) // window
// 全局作用域或者普通函数中this指向全局对象window
function fn() {
console.log(this)
}
window.fn()
window.setTimeout(function () {
console.log(this)
}, 1000)
2\. 方法调用中谁调用this就指向谁
var o = {
sayHi: function () {
console.log(this)
}
}
o.sayHi();
var btn = document.querySelector('button')
// btn.onclick = function () {
// console.log(this)// 指向btn
// }
btn.addEventListener('click', function () {
console.log(this)// 指向btn
})
// 构造函数
function Fun() {
console.log(this) // 指向f实例对象
}
var f = new Fun();
</script>
ES6语法
什么是ES6
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
image
为什么使用 ES6 ?
每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。
- 变量提升特性增加了程序运行时的不可预测性
- 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
ES6新增语法
let（★★★）
ES6中新增了用于声明变量的关键字
- let声明的变量只在所处于的块级有效
<script>
let a = 10;
console.log(a)
if (true){
let b = 20;
console.log(b)
}
// console.log(b) // b is not defined
if (true){
var c = 100;
console.log(c)
}
console.log("c"+ c)
// 在一个大括号中 使用let声明的变量才具有块级作用域
// var 不具备这个特点
// 为了防止循环变量称为全局变量可以使用 let声明变量
for (let i = 0; i < 2; i++) {
console.log(i)
}
// 使用 let声明的变量具有暂时性死区特性，
// 该变量会绑定在块级作用域， 不受外界的影响
var tmp = 123;
if (true){
console.log(tmp)
let tmp = 'abc';
}
</script>
经典面试题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var arr = [];
for (var i = 0; i < 2 ; i++) {
arr[i] = function () {
console.log(i)
}
}
// console.log(i)
arr[0](); // 2
arr[1](); // 2
// let arr = [];
// for (let i = 0; i < 2 ; i++) {
// arr[i] = function () {
// console.log(i)
// }
// }
// arr[0](); // 0
// arr[1](); // 1
</script>
</body>
</html>
小结
- let关键字就是用来声明变量的
- 使用let关键字声明的变量具有块级作用域
- 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
- 防止循环变量变成全局变量
- 使用let关键字声明的变量没有变量提升
- 使用let关键字声明的变量具有暂时性死区特性
const
声明常量，常量就是值（内存地址）不能变化的量
具有块级作用域
<script>
// if (true){
// const a = 10;
// }
// console.log(a) // a is not defined
//使用const 声明的变量必须赋初始值
// const PI; X
// const PI = 3.14;
// 常量声明后的值不可更改， 地址值不变
// PI = 100;
// console.log(PI)
// const fn = function () {
// console.log('haha')
// }
// fn();
const ary = [100, 200];
ary[0] = 123;
// ary = [1, 2]
console.log(ary)
</script>
let、const、var 的区别
使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象
使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升
-
使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值
image
箭头函数
ES6中新增的定义函数的方式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
// 箭头函数是用来简化函数定义的
const fn = () => {
console.log(123)
}
fn();
// 在箭头函数中。 如果函数体只有一句代码，
// 并且代码的执行结果就是函数的返回值， 大括号可以省略
const sum = (s1, s2) => s1 + s2;
console.log(sum(10, 20))
// 在箭头函数中。 如果形参只有一个，
// 小括号可以省略，
const fnn = v => v*v;
console.log(fnn(2))
// 箭头函数不绑定this， 箭头函数没有自己this关键字
// 如果在箭头函数中使用this， this关键字将指向箭头函数定义位置中的this
function nnn() {
console.log(this);
return() =>{
console.log(this);
}
}
nnn()
</script>
</body>
</html>
移动web开发流式布局
浏览器现状
PC端常见浏览器：360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。
移动端常见浏览器：UC浏览器，QQ浏览器，欧朋浏览器，百度手机浏览器，360安全浏览器，谷歌浏览器，搜狗手机浏览器，猎豹浏览器，以及其他杂牌浏览器。
国内的UC和QQ，百度等手机浏览器都是根据Webkit修改过来的内核，国内尚无自主研发的内核，就像国内的手机操作系统都是基于Android修改开发的一样。
总结：兼容移动端主流浏览器，处理Webkit内核浏览器即可。
手机屏幕的现状
- 移动端设备屏幕尺寸非常多，碎片化严重。
- Android设备有多种分辨率：480x800, 480x854, 540x960, 720x1280，1080x1920等，还有的2K，4k屏。
- 近年来iPhone的碎片化也加剧了，其设备的主要分辨率有：640x960, 640x1136, 750x1334, 1242x2208等。
- 作为开发者无需关注这些分辨率，因为我们常用的尺寸单位是 px 。
视口
视口（viewport）就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口
- 布局视口 layout viewport
一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。
iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页
image
-
视觉视口 visual viewport
字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。
我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。image 理想视口 ideal viewport
为了使网站在移动端有最理想的浏览和阅读宽度而设定理想视口，对设备来讲，是最理想的视口尺寸需要手动添写meta视口标签通知浏览器操作
meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽
总结：我们开发最终会用理想视口，而理想视口就是将布局视口的宽度修改为视觉视口
meta标签
image
最标准的viewport设置
- 视口宽度和设备保持一致
- 视口的默认缩放比例1.0
- 不允许用户自行缩放
- 最大允许的缩放比例1.0
- 最小允许的缩放比例1.0
移动web开发——flex布局
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能再移动端很好的布局
flex布局
- 操作方便，布局极其简单，移动端使用比较广泛
- pc端浏览器支持情况比较差
- IE11或更低版本不支持flex或仅支持部分
建议
- 如果是pc端页面布局，还是采用传统方式
- 如果是移动端或者是不考虑兼容的pc则采用flex
flex布局原理
- flex 是 flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为 flex 布局。
- 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
- flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局
- 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式
父项常见属性
- flex-direction：设置主轴的方向
- justify-content：设置主轴上的子元素排列方式
- flex-wrap：设置子元素是否换行
- align-content：设置侧轴上的子元素的排列方式（多行）
- align-items：设置侧轴上的子元素排列方式（单行）
- flex-flow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
flex-direction设置主轴的方向
在 flex 布局中，是分为主轴和侧轴两个方向，同样的叫法有 ： 行和列、x 轴和y 轴
默认主轴方向就是 x 轴方向，水平向右
-
默认侧轴方向就是 y 轴方向，水平向下
image注意： 主轴和侧轴是会变化的，就看 flex-direction 设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的
image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*给父级添加flex属性*/
display: flex;
width: 800px;
height: 300px;
background-color: pink;
/*默认主轴是x轴， 行 row， 那么y轴就是侧轴 */
/* 我们的元素是跟随主轴进行排列*/
/* flex-direction: row;*/
/* flex-direction: column;*/
/* flex-direction: row-reverse;*/
flex-direction: column-reverse;
}
div span{
width: 150px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
justify-content 设置主轴上的子元素排列方式
image
flex-wrap设置是否换行
- 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
- nowrap 不换行
- wrap 换行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*给父级添加flex属性*/
display: flex;
/*width: 600px;*/
width: 80%;
height: 400px;
background-color: pink;
/*默认是不换行的， 如果装不开， 会缩小子元素的宽度放到父元素里面*/
flex-wrap: wrap;
/*flex-wrap: nowrap;*/
}
div span{
width: 150px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
align-items 设置侧轴上的子元素排列方式（单行 ）
- 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
- flex-start 从头部开始
- flex-end 从尾部开始
- center 居中显示
- stretch 拉伸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*给父级添加flex属性*/
display: flex;
width: 100%;
height: 400px;
background-color: pink;
flex-direction: column;
justify-content: center;
/*align-items: center;*/
/*拉伸 但是不要给盒子高度*/
align-items: stretch;
}
div span{
/*width: 150px;*/
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
</html>
align-content 设置侧轴上的子元素的排列方式（多行）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Title</title>
<style>
div{
/*给父级添加flex属性*/
display: flex;
width: 400px;
height: 400px;
background-color: pink;
flex-wrap: wrap;
/*align-content: space-between;*/
/*align-content: space-around;*/
align-content: center;
}
div span{
width: 150px;
height: 100px;
background-color: blue;
color: white;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
</body>
</html>
