day9

最新推荐文章于 2021-10-16 14:58:08 发布

成仙路上多枯骨

最新推荐文章于 2021-10-16 14:58:08 发布

阅读量283

点赞数

本文链接：https://blog.csdn.net/weixin_45615605/article/details/101066433

版权

day9

before和after伪元素(详解)

伪元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样

注意：

一定要有content，否则伪元素不起作用

过渡(CSS3)

transition: 要过渡的属性  花费时间  运动曲线  何时开始;
如果有多组属性变化，还是用逗号隔开。

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性。
transition-property	规定应用过渡的 CSS 属性的名称。
transition-duration	定义过渡效果花费的时间。默认是 0。
transition-timing-function	规定过渡效果的时间曲线。默认是 “ease”。
transition-delay	规定过渡效果何时开始。默认是 0。

2D变形(CSS3) transform

可以实现元素的位移、旋转、倾斜、缩放，配合过渡和即将学习的动画知识

移动 translate(x, y)

translate 移动平移的意思

translate(50px,50px);

使用translate方法来将文字或图像在水平方向和垂直方向上分别垂直移动50像素。

可以改变元素的位置，x、y可为负值；

 translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）
 translateX(x)仅水平方向移动（X轴移动）
 translateY(Y)仅垂直方向移动（Y轴移动）

缩放 scale(x, y)

可以对元素进行旋转，正值为顺时针，负值为逆时针；

transform:rotate(45deg);

transform-origin可以调整元素转换变形的原点

transform-origin: 50px 10px ;

如果是4个角，用left,top，这些值，如果想要精确的位置，就用像素值

倾斜 skew(deg, deg)

transform:skew(30deg,0deg);

3D变形(CSS3) transform

rotateX()

就是沿着 x 立体旋转.

roateY()

沿着y轴进行旋转

rotateZ()

沿着z轴进行旋转

透视(perspective)

透视原理：近大远小。
浏览器透视：把近大远小的所有图像，透视在屏幕上。
perspective：视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置

注：并非任何情况下需要透视效果，根据开发需要进行设置。

perspective 一般作为一个属性，设置给父元素，作用于所有3D转换的子元素

translateX(x)

仅水平方向移动**（X轴移动）

translateY(y)

仅垂直方向移动（Y轴移动）

translateZ(z)

前后移动，直观的表现就是大小变化

translate3d(x,y,z)

[注意]其中，x和y可以是长度值，也可以是百分比，百分比是相对于其本身元素水平方向的宽度和垂直方向的高度和；z只能设置长度值

backface-visibility

backface-visibility 属性定义当元素不面向屏幕时是否可见。

动画(CSS3) animation

语法格式：

animation:动画名称 动画时间 运动曲线  何时开始  播放次数  是否反方向;

day10

JavaScript是什么

html CSS

行为标准

JavaScript是一种运行在***客户端*** 的***脚本语言***
JavaScript的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

JavaScript最初的目的

为了表单的验证操作

JavaScript现在的意义(应用场景)

网页特效
服务端开发(Node.js)
命令行工具(Node.js)
控制硬件-物联网(Ruff)
游戏开发(cocos2d-js)
手机App(Cordova)
桌面应用程序(Electorn)

JavaScript和HTML、CSS的区别

1.html：提供网页结构。提供网页的内容

2.css：美化界面

3.js：控制网页内容，给网页增加动态效果

JavaScript的组成

1.ECMAscript

2.DOM

3.BOM

ECMAScript - JavaScript的核心（语法）

ECMA 欧洲计算机制造联合会

网景：javascript

微软：JScript

定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准,与具体实现无关

html不算变成，js算，因为逻辑结构

BOM - 浏览器对象模型

一套操作浏览器功能的API

通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等

DOM - 文档对象模型

一套操作页面元素的API

DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作

JavaScript初步学习

CSS：行内样式、嵌入样式、外部样式

JavaScript的书写位置

写在行内

<input type="button" value="按钮" onclick="alert('Hello World')" />

写在script标签中

<head>
  <script>
    alert('Hello World!');
  </script>
</head>

写在外部js文件中，在页面引入

<script src="main.js"></script>

注意点

引用外部js文件的script标签中不可以写JavaScript代码

变量

如何使用变量

var声明变量

var age;

变量的赋值

var age;
age = 18;

同时声明多个变量

var age, name, sex;
age = 10;
name = 'zs';

同时声明多个变量并赋值

var age = 10, name = 'zs';

变量在内存中的存储

var age = 18;

变量的命名规则和规范

规则-必须遵守的，不遵守会报错
- 由字母，数字，下划线，$符号组成，不能以数字开头
- 不能是关键字和保留字
- 区分大小写
规范：不遵守不报错
- 变量名一定要有意义
- 驼峰命名法，userName，首字母小写，后面单词的首字母大写

下面哪些变量名不合法

a	        对
1           错
age18       对
18age       错
name        对
$name       对
_sex        对
&sex        错
theworld    错
theWorld    对

数据类型

简单数据类型

Number、String、Boolean、Undefined、Null

Number类

数值字面量：数值的固定值的表示法

110 1024 60.5

进制

十进制默认
十六进制
	var num = 0xA;
八进制
	07 
	012
	2*1 + 1*8
	112
	2*1 + 1*10 + 1*10*10
注意，字面值超过范围，前导值会被忽略，后面的值会当作十进制解析

浮点数

浮点数的精度问题

最高精度时17位小数
不要判断两个浮点数是否相等

数值范围

最小值：Number.MIN_VALUE，这个值为： 5e-324
最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
无穷大：Infinity
无穷小：-Infinity

数值判断

NaN not a number ,不是数字的number型

NaN与任何都不相等

String类型

‘abc’ “abc”

字符串字面量

‘今天天气真好’
转义符
字符串长度

length属性用来获取字符串的长度
字符串拼接

字符串拼接使用 + 连接

1.两边只要有一个=是字符串，+就实现拼接功能

2.都是数字，就是算数功能

Boolean类型

Boolean字面量： true和false，区分大小写
计算机内部存储：true为1，false为0

Undefined和Null

undefined表示一个声明了没有赋值的变量，变量只声明的时候值默认是undefined
null表示一个空，变量的值如果想为null，必须手动设置

获取变量的类型

typeof

注释

单行注释

用来描述下面一个或多行代码的作用

// 这是一个变量
var name = 'him';

多行注释

用来注释多条代码

/*
var age = 18;
var name = 'zs';
console.log(name, age);
*/

数据类型转换

转换成字符串类型

toString()
String()

存在的意义是，有的属性没有toString方法，这个使用String（）
拼接字符串方式

num + “”，当 + 两边一个操作符是字符串类型，一个操作符是其它类型的时候，会先把其它类型转换成字符串再进行字符串拼接，返回字符串

转换成数值类型

Number()
parseInt()
parseFloat()
+，-0等运算

转换成布尔类型

Boolean()

操作符

运算符 operator

5 + 6

表达式组成操作数和操作符，会有一个结果

算术运算符

+ - * / %

一元运算符

一元运算符：只有一个操作数的运算符

前置++

var num1 = 5;
++ num1; 

var num2 = 6;
console.log(num1 + ++ num2);

后置++

var num1 = 5;
num1 ++;    
var num2 = 6 
console.log(num1 + num2 ++);

猜猜看

var a = 1; var b = ++a + ++a; console.log(b);    
	b = 2 + 3= 5
var a = 1; var b = a++ + ++a; console.log(b);   
	b = 1 + 3 = 4
var a = 1; var b = a++ + a++; console.log(b);
  b = 1 + 2 =3
var a = 1; var b = ++a + a++; console.log(b); 
    b = 2 +2 =4

逻辑运算符(布尔运算符)

&& 与 两个操作数同时为true，结果为true，否则都是false
|| 或 两个操作数有一个为true，结果为true，否则为false
!  非  取反

关系运算符(比较运算符)

<  >  >=  <= == != === !==

==与===的区别：==只进行值的比较，===类型和值同时相等，则相等

var result = '55' == 55;  	// true
var result = '55' === 55; 	// false 值相等，类型不相等
var result = 55 === 55; 	// true

赋值运算符

= += -= *= /= %=

例如：
var num = 0;
num += 5;	//相当于  num = num + 5;

运算符的优先级

优先级从高到低
	1.()
	2.一元运算符 ++ -- !
	3.算数运算符  先* /  %后 + -
	4.关系运算符 > < >=...
	5.相等运算符    ==  !== === !=
	6.逻辑运算符     先&&   再||
	7.赋值运算符

// 练习1：
4 >= 6 || '人' != '阿凡达' && !(12 * 2 == 144) && true
			true
// 练习2：
var num = 10;
5 == num / 2 && (2 + 2 * num).toString() === '22'
       true                     true

表达式和语句

表达式

一个表达式可以产生一个值，有可能是运算、函数调用、有可能是字面量。表达式可以放在任何需要值的地方。

语句

语句可以理解为一个行为，循环语句和判断语句就是典型的语句。一个程序有很多个语句组成，一般情况下;分割一个一个的语句

流程控制

程序的三种基本结构

顺序结构

从上到下执行的代码就是顺序结构

程序默认就是由上到下顺序执行的

分支结构

根据不同的情况，执行对应代码

循环结构

循环结构：重复做一件事情

分支结构

if语句

语法结构

if (/* 条件表达式 */) {
  // 执行语句
}

if (/* 条件表达式 */){
  // 成立执行语句
} else {
  // 否则执行语句
}

if (/* 条件1 */){
  // 成立执行语句
} else if (/* 条件2 */){
  // 成立执行语句
} else if (/* 条件3 */){
  // 成立执行语句
} else {
  // 最后默认执行语句
}

三元运算符

表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法

switch语句

语法格式:

switch (expression) {
  case 常量1:
    语句;
    break;
  case 常量2:
    语句;
    break;
  case 常量3:
    语句;
    break;
  …
  case 常量n:
    语句;
    break;
  default:
    语句;
    break;
}

布尔类型的隐式转换

流程控制语句会把后面的值隐式转换成布尔类型

转换为true   非空字符串  非0数字  true 任何对象
转换成false  空字符串  0  false  null  undefined

// 结果是什么？
var a = !!'123';

循环结构

在javascript中，循环语句有三种，while、do…while、for循环。

while语句

基本语法：

// 当循环条件为true时，执行循环体，
// 当循环条件为false时，结束循环。
while (循环条件) {
  //循环体
}

do…while语句

do…while循环和while循环非常像，二者经常可以相互替代，但是do…while的特点是不管条件成不成立，都会执行一次。

基础语法：

do {
  // 循环体;
} while (循环条件);

成仙路上多枯骨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day9

day9before和after伪元素(详解)伪元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样注意：一定要有content，否则伪元素不起作用过渡(CSS3)transition: 要过渡的属性花费时间运动曲线何时开始;如果有多组属性变化，还是用逗号隔开。属性描述transition简写属性，用于在一个属性中设置四...
复制链接

扫一扫