2d转化
1transform:translate(x,y);
也可以转化为1transform:translateX(n);或者先写成y的形式
搭配hover使用
.box3{
background-color: beige;
height: 200px;
width:300px;
transition:all 1s;
transform: translate(100px,200px);
/*transition谁过渡就给谁加*/
/*all 秒数*/
/* 2d移动 */
}
.box3:hover{
background-color: aqua;
height: 100px;
}
translate对行内元素无效
让一个盒子水平居中可用translate需要搭配定位使用
.box4{
background-color: aqua;
height: 100px;
width:300px;
margin-top: 300px;
position: relative;
}
.box5{
background-color: beige;
height:50px;
width:100px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
/* 让box5垂直居中 */
}
/*box4是box5的父盒子 需要搭配定位使用*/
旋转 rotate
.box6{
background-color: aqua;
height:500px;
width:100px;
transition: all 1s;
/* 过渡 */
}
.box6:hover{
transform: rotate(360deg);
/* 旋转 注意单位为deg */
}
设置转化中心点
transform-origin:x y;单位是px
缩放scale(n,n)
.box2{
width:200px;
height: 200px;
background-color: palegreen;
}
.box2:hover{
transform: scale(2);
/* 设置缩放 数字不跟单位 宽度与高度的缩放倍数 */
}
动画
1 定义动画
@keyframes 名称
2 调用动画
animation-name:调用动画
animation-duration:动画持续时间
@keyframes move{
from{
transform: translateX(0px);
}
to{
transform: translateX(1000px);
}
}
.box4{
width:200px;
height: 200px;
background-color:pink;
animation-name: move;
animation-duration: 3s;
/*给盒子添加自动移动*/
}
flex布局
给父元素添加flex属性用来控制子元素的布局
设置flex布局之后 属性float clear vertical-align将失效
flex-direction
可选择的值有以下
justify-content 默认主轴为row
.box1{
width: 300px;
height:300px;
background-color: aquamarine;
display: flex;
flex-direction: row;
justify-content: center;
**
flex-wrap**
nowrap:不换行
wrap:换行
align-items但是对的是单行
.fu2{
background-color: #008000;
width:500px;
height:300px;
justify-content: center;
align-items: center;
display:flex;
}
.zi{
width:100px;
height:50px;
margin-left: 50px;
background-color: aqua;
}
flex属性定义子项目平分的数量
box3{
display:flex;
width:800px;
height:400px;
}
.box3>span{
flex:1;
background-color: azure;
margin-left: 50px;
}
js的内容
js写在哪里
<head>
<meta charset="utf-8" />
<!-- <link rel="stylesheet" type="text/css" href="./css/index.css" /> -->
</head>
<body>
<div id="div">
<button onclick="alert('玫瑰工厂')">点我一下</button>
<a href="javascript:alert('冰河世纪');">点我一下</a>
<button onclick="aaa()">点我一下</button>
</div>
<!-- <script type="text/javascript">
<!--写在script标签中 也可以写在onlinck属性当中 也可以写入外部文件中-->
/*加入src="路径",可以引入外部alert*/
alert("这是一个警告框1111");
console.log(1111)
</script> -->
</body>
数据类型
可以使用typeof看数据类型
console.log(typrof b);
类型转化
1将其他数据类型转化为string类型
调用tostring方法
eg:var a=123;
a=a.toString();
调用String函数
a=String(a);
字符串相加减和三元运算符
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var a="a";
console.log(typeof a);
test1="what a nice day";
test2="good";
test3=test1+test2;
console.log(test3);
var a=6;
test4=a+test1;
console.log(test4);
<!--字符串加减-->
var b=7;
a > b ? alert("a大"):alert("b大");
<!--三元运算符-->
var max=a>b?a:b;
alert("max="+max);
</script>
</head>
进制
条件判断语句
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
if(a>=8){
alert("a也大于四");
}
else {
alert("a不大于8");
}
if(a>8){
alert("a大于8");
}
else if(a>4){
alert("a大于4奥");
}
else{
alert("非常好");
}
<!--第二种方法-->
</script>
switch语句
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var number=10;
switch(number){
case 1:
console.log("一");
break;
case 2:
console.log("二");
break;
default:
console.log("都不是");
break;
}
</script>
while循环
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var i=0;
while(i<4){
i++;
alert(i);
}
do{
alert(i);
i++;
}while(i<3);
</script>
for循环
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
outer:
for(var i=0;i<5;i++){
document.write("*");
for(var j=0;j<i;j++){
document.write("*");
break outer;
}
document.write("<br />")
}
// 可以为循环语句加标签 可以选择中止什么
</script>
</head>
```**创建函数和对象**
```html
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function sayhello(o){
console.log(o==obj)
console.log("我是"+o.name);
}
var obj={
name:"wzy",
gender:"女",
}
sayhello(obj);
</script>
创建的函数都会通过window的方法保存
变量声明提前 用var关键字会在前面声明但是在后面赋值
函数声明的形式会被提前创建 函数表达式的不可以 所以调用的时候需要在其后调用;
函数作用域
调用函数时创建作用域 结束时销毁
在函数作用域中可以访问到全局变量 在全局中无法访问到函数变量
在函数作用域中为一个变量操作时如果没有则会向上一级寻找
在函数作用域也由变量申明提前
在函数中不使用var声明的都会成为全局变量
总结
js有很多和Java很像的地方 继续加油
下周计划
继续学习js 平衡好专业课和学习计划和自己的事情