自定义动画和盒子模型，function函数，js

自定义动画

<style type="text/css">
			#wai {
				width: 200px;
				height: 300px;
				position: absolute;
				background-image: url(img/girl1.jpg);
				background-size: 100% 100%;
				animation-name: guanggao;
				animation-duration: 5s;
				animation-iteration-count: infinite;
				animation-timing-function: linear;
				/*动画的执行速率*/
				animation-play-state: running;

			}
			#wai:hover{
				animation-play-state:paused;
			}
			#gb:hover{
				cursor: pointer;
			}
			@keyframes guanggao {
				0% {
					left: 100px;
					top: 0px;
					background-image: url(img/girl1.jpg);
				}

				10% {
					left: 300px;
					top: 0px;
					background-image: url(img/girl1.jpg);
				}


				20% {
					left: 500px;
					top: 100px;
					background-image: url(img/girl2.jpg);
				}

				30% {
					left: 500px;
					top: 600px;
					background-image: url(img/girl2.jpg);
				}

				40% {
					left: 900px;
					top: 300px;
					background-image: url(img/girl3.jpg);
				}

				50% {
					left: 700px;
					top: 300px;
					background-image: url(img/girl3.jpg);
				}

				60% {
					left: 200px;
					top: 600px;
					background-image: url(img/girl4.jpg);
				}

				70% {
					left: 200px;
					top: 200px;
					background-image: url(img/girl4.jpg);
				}

				80% {
					left: 600px;
					top: 400px;
					background-image: url(img/girl5.jpg);
				}

				90% {
					left: 900px;
					top: 300px;
					background-image: url(img/girl5.jpg);
				}

				100% {
					left: 200px;
					top: 600px;
					background-image: url(img/girl4.jpg);
				}
			}
		</style>
		<script type="text/javascript">
			function guanBi(){
				var waiDiv=document.getElementById("wai");
				waiDiv.style.display='none';
			}
		</script>

就像上面代码一样，自定义动画可以比过渡动画更加自由的控制整个变化过程，可以通过整个过程的百分比来控制，里面有的指令作用我这里说一下：
**animation-name: ** 自定义动画的名字，用来下面百分比动画的控制。
animation-duration: 动画的执行时间
animation-iteration-count: infinite; 动画执行的次数，infinite为永远执行
animation-direction: reverse; 动画正向或反向播放
animation-play-state:running （paused） 动画运行或者暂停
@keyframes+动画名字 在里面可以按照百分比控制动画
如果让动画出现像广告那样一点就关掉，可以在动画停止后使用 display=‘none’; 让整个动画隐藏掉就好。

盒子模型

所谓的盒子模型，就是针对我们平时大框内套了好几个小框并且想让它们均匀分布其中这种情况而存在的。
display: flex; 将外面的大框设置为盒子模式
flex-direction:row 盒子里面的子层排列方向 row 横向排列 column 纵向排列
justify-content:center; 盒子中的子层的对齐方式 左中右
flex-wrap:nowrap; 当所有的子层，高度或宽度超过盒子的高度或宽度后是否要自动换行
margin: auto; 里面的子层 上下左右间距自动适配
在子层里，style=“order:2;” 里面的数字可以改变子层的排列顺序，它可以按照数字从小到大排列

JS

JS的数据类型：Undefined 未定义、Null 空、Boolean 布尔、Number 数字 和 String 字符串
JS中定义变量 用关键字var，它是一种弱类型的语言，基本定义各种变量都是它
es6中有了定义常量的方法const
创建String类的语法

         var str=new String("abcd");
		
		
			var str2=String("abcdef")
		
			
			var str3="abcdefefe";
		

JS中数据类型自动转换

在JS中有自动类型转换，因此我们不需要为类型转化而调用什么方法，但是在类型转换过程中一旦失败就会报错，其中NaN就是这样的。
当某个类型向数字类型转时如果失败就会变成NaN.

NaN

NaN参与比较运算结果都是false
NaN不等于NaN
NaN 不等于 NaN 结果才是真
NaN的原始数据类型是Number
NaN 参与数学运算结果都是NaN

布尔型

布尔类型转数字:true转换成1 false转换成0

对象

对象转布尔，对象为null 转false 不为null转成true

JS中的几个常用语法

document.write 往页面上打印信息
alert(sum); 在页面上弹出窗口显示
== js中的比较运算符也带有自动转换功能如 var a=“123” ，var b=123 ， a==b为true

=== 先比较两个数据的类型是否一样,如果类型不一样,那直接就是false 如果类型一样就再比较值，因此上面为false

JS中的function函数

arguments对象

在函数内部有这个隐藏的对象,他把调用函数时,传过来的实参全部接收了。他本身是一个数组对象。也就是说，即使你这个方法中不需要或者需要的参数很少，而我调用传了大量的参数，那么你传的参数全都被arguments接收了

let关键字

使用let关键字定义的数据仅在本方法内有效，出了方法调不到

调试模式

console.log(num);
打开浏览器， 按 F12会进入调试模式

闭包

JS中的闭包，就是在一个函数中再有其它的函数，这个函数不接收参数,他内部要用的值 可以 他外部的函数去获取。所以闭包通常用于运算，因为内部函数不会受到外部影响。

JS中的局部和全局变量

局部 JavaScript 变量
在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。
您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕，本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

String对象中的方法

，全部可以在菜鸟上查
charAt() 返回在指定位置的字符。 1 3
charCodeAt() 返回在指定的位置的字符的 Unicode 编码。
concat() 连接字符串。
indexOf() 检索字符串。
lastIndexOf() 从后向前搜索字符串。
match() 找到一个或多个正则表达式的匹配。
replace() 替换与正则表达式匹配的子串。
slice() 提取字符串的片断，并在新的字符串中返回被提取的部分。
split() 把字符串分割为字符串数组。
substring() 提取字符串中两个指定的索引号之间的字符。
substr() 从起始索引号提取字符串中指定数目的字符。
toLowerCase() 把字符串转换为小写。 1 3
toUpperCase() 把字符串转换为大写。
trim() 去掉字符串两端空格