笔记（字体图标~~~~js）

<style> div .iconfont{ font-size: large; color: black; }	字体图标
*{ padding: auto; margin: 0; } a{ text-decoration: none; } .top-nav{ height: 40px; background-color: black; } .container{ width: 1226px; margin: 0 auto; } .top-nav .container{ display: flex; justify-content: space-between; }	inde.css
<style> ul{ color: blueviolet; /* 会继承的属性：字体属性，文本属性，文字颜色等 不会继承：宽，高，内外边距......*/ } a{ color: aqua; } </style>	css的样式继承
transition-property:	变化对象
transition-duration: 3s;	指定过度的持续时间
transition-timing-function: steps(40);	指定过度的类型（图为帧数）
transition-delay: 2s;	指定过渡的持续时间
animation-direction: alternate-reverse;	指定是否应该轮流反向播放动画
@keyframes myMove{ from{ width: 200px; height: 50px; background-color: pink; } to{ width: 600px; height: 100px; } }	通过在动画序列中定义关键帧的样式，来控制css动画序列中的步骤
<style> .father{ position: relative; width: 300px; height: 300px; border: 1px solid black; } .son{ position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: aquamarine; /* transform: translate(100px,100px);*/ /*transform: rotateX(45deg);*/ /*transform: translateX(100px) rotate(45deg);*/ transform: scale(0.2); transform: skewX(45deg); } </style>	2d转化
<style> .father{ position: relative; width: 300px; height: 300px; border: 1px solid black; margin: 0 auto; transform-style: preserve-3d; perspective: 800px; } .son{ position: absolute; top: 0; left: 0; width: 300px; height: 300px; background-color: aquamarine; /* transform: translate(100px,100px);*/ /*transform: rotateX(45deg);*/ /*transform: translateX(100px) rotate(45deg);*/ /*transform: scale(0.2); transform: skewX(45deg);*/ /*transform: translateZ(100px); transform: rotateZ(45deg);*/ transform-origin: 100px; } </style>	3d转化
<style> p{ text-shadow: 2px 2px 2px pink; } div{ width: 300px; height: 300px; background-color: aquamarine; box-shadow: 2px 2px 2px pink; } </style>	添加文本的阴影
<style> body{ height: 200px; background-color: aquamarine; } @media only screen and (max-width:600px){ body{ background-color: pink; }; } </style>	媒体查询
.container { column-count: 3; }	多列布局
<svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="Gradient1"> <stop class="stop1" offset="0%" /> <stop class="stop2" offset="50%" /> <stop class="stop3" offset="100%" /> </linearGradient> <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="red" /> <stop offset="50%" stop-color="black" stop-opacity="0" /> <stop offset="100%" stop-color="blue" /> </linearGradient> <style type="text/css"> <![CDATA[ #rect1 { fill: url(#Gradient1); } .stop1 { stop-color: red; } .stop2 { stop-color: black; stop-opacity: 0; } .stop3 { stop-color: blue; } ]]> </style> </defs> <rect id="rect1" x="10" y="10" rx="15" ry="15" width="100" height="100" /> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)" /> </svg>	线性渐变
<?xml version="1.0" standalone="no"?> <svg width="120" height="240" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="RadialGradient1"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </radialGradient> <radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25"> <stop offset="0%" stop-color="red" /> <stop offset="100%" stop-color="blue" /> </radialGradient> </defs> <rect x="10" y="10" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient1)" /> <rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)" /> </svg>	径向渐变
<!--行内引入--> <button onclick="alert('你完蛋了')">点击</button> <!--内嵌引入方式--> <script> alert('66666') </script> <!--外链引入--> <!--script标签存在src属性之后，其内部就无法再写js代码--> <script src="./02-index.js"></script>	jd的三种引入方式
<!--<script> //警示框 alert("错误") //输入框 prompt("请输入用户名") //控制台打印 console.log("我是在控制台上显示的") //页面打印 document.write("我是显示在页面上的") </script>--> <script src="./04-练习.js"></script>	对话框
<script> //我是单行注释 /** *wo *shi *duo *hang **/ </script>	注释
//变量：代码运行时存储数据的容器 // prompt("请输入密码") //变量声明 var let let 变量名 // let pwd // 变量赋值 // pwd = prompt("请输入密码") // alert(pwd) // 变量的初始化 // let pwd = prompt("请输入用户名") //变量的值可以重新赋值 // alert(pwd) //let关键字声明的变量不能重复声明 // document.write(pwd) // let a=1,b=2 // document.write(a,b) alert(a) //undefined 表示变量只声明，但是未进行赋值 var存在变量提升，let不存在变量提升 var a=22 /** * 变量名的命名规范 * 1，变量名只能由有效符号组成（大小写的字母，数字，下划线，&） * 2，不能以数字开头 * 3，不能够使用关键字或保留字 * 4，变量名最好有意义，不要使用a，b，c这类的单词 * 5，变量名尽量遵循小驼峰命名法 * userName user_name * 6,类名采用大驼峰 * UserName * */	变量
//const声明的常量不能被更改 const PI=3.1415926 PI = 1.111 alert(PI)	常量
// 数据类型：基本数据类型和引用数据类型 // 基本数据类型 //1、数字类型 number // let a=1 // alert(typeof(a)) // let b=3.14 //浮点型不精确 // alert(typeof(b)) // 123 "abc" //2、字符串数字类型 //被单引号、双引号括起来的字符序列 // let str1="1234" // alert(typeof(str1)) // let str2="1234" //字符串拼接 // document.write("str1的值是："+str1) // document.write("str2的值是："+str2) //模板字符串 'ncdj' let str3='1234' // let userName = prompt("请输入用户名") let pwd = prompt("请输入密码") document.write('用户名是：&{userName},密码是：&{pwd}') document.write('<input type="text"><br><h1>fqwfqf</h1><p>asdawd</p>') //布尔值 boolean true false document.write(2>3) //undefined 变量定义但是未赋值时，默认的数值为undefined //null let a = null	数据类型
//+ - * / % // alert(2+3) // alert(2-3) // alert(2*3) // alert(2/3) // alert(2%3) let num1=+prompt("请输入一个数字") let num2=+prompt("请输入一个数字") document.write(num1+num2)	算术运算符
let num1=prompt("请输入一个数字") let num2=prompt("请输入一个数字") // document.write('&{num1}+&{num2}=&[num1+num2]') //转换为number //1、Number（） alert(typeof(Number("123"))) //2、parseInt()\parseFloat() //把数据尽可能的转化为整型 // alert(parseInt("200px")) //把数据转化为浮点型 // alert(parseFloat("333.222px")) //3、+ console.log(typeof(+"123")) //toFixed() let a = "3.1415926" console.log(a.toFixed(2)) //转换为字符串 //toString() let b = 20 console.log(typeof(b.toString)) //String() console.log(typeof(String(b))) //+"" // 转换为布尔值 let c = 11 console.log(Boolean(c))	数据类型转换
// console.log(2>3) // console.log(2<3) // console.log(2>=3) //console.log(2<=3) //==:会自动将”2“转换为2，然后再进行比较 console.log(2=="2") // ===:要求数据类型一致，值一致才为真 console.log(2==="2") console.log(2==3) console.log(2!=3)	比较运算符
// = let a=11 // a=22 a += 1//a=a+1 a -=3 a *=2	赋值运算符
let a =12 //后加加的优先级小于赋值运算符，因此先进行赋值运算，再进行后++ let b =a++ //b=12 a=13 //前++的优先级高于赋值运算符，因此先进行前++，再进行赋值运算 let c =++a //c=14 a=14 let d =a-- //d=14 a=13 let e =--a //e=12 a=12	自加自减运算符
//&& || ! //&& :两真为真，一假则假 console.log(2>3 && 3>2) //||：一真则真，两假才假 console.log(2>3 || 3>2) console.log(!(2>3));	逻辑运算符
// if(条件){ // 条件成立时执行的代码 //} // let age = +prompt("请输入你的年龄") // if (age>=18){ // alert("成年了，进去上网吧") // } //用户输入用户名和密码，你去判断用户名是否是admin， // 密码是否是123456，是，则弹出登陆成功 let id = prompt("请输入你的用户名") let mm = +prompt("请输入你的密码") if (id==="admin"&&mm===123456){ alert("登陆成功") }	单分支
let score = prompt("请输入你的成绩") if(score>=90){ alert("成绩优秀") }else if(score>=70){ alert("成绩良好") }else if(score>=60){ alert("成绩及格") }else{ alert("你完蛋了") }	多分支
let age =+prompt("请输入年龄") // if (age>=18){ // alert("成年了") // }else{ // alert("滚") // } // 条件?条件成立时执行的代码：条件不成立时执行的代码 // age >18 ? alert("cnl"):alert("wcn") age <10 ?alert("0"+age):alert(age)	三元运算符
/** * if(条件){ * 条件满足时执行的代码 * }else{ * 条件不满足时执行的代码 * } * */ // let age =+prompt("请输入年龄") // if (age>=18){ // alert("成年了，去上网把") // }else{ // alert("小卡拉米，一边去") // } // 用户输入年份，你返回该年是闰年还是平年 // 能被4整除但是不能被100整除，或者被400整除的年份是闰年，否则是平年 let year = +prompt("请输入年份") if ((year%4==0&&year%100!==0)||year%400==0){ alert("闰年") }else{ alert("平年") }	双分支
"i\'am"	转义字符
let week = prompt("请输入今天星期几") switch(week){ case"1": alert("今天星期一，猴子穿新衣") break; case"2": alert("今天星期二，猴子有点二") break; default: alert("你是猴子派来的救兵嘛") break; }	switch多分支语言
// 循环：周而复始 // for(let i = 1;i <= 10;i++){ // document.write(i) // document.write('<br>') // } // for(let i =1;i<=7;i++){ // for(let i = 1;j <= 7;j++){ // document.write('今天是星期$[i],这是送的第$[j]朵') // document.write('<br>') // } // } /* for (let i = 1; i <= 5;i++){ for (let j = 1; j <= 5;j++){ document.write('*') } document.write('<br>') }*/ /* for (let i = 1; i <= 5;i++){ for (let j = 1; j <= i;j++){ document.write('*') } document.write('<br>') }*/ for (let i = 1 ; i <= 9;i++){ for (let j = 1; j <= i; j++){ document.write(`<span>${i}*${j}=${i*j}</span>`) } document.write('<br>') }	for循环
let i = 1 while(i<=10){ document.write(`${i}<br>`) i++ }	while循环
let i = 1 do { console.log(i) i++ } while (i<=10)	do...while循环
for (let i = 1; i <= 100;i++){ if(i===50){ // break continue//跳出本次循环，直接开始下次循环 } console.log(i) }	break和continue的使用
// 数组 // 1.[元素一，元素二......] let arr1= ["zhangsan",1,2,true] // 数组下标：从0开始 // 通过数组下标： 数组名[下标] console.log(arr1[0]) //通过数组下标重新对对应的数组元素进行赋值 arr1[1]=666 console.log(arr1) // console.log(typeof(arr1)) // arr1 instanceof(Array)判断数据类型 // console.log(arr1 instanceof(Array)) // Array.isArray(arr1)判断是否是数组类型 // 2`Array对象 // let arr2 = new Array() // arr2 [0] // console.log(arr2 instanceof Array) // let arr2 = new Array(1,2,3,4,'zhangsan') // console.log(arr2) // 二维数组 let arr3 = [["zhangsan",21], ["list", 22]] console.log(arr3[0][1])	数组
let arr = [1,2,3,4,5] // console.log(arr.length) for (let i =0; i<=arr.length - 1;i++){ console.log(arr[i]) } // 循环加强 for in for ( let i in arr){ console.log(arr[i]) } //for of for (let i of arr){ console.log(i) }	数组的便利
// length 数组名，属性名 数组名.方法名（） // in 运算符 let arr1 = ["aaa",1,2,,3] // console.log(4 in arr1) console.log(arr1[3]) //添加元素 向数组的开头添加一个或多个元素 arr1.unshift("lisi" ,"zhangfei") console.log(arr1) // push 向数组的的最后添加一个或多个元素 arr1.push("wangmazi") console.log(arr1) // 删除 数组的第一个元素 let a = arr1.shift() console.log(a) // 删除并返回数组的最后一个元素 arr1.pop(a) console.log(arr1) //splice(删除元素的起始位置，删除几个元素) arr1.splice(1,1) console.log(arr1) // arr1.splice(1,0,"zhangfei") console.log(arr1) // let a1 = [1,2,3] let a2 = ["zhangsan","lisi"] // concat()连接两个或多个数组并且返回 let a3 = a1.concat(a2) console.log(a3) //join() let a4 = ["n","a","n",111] let b1 = a4.join("--") console.log(b1) // a4.reverse() console.log(a4) //sort() let b4 = [1,22,3,4,5] let c1 = b4.sort() console.log(c1) //slice() let c2 = b4.slice(1,4) console.log(c2) // indexOf console.log(b4.indexOf(22)) // lastIndexOf console.log(b4.lastIndexOf(22)) alert(c2.values()) let str = "aaaa" console.log(str.valueOf())	数组的方法
console.log(Math.E) console.log(Math.PI) console.log(Math.SQRT2) let a = 3.14 console.log(Math.ceil(a)) console.log(Math.floor(a)) console.log(Math.abs(a)) console.log(Math.max(1,2,3)) console.log(Math.min(1,2,3)) console.log(Math.random()) // 四舍五入 console.log(Math.round(3.54)) // 开平方根 console.log(Math.sqrt(9)) // 幂次方 console.log(Math.pow)	math.使用
// 获取参数对应的时间对象 let date = new Date() console.log(date) // 年 let year = date.getFullYear() // 月 let mon = date.getMonth() + 1 // 日 let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() console.log(day) // 时 let hour = date.getHours() // 分 let mm = date.getMinutes() // 秒 let ss = date.getSeconds() // 星期几 let week = date.getDay() // 毫秒数 let ms = date.getMilliseconds() // 获取时间戳 1970-1-1 0；0:0 let ts = date.getTime() console.log(ts) // 2023/12/07 18:21:01 document.write(`${year}-${mon}-${day} ${hour}:${mm}:${ss}`)	date
// " " '' `` let str = '1111' // 使用String() let str1 = new String("hello") console.log(typeof (str1)) // 3| let str2 = String("cnjdcjd") console.log(str2.length)	字符串对象
// gouxin // nixuog let str = "nanhangjincheng" console.log(str.charAt(4)) // console.log(str.indexOf("h")) console.log(str.lastIndexOf("h")) // 连接字符串 let str1 = "nanhang" let str2 = "jincheng1234" // 和+的作用类似 let str3 = str1.concat(str2) console.log(str3) // console.log(str3.match(/\d/g)) // 使用正则替换原来的内容 console.log(str3.replace(/a/g, "######")) // slice() console.log(str3.slice(1, 4)) // 分割 split() console.log(str3) console.log(str3.split("")) let str4 = str3.split("") console.log(str4.join("##")) // 转大写 console.log(str3.toUpperCase()) console.log(str3.toLowerCase()) let str5 = "zhangsan" let aaa = str5.split("") console.log(aaa) let bbb = aaa.reverse() console.log(bbb) console.log(bbb.join(""))	方法
Number("1111") parseFloat("200px") parseInt("200px") // getSum(1, 2, 3) // 函数：一段独立功能的代码的集合 // function 函数名(参数){ // 代码 // } // let a = getSum(4, 5) console.log(a) function getSum(num1, num2) { // console.log(num1 + num2) return num1 + num2 console.log("66666你老6") } // 函数调用 函数名() // getSum() // getSum() // getSum() // 一个函数没有return的情况下，默认返回的是undefined let sum = getSum(3, 4) console.log(sum)	函数
let a = 1 let b = 2 //引用传递 let arr = [1,2,3] function change(a,b){ a += 10 b += 20 a.push(100) } // change(a,b) // console.log(a) // console.log(b) change(arr) console.log(arr)	值传递和引用
// 全局作用域、函数作用域 let a = 1 function fn() { let num = 1 console.log(a) } fn() console.log(num)	作用域
function fn1() { console.log("我是第一个函数") } function fn2(a) { a() console.log("我是函数2") } fn2(fn1)	函数作为参数进行传递
// function area(r, PI = 3.14) { // return PI * r * r // } // console.log(area(1)) let a = [17, "aadd", 34, 1] a.push(10) alert(a)	默认参数
function getSum() { // return a + b // console.log(arguments) let sum = 0 for (let i in arguments) { sum += arguments[i] } return sum } console.log(getSum(1, 2, 3, 4))	argument
let a = function () { console.log("666"); } a()	匿名函数，函数表示
// function fn(x) { // return x + 5 // } // let a = fn(4) // console.log(a) // let fn = () => alert("hello") let fn = x => x + 5 console.log(fn(4)) let fn1 = (x, y) => { let f = 6 return x + y + z }	箭头函数
// 递归：函数自身调用自身 // 9！ =1！*2*3*4*5*6*7*8*9 // // function jC(n) { // if (n === 1) { // return 1 // } else { // return jC(n - 1) * n // } // } // console.log(jC(3)) // 闭包未讲 /** * 1、写函数计算所有传入参数的乘积 *2、找出0-100之间7的倍数和包含7的数字 *3、兔子繁殖问题， 设有一只新生兔子， 从第四个月开始他们每个月, 月初都生一只兔子, 新生的兔子从第四个月月初开始又每个月生一只兔子按此规律， 并假定兔子没有死亡, n(n <= 20) 个月月末共有多少只兔子？ */ // 1、1、2、3、5、8、13、21、34 function feiBo(n) { if (n === 1 || n === 2) { return 1 } else { return feiBo(n - 1) + feiBo(n - 2) } } console.log(feiBo(4))	递归