端盒日记Day02

JS

本本本本本地存储

localStorage

作用：可以将数据永久存储在本地（用户电脑），除非手动删除，否则关闭页面也会存在

特性：a.可多窗口（页面）共享（同一浏览器可以共享）b.以键值对的形式存储使用

语法：

存储数据：localStorage.setItem('key', 'value')

获取数据：localStorage.getItem('key')

删除：localStorage.removeItem('key')

本地原来若有数据使用setItem就是修改，原来没有就是增加

sessionStorage

特性：a.生命周期为关闭浏览器窗口  b.在同一个窗口（页面）下数据可以共享  c.以键值对的形式存储  d.用法跟localStorage基本相同

本地存储只能存储字符串类型

存储复杂数据类型

需要将复杂的数据类型转换为JSON字符串，再存储到本地

语法：JSON.stringfy(复杂数据类型)

?? 本地存储里面取来的是字符串，不是对象，无法直接使用

！！把取出来的字符串转换为对象

语法：JSON.parse(JSON字符串)

map和join方法拼接字符串

数组中map方法 迭代数组 map可遍历数组处理数据，并且返回新的数组

例如：

const arr = ['red', 'blue', 'green']

const newArr = arr.map( function(ele) {

         return ele + '颜色'

})

console.log(newArr) // ['red颜色', 'blue颜色', 'green颜色']

map也称为映射，指两个元素的集之间元素相互"对应"的关系         

map重点在于有返回值，forEach没有返回值

数组中join方法：把数组中所有元素转换为一个字符串

const arr = ['red颜色', 'blue颜色', 'green颜色']

console.log(arr.join('')) // red颜色blue颜色green颜色

数组元素是通过参数里面指定的分隔符进行分隔的

参数：空字符串('') --> 则所有元素之间没有任何字符

           括号内为空 --> 则逗号分隔

CSS

旋转

属性：transform：rotate(角度)

旋转单位角度：deg角度 正顺逆负

改变转换原点：默认情况下，转换中心是盒子中心点

属性：transform-orgin: 水平原点位置 垂直原点位置

取值：方位名词(left, top, right, bottom, center) 、px、 %

多重转换

效果就是那个轮胎滚走了

技巧：先平移再旋转

transform：translate() rotate()

!!注意!!:

1.多重转换是复合属性，具有层叠性

2. 以第一种转换形态的坐标轴为准 这也是为什么要先平移再旋转才能达到滚走的效果

缩放

属性：transform: scale(缩放倍数)

           transform: scale(X轴缩放倍数，Y轴缩放倍数)

技巧：通常只为scale设置一个值，表X轴Y轴等比例缩放

           取值大于1表示放大，小于1表示缩小

倾斜

属性：transform: skew()

单位deg 正左负右

渐变

        1. 线性渐变

background-image: linear-gradient(

        渐变方向,

                颜色1 终点位置，

                颜色2 终点位置,

                ...

);

取值：

渐变方向：①to 方位名词 ②角度度数

终点位置：%

        2. 径向渐变

作用：可以给按钮添加高光效果

属性：background-image: radial-gradient (

                半径 at 圆心位置,

                颜色1 终点位置,

                ...

           );        

取值：

半径可以是2条，则为椭圆

圆心位置取值：px、%、方位名词