WEB前端DAY8
变换效果3d
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{/* 视距:设置距离xy轴构成的平面有多少像素距离 */perspective: 500px;}div{/* 设置变化效果为3d */transform-style: preserve-3d;width: 100px;height: 100px;border: 1px solid red;/* margin: 100px; *//* translateXYZ分别让标签在xyz轴上发生位移 *//* transform: translateZ(100px); *//* 三个参数分别是xyz轴上的位移*//* transform: translate3d(200px,100px,500px); *//* transform: rotateX(45deg); *//* transform: rotateY(45deg); *//* transform: rotateZ(90deg); */}</style></head><body><div></div></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div>img{width: 100px;height: 100px;position: absolute;transition: 3s;}body{perspective: 500px;}div{margin:200px;width: 100px;height: 100px;border: 1px solid red;transform-style: preserve-3d;position: relative;}.container:hover>img:first-child{top: -100px;transform-origin: bottom;transform: rotateX(-90deg);}.container:hover>img:nth-child(2){top: 100px;transform-origin: top;transform: rotateX(90deg);}.container:hover>img:nth-child(3){left: -100px;transform-origin: right;transform:rotateY(90deg)}.container:hover>img:nth-child(4){left: 100px;transform-origin: left;transform: rotateY(-90deg);}.container:hover>img:last-child{transform: translateZ(100px);}.container:hover{transform: rotate3d(1,1,1,45deg);}.container{transition: 3s;}</style></head><body><div class="container"><img src="./img/11.webp" alt=""><img src="./img/22.jpeg" alt=""><img src="./img/33.jpeg" alt=""><img src="./img/44.jpeg" alt=""><img src="./img/55.webp" alt=""><img src="./img/66.jpeg" alt=""></div></body>
</html>
过渡属性
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span,div{width: 100px;height: 100px;border: 1px solid red;transition:2s width linear 1000ms;}span:hover,div:hover{width: 200px;height: 200px;background-color: black;}span{display: inline-block;}</style></head><body><div></div><span></span></body>
</html><!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>span,div{width: 100px;height: 100px;border: 1px solid red;transition:2s width linear 1000ms;}span:hover,div:hover{width: 200px;height: 200px;background-color: black;}span{display: inline-block;}</style></head><body><div></div><span></span></body>
</html>
动画
@keyframe :动画名称{from{}to{}
}
JavaScript
首先JavaScript是一个动态的解释型编程语言。
所谓动态就是指,代码在运行时变量的数据类型可以发生变化。(静态就想类似c、java、go这种语言他们需要创建变量时就确定变量的数据类型,并且不可随意更改)
所谓的解释型语言,是指代码运行时不需要生成任何可执行文件,代码通过解释器转化为二进制数据交给cpu运行,并且解释型语言通常是一行一行运行的。(编译型是生成可执行文件,通过运行可执行文件达到执行代码的目的)
如何在html引入js代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"><!-- js的第三种书写方式外链式 --><script src="./js/new_file.js"></script></head><body><!-- 第二种js的代码书写方式 行内样式 --><!-- <button οnclick="alert('hello world')">按钮</button> --><!-- 书写JS代码的第一种方式 页面样式 --><script></script></body>
</html>
三种弹框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><!-- 第一种弹框警告框,向用户展示信息 --><!-- <button οnclick="alert('hello world')">按钮</button> --><script>// <!-- 第二种弹框,确认框可以根据用户的选择获取返回值 -->// flag = confirm("你是困困的粉丝吗")// if(flag){// console.log("太好了,我也是")// }else{// console.log("滚粗,小黑子!");// }// 第三种弹框prompt 第一个参数是提示信息 第二个参数是默认值// 谨慎使用 xss攻击经常攻击的目标// str = prompt("请输入你的年龄","18");// console.log(str)</script></body>
</html>
如何创建变量
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><script>// c中如何创建变量// int 变量名 要么是 float string 。。。// js中有三种创建的方式// 第一种无声明 创建的变量他事全局的// function fun(){// name = "string"// }// fun()// console.log(name)// 第二种使用var关键字创建变量 // console.log(name)// var name = "string"// name = "string2"// console.log(name)// var具有声明提升作用 上面的代码等价于下面的代码// var name="string"// console.log(name)// name = "string2"// console.log(name)// 第三种使用let创建变量 块级别// function fun(){// if(0 == 0){// var age = "123"// }// console.log(age)// }// fun()// console.log(age)// var 和 let的区别// 1.let的最小作用域是块级别 出了块 变量就无法访问// var的变量最小作用域是函数级别 也就说var即使在代码块中创建只要在函数中都可以正常访问// 2.var可以重复的重建变量 let不可以// 3.var具备声明提升的效果 let不可以// let a = 1// console.log(a)// let a = 2// console.log(a)// let a = 3// console.log(a)</script></body>
</html>
变量的命名规范
- 数字大小写字母以及下划线,$。
- 变量命名首字母不能是数字
- 不能使用关键字或者保留字来命名变量
- 变量命名时应具备具体含义,浙江有效提高代码的可读性
- 官方推荐小驼峰命名法或者下划线命名法
- 创建常量的时候要每一个字母都大写,并且使用const关键字
数据类型
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="css/new_file.css"></head><body><script>//c中数据类型大概有这些int short char long float longlong double unshort...//js中基本数据类型 Number(int float double)、 Boolean、String、undefined、NaN、// 引用类型:Array数组类型 object对象类型let a = 100 / "a"console.log(a)</script></body>
</html>