一、css的属性
1.形变和过渡
形变：tranform
过渡：transition
1.1形变
rotate(degree):旋转，指定的标签需要旋转的度数，degree表示度数
scale():指定的标签放大或者缩小【拉伸或者缩放】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #transform{ width: 200px; height: 200px; background-color: orange; /*外边距*/ margin: 100px; /*设置旋转点*/ /*center left right top bottom*/ transform-origin: center left; /*设置旋转的角度*/ /*默认情况下沿着z轴旋转的 * rotateX() * rotateY() * deg--->degree */ /*transform: rotate(60deg);*/ /*拉伸形变*/ /*默认情况下横向拉伸和纵向拉伸是同时进行的 * scaleX(num) scaleY(num) * num > 1 :表示放大num倍 * 0<num<1 :表示缩小num倍 */ /*transform: scale(1);*/ transform: scale(2) rotate(30deg); } </style> </head> <body> <div id="transform"></div> </body> </html>
1.2过渡
transition-duration：过渡的时间
transition-property：需要过渡的标签
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #transition{ width: 200px; height: 200px; background-color: orange; /*外边距*/ margin: 100px; transform: rotate(-90deg); color: white; /*添加过渡 * 哪个标签需要过渡 * 发生过渡的时间 */ transition-duration: 5s; transition-property: all; } </style> </head> <body> <div id="transition">形变和过渡</div> </body> </html>
1.3案例：照片墙
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #box{ width: 100%; height: 700px; /*auto:表示自动适配*/ margin: 50px auto; background-color: orange; } /*共性*/ img{ width: 180px; height: 220px; border: solid 3px white; margin: 15px; /*过渡*/ transition-duration: 2s; /*指定某个属性发生变化的时候触发过渡属性*/ transition-property: transform; } /*个性*/ /*每张图片旋转不同的角度*/ div img:nth-child(1){ transform: rotate(15deg); } div img:nth-child(2){ transform: rotate(5deg); } div img:nth-child(3){ transform: rotate(-15deg); } div img:nth-child(4){ transform: rotate(10deg); } div img:nth-child(5){ transform: rotate(-5deg); } div img:nth-child(6){ transform: rotate(15deg); } div img:nth-child(7){ transform: rotate(5deg); } div img:nth-child(8){ transform: rotate(-10deg); } div img:nth-child(9){ transform: rotate(15deg); } /*设置鼠标悬浮*/ #box > img:hover{ transform: scale(1.2) rotate(0deg); } </style> </head> <body> <div id="box"> <img src="img/photowall/pic1.jpg"/> <img src="img/photowall/pic2.jpg"/> <img src="img/photowall/pic3.jpg"/> <img src="img/photowall/pic4.jpg"/> <img src="img/photowall/pic5.jpg"/> <img src="img/photowall/pic6.jpg"/> <img src="img/photowall/pic7.jpg"/> <img src="img/photowall/pic8.jpg"/> <img src="img/photowall/pic9.jpg"/> </div> </body> </html>
2.动画
2.1使用
animation，主要是结合形变和过渡使用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width: 200px; height: 200px; background-color: purple; /*设置旋转的轴点*/ transform-origin: left top; /*给标签添加动画*/ /*参数：动画名称 动画持续的时间 动画的形式 动画执行的次数 * 动画名称：自定义 * 动画持续的时间：单位为秒，表示当整个动画执行一次需要的时间 * 动画的形式： * 线性动画:linear * 由快到慢:ease * *动画执行的次数：默认为1次，无限次：infinite * * */ animation:animate 5s linear; } /*使用animation的时候，动画需要手动设置 * animate-----》动画的名称 * 表示方法一 * from：起始动画状态 * to：最终动画状态 * * 表示方法二 * 可以使用百分比，取值范围0%~100% * * */ /*注意：动画执行完毕之后会恢复到最初状态*/ @keyframes animate{ /*from{margin-left: 200px;} to{transform: rotate(180deg);}*/ 0%{ background-color: blue; } 10%{ background-color: green; } 25%{ transform: rotate(50deg); } 60%{ background-color: orange; transform: scale(1.2); } 100%{ margin-right: 10px; } } </style> </head> <body> <div></div> </body> </html>
2.1案例：时钟
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #clock{ width: 300px; height: 300px; border-radius: 50%; border: solid 10px gray; margin: 150px auto; /*设置父标签的有效定位，充当其他标签的参照物*/ position: relative; } /*刻度*/ /*共性*/ #clock .line{ width: 5px; height: 310px; position: absolute; left: 50%; background-color: gray; } /*个性*/ .line2{ transform: rotate(30deg); } .line3{ transform: rotate(60deg); } .line4{ transform: rotate(90deg); } .line5{ transform: rotate(1200deg); } .line6{ transform: rotate(150deg); } /*覆盖层*/ #cover{ position: absolute; width: 260px; height: 260px; border-radius: 50%; background-color: white; left:20px; top:20px; z-index: 1; } /*设置针*/ #clock .zhen{ position: absolute; /*设置旋转点*/ transform-origin: center bottom; } /*秒针*/ #clock .seconds{ width: 2px; height: 140px; background-color: blue; top:10px; left:151.5px; z-index: 2; animation: circle 60s steps(60) infinite; } /*分针*/ #clock .minute{ width: 4px; height: 120px; background-color: purple; top:30px; left:149.5px; z-index: 2; animation: circle 3600s infinite linear; } /*时针*/ #clock .hour{ width: 6px; height: 100px; background-color: red; top:50px; left:148px; z-index: 2; animation: circle 43200s infinite linear; } /*圆心*/ #dotted{ width: 20px; height: 20px; border-radius: 50%; background-color: gray; position: absolute; left:141px; top:140px; z-index: 3; } @keyframes circle{ from{transform: rotate(0deg);} to{transform: rotate(360deg);} } </style> </head> <body> <div id="clock"> <!--覆盖层--> <div id="cover"></div> <!--时分秒--> <div class="hour zhen"></div> <div class="minute zhen"></div> <div class="seconds zhen"></div> <!--刻度--> <div class="line line1"></div> <div class="line line2"></div> <div class="line line3"></div> <div class="line line4"></div> <div class="line line5"></div> <div class="line line6"></div> <!--圆心--> <div id="dotted"></div> </div> </body> </html>
二、综合案例
三、javascript简介
1.概念
是基于对象和事件驱动的脚本语言，主要应用在客户端【浏览器】，简称js
MoCha
基于对象：提供好了很多对象，可以直接使用
事件驱动：html做网站静态效果，js实现动态效果【可以和用户交互】
js的作用：操作html和css
2.特点
a.交互性【实现信息的动态交互】
b.安全性【不可以直接访问磁盘上的文件】
c跨平台型【只要是可以解析js的浏览器都可以执行，与平台无关】
3.和java的关系
a.开发公司
Java是由Sun公司开发的，后来被Oracle收购了
js是Netscape【网景公司】开发的
b.对象
Java是面向对象
js是基于对象
c.数据类型
Java是强类型语言【每种变量都有确定的数据类型】 int num = 10
js是弱类型语言，类似于Python【变量的类型由值决定】var num = 10
4.组成
a.ECMAScript
由ECMA定义的基本语法，包括变量，语句，函数，运算符等
b.BOM
Broswer Object Model，浏览器对象模型
c.DOM
Document Object Model，文档对象模型
5.和html的结合方式
5.1使用script标签
<script type="text/javascript">js代码</script>
注意：可以写在head中，也可以写在body中
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> alert("head~~~~~hello") </script> </head> <body> <script> alert("body~~~~~hello~~~~~~1") </script> <script> alert("body~~~~~hello~~~~~~2") </script> <!--script标签可以额出现在head或者body中 在同一个html文件中，script标签可以出现多次，按照先执行head，然后执行body中【按照顺序执行】 --> </body> </html>
5.2引入外部的js文件
仍然使用scrip标签，只是引入一个外部的js文件
<script type="text/javascript" src="js的相对路径"></script>
代码演示：
js文件
alert("hello 你好啊")html文件
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/text01.js"> </script> <script> alert("hgisijrhksrhsekhjt") </script> <!--注意：在一个script标签中如果引用了外部的就是文件，则将不能在标签中再书写js代码，否则无效--> <!--注意：一般将script标签写在body中，原因：先加载head，然后加载body， 而js的作用就是为了操作html和css，当script标签写在head中的时候，如果要操作某个html标签，则这个标签还未加载出来--> </head> <body> </body> </html>
6.注释
html：<!-- xxx --> css:/* xxx */ js: 单行注释：//xxxxxxx【ctrl+/】 # 多行注释：/* xxx */【ctrl+shift+/】 """"""
四、ECMAScript基本语法
1.变量的定义
使用关键字var定义变量，其他的写法和Python完全相同
举例：
Python：num = 10
js: var num = 10;
注意：在js中，每条语句的结尾最好添加一个分号，表示语句的结束
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.先声明，后赋值 var age; age = 18; //2.在声明的同时给变量赋值 var age1 = 20; //3.可以同时定义多个变量 //注意：多个变量之间使用逗号隔开，var关键字只需要出现一次 var name = "hello",age2 = 10; //4.js是弱类型的语言 //特点：容错性较高，在赋值的时候才能确定变量的数据类型 var b; b = 15; b = "abc"; //5.打印语句 //弹出一个提示框 //alert(age); //向浏览器的文档对象中写入一个数据 document.write(age); //在控制台打印日志 console.log(age) </script> </body> </html>
2.命名规范
a.变量名可以是字母，数字，下划线以及美元符[$]
b.第一个字符不能为数字
c.不能使用关键字
d.区分大小写
e.遵循驼峰命名法
3.数据类型
Python：数字类型，字符型，列表，元组，字典，集合，函数，类，布尔
3.1一般数据类型
Boolean:布尔类型
Number：数字类型【整型和浮点型】
String：字符串类型
Object：对象类型
Array：数组
Function：函数
RegExp:正则表达式
3.2特殊数据类型
Null：是一个只有一个值的数据类型，null，他表示一个空对象的引用【指针】，类似于Python中的None，使用typeof操作符检测null返回的结果为object
Undefined：未定义的变量，定义一个变量，但是没有给该变量父初始值【var a; a是Undefined类型】
NaN:Not A Number,不是一个数字
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.null var c = null; document.write(c); //注意：在js中如果要操作html的标签，不能直接使用，必须通过js代码操作 document.write("<br />"); document.write("hello"); document.write("<br />"); //2.Undefined //注意：在使用变量之前最好能赋值 var b; document.write(b); document.write("<br />"); //undefined派生自null，表示值相同的 document.write(undefined == null);//true //类型，两个变量属于不同的数据类型 document.write(typeof c == typeof b);//false document.write("<br />"); //3.NaN var a = 0 / 0; document.write(a); //isNaN():判断一个变量是否不是一个数字，是number返回false，不是数字返回是true document.write(isNaN("hello")); document.write("<br />"); //注意：isNaN除了可以判断之外，还可以将字符串试图转换，如果能转换为number则仍然返回false document.write(isNaN("123")); document.write("<br />"); document.write(isNaN(123)); document.write("<br />"); //注意：在js中，布尔值可以被当做数字使用，true代表是1，false代表的是0 document.write(isNaN(true)); document.write("<br />"); document.write(1 + true); document.write("<br />"); document.write(1 + false); </script> </body> </html>
4.运算符
4.1算术运算符
++：自增运算符
--：自减运算符
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //++和--一般使用在变量的前面或者后面 //基本用法：可以让变量本身增1或者减1，可以单独使用 var n = 2; var r = ++n; var n1 = 2; var r1 = n1++; document.write(n); //3 document.write("<br />"); document.write(n1); //3 document.write("<br />"); document.write(r); //3 document.write("<br />"); document.write(r1); //2 document.write("<br />"); //注意1；不管++出现在变量的前面还是后面，变量本身都自增了1 //注意2：将n++或者++n赋值给某一个变量，该变量的值取决于++出现在变量的前面还是后面 //如果++出现在变量的前面，先原变量自增1，然后将结果赋值给新变量 //如果++出现在变量的后面，先将原变量的值赋值给新变量，然后原变量自增1 //参与运算 //++ var num1 = 3; var r1 = ++num1 + 2; document.write(num1); //4 document.write("<br />"); document.write(r1); //6 document.write("<br />"); var num2 = 3; var r2 = num2++ + 2; document.write(num2); //4 document.write("<br />"); document.write(r2); //5 document.write("<br />"); //-- num1 = 3; r1 = --num1 + 2; document.write(num1); //2 document.write("<br />"); document.write(r1); //4 document.write("<br />"); num2 = 3; r2 = num2-- + 2; document.write(num2); //2 document.write("<br />"); document.write(r2); //5 document.write("<br />"); var a = 3; //a++ ++a a = a + 1 a += 1 //+:拼接运算符 //在Python中，只能拼接字符串 //在js中，字符串和任意类型的变量相加，得到的结果都是字符串 document.write("abc" + 10); document.write("<br />"); document.write("abc" + true); document.write("<br />"); document.write("abc" + "123"); document.write("<br />"); document.write("abc" + null); document.write("<br />"); document.write("abc" + undefined); document.write(typeof ("abc" + 10)); </script> </body> </html>
4.2关系运算符
作用：
a.应用在if语句或者循环语句中
b.运算的结果都是布尔值
c.如果两个number'类型的变量比较大小，则比较大小
d.如果是两个字母比较，则比较的是字符的ASCII
4.3逻辑运算符
与：&&
或：||
非：！
注意：和Python中的and，or和not的用法相同的，也存在短路原则
4.4三目运算符【三元运算符】
格式：关系运算符？值1：值2；
说明：
a.值1和值2可以是常量，可以是变量，也可以是表达式
b.工作原理：如果关系运算符成立，则整个运算符的结果是值1，否则为值2
c.作用：实际上实现了二选一的操作，类似于if-else语句
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //需求：判断一个数是否是偶数 var num = 10; //常量 var result1 = num % 2 == 0?"偶数":"奇数"; document.write(result1); var result2 = num % 2 == 0?true:false; //变量 var r1 = true; var r2 = false; var result3 = num % 2 == 0?r1:r2; //表达式 var result4 = num % 2 == 0?3 != 5:3 == 5; //注意：三目运算符本质上是一个运算符，所以运算完成之后必定会得到一个结果，一般使用一个 变量将结果接出来 //实现了二选一的操作 /*result = "" * if num % 2 == 0: * result = "偶数" * else: * result = "奇数" */ </script> </body> </html>
4.5赋值运算符
=
+= -=
4.6特殊用法
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //1.除法只有一个:/ //Python: / // //2.js中的字符串可以进行相加或者相减的操作 var str = "456"; //注意：字符串和基本数据类型使用+，则表示拼接，得到的结果为字符串 document.write(str + 1); document.write("<br />"); //4561 //如果字符串可以转换为数字，使用-则表示数学上的减法运算,否则结果为NaN document.write(str - 1); //455 document.write("<br />"); document.write("abc" - 1);//NaN //3.boolean类型也可以进行相加或者相减的操作 document.write(true + 10); //11 document.write(false + 10); //10 document.write("<br />"); //4.== === //==比较的值，不关心类型 var aa = "5"; if (aa == 5){ document.write("ok"); } else{ document.write("不ok"); } //ok //===比较的是类型和值 if (aa === 5){ document.write("ok"); } else{ document.write("不ok"); } //不ok </script> </body> </html>
5.js中的语句
三大流程控制语句
顺序：
分支：
循环：
Python ：
分支：if,if-else,if-elif-else
循环：while for-in
js:
分支：if ,if-else,if-else if -else,switch-case
循环;简单for，for-in，while，do-while
5.1f语句
语法：
单分支：
if (条件表达式){
}
双分支：
if (条件表达式){
}else{
}
多分支：
if (条件表达式1){
} else if(条件表达式2){
}
...
else{
}
说明：如果执行语句只有一行代码，则可以省略花括号
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> //单分支：要么执行，要么不执行 var num1 = 10; if (num1 < 100){ document.write("hello"); } //双分支：实现了二选一的操作，类似于三目运算符，可以进行相互转换 if (num1 % 2 == 0){ document.write("偶数"); }else{ document.write("奇数"); } //多分支：实现多选一的操作【每次只执行其中的一个分支，执行完成之后则整个多分支语句结束】 var n = 3; if(n > 1){ document.write("1"); }else if(n > 2){ document.write("2"); } else if(n > 3){ document.write("3"); }else{ document.write("4") } //嵌套if语句 if(n > 1){ if(n > 2){ document.write("ok"); } } //等价于 if(n > 1 && n > 2){ document.write("ok"); } //书写一个永远成立的if语句 if(true){ } if(1){ } //0,0.0,false,null代表是假 </script> </body> </html>
5.2switch语句
作用：类似于if语句中的多分支，实现多选一的操作
语法：
switch(变量){
case 常量1：{
执行语句1；
break；
}
case 常量2：{
执行语句2；
break；
}
。。。
default：{
执行语句n;
}
}
工作原理：根据变量的值进行匹配，如果在case分支匹配到了常量，则执行case后面的语句，则整个switch-case语句结束；如果所有的case分支都不匹配，则执行default中的语句
代码演示：