web day4 笔记

1.平面转换

Transition all 时间； 过渡时间

Transform：translateX（） translateY（） x，y轴平移

                   ：translate（x，y）

Transform：rotate（？deg）  旋转

                     RotateX（？deg） 绕x轴转

                                Y（？deg）绕y轴转

Transform：scale（）； 缩放

                            X，Y

Transform-origin：left；改变旋转中心

2.渐变

Background-image：repeating-linear-gradient（角度，颜色，颜色，颜色……）；

3. 3d转换

Perspective：？px 3d视距

Transform-style：preserve-3d  3d显示

Transform：translateZ：？px； z轴移动

4.动画

定义一个动画

@keyframes myframes{

         From{

                  

}

To{

}

}

@keyframes myframes{

         0%{

}

20%{

}

……

}

调用

Animation：myframes  3s（速度） linear（直线的）  0s（开始时间）  infinite（重复播放）；

6.媒体查询

@media screen and （max-width：？px） and （min-width：？px）{

         .box{

        

}

}

7.grid布局

display: grid;

/* 代码运行结果如下图5-12。 */

/* 可以使用 百分比*/

grid-template-columns: 20% 20% 20% 20% 20%;

/* 也可以使用确定的长度 */

/* grid-template-columns: 200px 200px 200px 200px; */

grid-template-rows: 200px 200px 200px 200px;

/* 也可以配合确定长度，使用fr进行百分比的划分 */

width: 300px;

/* grid-template-columns: repeat(3, 1fr); */

height: 400px;

/* grid-template-rows: repeat(3, 200px); */

/* 单元格之间的间距 */

/* grid-gap: 30px; */

grid-column-gap: 30px;

JS

1.导入方式

行内引入

<button>……</button>

内部引入

    <script>

       ……

   </script>

外部引入

<script src="./01-js.js"></script>

2.对话框

Alert 警示框

Prompt 输入框

Console.log() 控制台输入语句

Document.write(“”) 输入输出语法

// 单行注释

/**多行注释

*

*

*

*/

3.变量

Let uname 变量声明

Uname =？ 变量赋值

变量的初始化

Let age =?

Console.log(uname)

Console.log(age)

Let声明的变量不能再次声明，变量可以重复赋值

变量命名规范

1. 不能使用关键字
2. 由下划线，字母，数字，$组成，不能以数字开头
3. 小驼峰命名
4. 最好具有含义

4.常量

Const 定义的常量不能再次赋值

5.数据类型转换

强制类型转换

Let a=parseInt（）

6.模板字符串

Console.log(‘我的名字是：’+ a)

Console.log(`我的名字是：${a}`)

7.运算符

        1>算术运算符

        + , - , * , / , % , **

         2>比较运算符

         <  >  <= ……

         == 会做类型转换然后比较

        === 类型不同，结果直接false

        3>逻辑运算符

        && 与

        || 或

        ！非

        4>赋值运算符

         +=  -=

        5>自增自减

         先赋值再加减

        A++   a- -

        先加减再赋值

        ++a    - - a

         6>三元运算符

         ？a：b

8.选择结构

If语句:

If{

}else if{

}

        

         Switch语句：

         Switch（）{

         Case ”1”:

                   Alert();

                   Break;

         Case “2”:

                  

                   ……

}

9.循环结构

For（let i=1；i<100; i++）{

}

        

         Let i=0

         While(i<100){

         ++i;

}

Let i=0

Do{

        

         i++;

}while(i<100)

Break 打断循环

Continue 跳出本次循环

For    in   

For    of