liaooo

作者： liao

  • 定时器-间歇函数

    开启定时器

    作用:

    • 每隔一段时间调用这个函数
    • 间隔时间单位是毫秒
    setInterval(函数名,间隔时间)
// 注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

    关闭定时器

    let 变量名 = setInterval(函数名，间隔时间)
clearInterval(变量名)
// 注意:
1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

    window.setInterval – Web API 接口参考 | MDN

  • 多分支-判断

    if语句

    if(条件1){             //先判断条件1，若满足条件1则执行语句1，其他都不执行
	语句1
} else if(条件2){		  //条件1不满足则向下判断，若满足条件2则执行语句2，其他都不执行
	语句2
} else if(条件3){			//依此类推
	语句3
} else {						 //若以上条件都不满足，则执行else中的语句n
	语句n
}										 //可以写N个条件

    三元运算符（三元表达式）

    //条件 ?  满足条件执行的代码 : 不满足条件执行的代码
条件 ? 1 : 2
//结果为真返回1 为假返回2

    switch语句

    1. 一般用于等值判断，不适合区间判断（如a>80,则…）
    2. 需要配合break使用，没有break会造成case穿透（不管之后的case值是否全等，都一直向下执行）
    switch (1) {               //找到和小括号里!!全等!!的case值,并执行代码
  case 1:
    alert(1)               
    break
  case 2:
    alert(2)
    break
  case 3:
    alert(3)
    break
  default:                 //若没找到，则执行default里的代码
    alert("没有数据")
}

  • js基础概念

    数据类型

    基本数据类型

    • number 数字型
    • string 字符串型
    • boolean 布尔型
    • undefined 未定义型
    • null 空类型

    null 和 undefined 区别:

    1. undefined 表示没有赋值
    2. null 表示赋值了，但是内容为空

    null 开发中的使用场景:

    官方解释:把 null 作为尚未创建的对象

    大白话: 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null

    引用数据类型

    • object 对象
    • function 函数
    • array 数组

    类型转换

    检测变量类型

    //查看数据类型
typeof 值
//typeof运算符的返回类型为字符串，值包括如下几种：
1. 'undefined' --未定义的变量或值
2. 'boolean'   --布尔类型的变量或值
3. 'string'    --字符串类型的变量或值
4. 'number'    --数字类型的变量或值
5. 'object'    --对象类型的变量或值，或者null(这个是js历史遗留问题，将null作为object类型处理)
6. 'function'  --函数类型的变量或值

    隐式转换

    • +号两边只要有一个是字符串，都会把另外一个转成字符串
    • 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
    • +号作为正号解析可以转换成Number

    显式转换

    转换为字符串型

    let a = 124144

String(a)

a.toString(进制)    //括号内填写进制数

    转换为数字型

    Number('21')

parseInt('10.12234') //10 转换为数字型 只保留整数部分

parseFloat('10.3')//10.3 转换为数字型 保留小数部分

Number('10px') //得到的值为NaN Number里面只能加数字
parseFloat('10px')//10 保留数字部分 过滤其他（开头必须是数字）

NaN  //not A number

    NaN也是number类型的数据，代表非数字

    前置自增/后置自增

    隐式转换

    前置自增：++i  // 自己先计算 后进行运算

//例如
let i = 1
计算：++i + 3
// 2 + 3 = 5

    后置自增：i++ // 先进行运算 后自己计算

//例如
let i = 1
计算：i++ + 3
// 1 + 3 = 4

    let i = 1
计算：i++ + ++i +i
//1 + 2 + 3
1.i++ 此时i = 1
2.i++ + ++i  此时i = 2
3.i++ + ++i + i 此时i = 3

    比较运算符

    返回值 boolean 类型

    比较运算符有隐式转换

    最终把数据隐式转换转成number类型再比较

     console.log(3 > 5) // false
 console.log(5 >= 5) //  true

 // console.log(5 = 5)
 console.log(5 == 5)

 // == 只要值一样就是true  不管数据类型
 console.log(5 == '5')
 console.log(5 == 'pink')

 // === 以后判断要用三等  ===  开发常用   要求值和数据类型都一样
 console.log(5 === 5)
 console.log(5 === '5')

 // 特殊情况
 console.log('pink' > 'red')   //false 比较对应ASCII码 
 console.log('pink' > 'pin')  // true  从左往右一位一位开始比较 得出结果停止

 console.log(1 === NaN)      //NaN不等于任何值 包括它本身
 console.log(NaN === NaN)

																	//尽量不要比较小数
 console.log(0.1 + 0.2 === 0.3)  // 0.1 + 0.2 = 0.3000···004 小数精度问题
 console.log(0.1 + 0.2)

 console.log(3 > '2')

    逻辑运算符

    短路:只存在于 && 和 || 中，当满足一定条件会让右边代码不执行

    符号短路条件
    &&左边为false就短路
    ||左边为true就短路

    原因：通过左边能得到整个式子的结果，因此没必要再判断右边

    运算结果：无论 && 还是 || ，运算结果都是最后被执行的表达式值，一般用在变量赋值

    有5个值是当 false 来看 其余是真的

    false   数字0   ''  undefined   null

  • less

    注释

    在less文件中可以写两种注释

    1.可以直接用CSS注释（最后会编译展示在CSS文件中）

    /* 注释内容 */

    ，最后会编译展示在css文件中

    2.Less注释（只在less中使用，不会编译展示在css文件中）

    // 注释的内容

    变量

    变量：可以变化的量
语法：@变量名:变量值;
作用：编译的时候会把less中所有的变量名替换成变量值，这样可以统一修改某一个值（如主题色）
    @mainColor:#e92322; //@变量名:变量值;

.box {
  width: 100px;
  height: 100px;
  background-color: @mainColor;
}

    嵌套

    // less中的嵌套：less中选择器可以嵌套

// 1、后代选择器，选择器嵌套即可

// 2、子代选择器，前面使用>

// 3、并集选择器，前面直接写,

// 4、交集选择器，前面使用&（&表示上一级选择器）

// 5、伪元素，前面使用&（&表示上一级选择器）

.father {  
  width: 300px;  
  height: 300px;  
  background-color: red;  

  // 后代选择器：通过嵌套表示后代关系  

  .son {    
    width: 100px;    
    height: 100px;    
    background-color: blue;  

  }  

  // 子代选择器：通过嵌套 + > 表示 

  >.son {    

    background-color: red;  

  }  

  // 并集选择器：通过嵌套可以省略父级选择器  

  .one,  
  .two {    
    background-color: yellow;  
  }  

  // 交集选择器：&表示上一级选择器  

  &.red {    
    background-color: red;  
  }      

  // 结构伪类选择器：&表示上一级选择器  

  &:nth-child(1) {    
    background-color: red;  
  }  

  // 链接伪类选择器：&表示上一级选择器 

  &:hover {    
    background-color: green;  
  }  
  // 伪元素：&表示上一级选择器  

  &::after {    content: '';  
  }
}

    运算

    .box {  
  width: 200px;  
  height: 200px;  
  background-color: pink;  
  // 伪类的写法  
  &:hover {    
    // less中可以直接计算加减乘除计算的，编译之后会把计算的结果直接显示在css文件中。之后学习的rem布局中需要使用到less运算的功能    
    width: 200px * 2;    
    width: (200px / 3);    
    width: 200px + 100;    
    width: 200px - 100;  
  }
}

    注意点： 在 less 4.0 版本之后， 除法运算/ 如果在括号 () 外，不会执行除法，推荐使用 () 包裹即可

    *函数

    语法：.函数名() { 重复的样式 }

    // 针对于页面中重复的代码
// 1、之前：抽取出公共类——》给需要的标签加类名 
.common {   
  width: 300px;   
  height: 300px; 
}
// 2、现在：less中的函数——》在选择器中调用
// 语法：.函数名() { 重复的代码 }

// 定义函数
.common() {  
  width: 300px;  
  height: 300px;
}

.red {  
  // 使用函数 
   .common();  
   background-color: red;
}

    *引入

    (例：将base.less引入index.less，可以直接编译成一个css文件，减少html标签)

    语法
     @import '需要引入的less文件的路径'; 
 //注意点：一般引入的文件写在最前面，保证自己的样式写在后，优先

 例：
 @import 'base.less';

  • iconfont全选加入购物车

    Array.from(document.querySelectorAll('.icon-cover'), el => el.children[0].click())

  • flex布局（弹性布局、伸缩布局）

    设置了 display：flex; 的盒子会变成一个弹性盒子。弹性盒子会多出了主轴和侧轴的概念。

    • 主轴：默认水平向右
    • 侧轴：默认垂直向下，与主轴垂直

    注意点： 弹性盒子内部的子元素会默认沿着主轴方向排布！

    在flex布局中一般会把父元素称之为：flex容器，子元素称之为：flex项目

    什么时候用flex布局

    flex布局是css3中新出的布局方式，存在一定的兼容性问题

    传统布局弹性布局
    兼容性好css3新布局，PC端中存在兼容性问题（如：IE）
    布局繁琐布局方便
    常用于PC端布局常用于移动端布局

    布局方法的原则：

    • 如果是pc端页面布局，我们一般还是考虑传统布局方式
    • 如果是移动端或者不考虑兼容性问题的pc端页面布局，我们一般就可以考虑flex弹性布局如果不用考虑兼容性问题，flex布局会更加方便

    主轴方向 flex-direction

    弹性盒子中主轴方向默认是水平向右的。

    但是其实可以通过flex-diretion 属性修改主轴的方向

    取值效果（主轴方向）
    row水平向右（默认）
    row-reverse水平向左
    column垂直向下
    column-reverse垂直向上

    主轴对齐方式 justify-content

    效果取值
    向主轴开始方向对齐flex-start
    向主轴结束方向对齐flex-end
    居中对齐center
    让空白环绕盒子显示space-around
    空白只在两者之间显示space-between
    空白均分space-evenly

    单行侧轴对齐方式 align-items

    效果属性名
    向侧轴开始方向对齐flex-start
    向侧轴结束方向对齐flex-end
    居中对齐center
    拉伸显示（默认值）stretch

    stretch：让子盒子在侧轴方向拉伸显示

    只有当子元素在侧轴方向没有设置宽度或者高度时，才会有拉伸效果（否则以设置的值为准）

    注意点：

    • 侧轴方向不设置大小会默认拉伸，主轴方向不设置大小会由内容撑开
    • 主轴如果变成垂直方向，侧轴会变成水平方向

    是否换行 flex-wrap

    flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，此时子盒子会默认压缩显示。

    此时，如果需要设置子元素换行显示，可以使用属性 flex-wrap

    属性值效果
    nowrap不换行（默认值）
    wrap换行

    多行侧轴对齐方式 align-content

    取值效果
    flex-start向侧轴的开始位置对齐
    flex-end向侧轴的结束位置对齐
    center居中对齐
    stretch子元素高度拉伸显示（只有没设高才有效果）
    space-around空白环绕盒子显示
    space-between空白只在盒子之间显示

    align-items与align-content的区别：

    • 如果子元素没有换行，只有一行的时候使用 align-items
    • 如果子元素有多行，此时 控制多行 的时候使用 align-content

    分配子元素空间 flex

    作用： 按照份数分配父元素主轴（宽度）的剩余空间

    优先分配具体的宽度，剩余的空间再按照份数分配。

    代码： flex:份数（数字）;

    * 子元素排序 order

    作用： 设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认是0

    代码： order：数字;

    单个子元素侧轴对齐方式 align-self

    取值效果
    flex-start向侧轴的开始位置对齐（默认相当于顶部对齐）
    flex-end向侧轴的结束位置对齐（默认相当于底部对齐）
    center居中对齐
    stretch子元素高度拉伸显示（只有没设高才有效果）
    • 取值和 align-items 取值一样

  • CSS绘制三角形（各种角度）

    一、前言

    三角形实现原理：

    1. 宽度width为0；height为0；
    2. 有一条横竖边（上下左右）的设置为border-方向：长度 solid red，这个画的就是底部的直线。其他边使用border-方向：长度 solid transparent。
    3. 有两个横竖边（上下左右）的设置，若斜边是在三角形的右边，这时候设置top或bottom的直线，和右边的斜线。若斜边是在三角形的左边，这时候设置top或bottom的直线，和左边的斜线。

    二、实现

    2.1 Triangle Up

    #triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

    2.2 Triangle Down

    #triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

    2.3 Triangle Left

    #triangle-left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid red;
    border-bottom: 50px solid transparent;
}

    2.4 Triangle Right

    #triangle-right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid red;
    border-bottom: 50px solid transparent;
}

    2.5 Triangle Top Left

    #triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

    2.6 Triangle Top Right

    #triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;

}

    2.7 Triangle Bottom Left

    #triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}

    2.8 Triangle Bottom Right

    #triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}

    纯 CSS 实现绘制各种三角形（各种角度） – saucxs – 博客园

  • CSS3 placeholder字体颜色大小

    一、须知

    placeholder属性是CSS3中新增加的属性，IE9和Opera12以下版本的CSS选择器均不支持占位文本。

    二、设置placeholder文字颜色、字号

    方式1：因为每个浏览器的CSS选择器都有所差异，所以需要针对每个浏览器做单独的设定(可以在冒号前面写input和textarea)。

    ::-webkit-input-placeholder { /* WebKit browsers */
  color: #999;
  font-size: 16px;
}

::-moz-placeholder { /* Mozilla Firefox 19+ */
  color: #999;
  font-size: 16px;
}

:-ms-input-placeholder { /* Internet Explorer 10+ */
  color: #999;
  font-size: 16px;
}

    方式2：建议使用该方式 如果是在手机客户端webview 只使用－webkit内核方式即可。

    input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #666;
  font-size: 16px;
}

input:-moz-placeholder, textarea:-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #666;
  font-size: 16px;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #666;
  font-size: 16px;
}

  • 文本超出自动加省略号

    /* 1.文本不换行 */
white-space:nowrap;
/* 2.溢出隐藏 */
overflow:hidden;
/* 4.加省略号 */
text-overflow:ellipsis;

  • 解决外边距塌陷（折叠）:行内元素的margin和padding无效

    外边距折叠

    1.外边距合并

    场景:垂直布局的块级元素，上下的margin会合并

    结果:最终两者距离为margin的最大值

    解决方法:避免就好
    • 只给其中一个盒子设置margin即可

    2.外边距塌陷

    场景:互相嵌套的块级元素，子元素的 margin-top 会作用在父元素上

    结果:导致父元素一起往下移动

    解决方法:

    1. 给父元素设置 border-top 或者 padding-top (分隔父子元素的margin-top)
    2. 给父元素设置overflow:hidden
    3. 转换成行内块元素
    4. 设置浮动

    行内元素的margin和padding无效情况

    场景:给行内元素设置margin和padding时

    结果:

    • 水平方向的margin和padding布局中有效
    • 垂直方向的margin和padding布局中无效