前端c3总结和JavaScript学习

最新推荐文章于 2024-02-22 16:37:47 发布

小王没脑袋

最新推荐文章于 2024-02-22 16:37:47 发布

阅读量182

点赞数 1

分类专栏：周记文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/wzy0507/article/details/129223067

版权

周记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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声明的都会成为全局变量