<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)) | 递归 |