Day06 Javascript 、 es6、flex布局

定时器（两种）

• setTimeout()
• setInterval()

setTimeout() 炸弹定时器

• 开启定时器

  image

  5s之后关闭广告

清除定时器

点击停止炸弹

• setInterval() 闹钟定时器
  开启定时器

  image

开启定时
关闭定时

双十一倒计时

电子时钟

发送短信

    
    


手机号码：  发送

location对象

url的一般语法

image

this指向问题

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，一般情况下this的最终指向的是那个调用它的对象。
现阶段，我们先了解一下几个this指向

1. 全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

点击

ES6语法

什么是ES6

ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。

为什么使用 ES6 ?
每一次标准的诞生都意味着语言的完善，功能的加强。JavaScript语言本身也有一些令人不满意的地方。

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码
  ES6新增语法

let（）

ES6中新增了用于声明变量的关键字

• let声明的变量只在所处于的块级有效

经典面试题

小结

• let关键字就是用来声明变量的
• 使用let关键字声明的变量具有块级作用域
• 在一个大括号中 使用let关键字声明的变量才具有块级作用域 var关键字是不具备这个特点的
• 防止循环变量变成全局变量
• 使用let关键字声明的变量没有变量提升
• 使用let关键字声明的变量具有暂时性死区特性

const

声明常量，常量就是值（内存地址）不能变化的量
具有块级作用域

• let、const、var 的区别

• 使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

• 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

• 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

  image

箭头函数

ES6中新增的定义函数的方式。

移动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

    
    
    
    
    




    1
    2
    3

justify-content 设置主轴上的子元素排列方式

image

flex-wrap设置是否换行

• 默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的。
• nowrap 不换行
• wrap 换行

    
    
    
    
    




    1
    2
    3
    4
    5

align-items 设置侧轴上的子元素排列方式（单行 ）

• 该属性是控制子项在侧轴（默认是y轴）上的排列方式 在子项为单项（单行）的时候使用
• flex-start 从头部开始
• flex-end 从尾部开始
• center 居中显示
• stretch 拉伸

    
    
    
    
    




    1
    2
    3

align-content 设置侧轴上的子元素的排列方式（多行）

    
    
    
    
    




    1
    2
    3
    4
    5