。js:让代码有行为,可以"动起来"
1、js的引入方式:
(和css的引入方式很相似)
2、js的内部引入
<script> : 引入js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 内部
prompt('请输入您的年龄:')
</script>
</body>
</html>
效果图:
2、外部引入
html内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 外部 -->
<script src="./03-外部js.js">
</script>
</body>
</html>
js内容:
prompt('年龄:')
效果图:
2、输入输出语句
prompt : 让用户输入内容,括号中的内容为输入的提示词
document.write : 输出内容到屏幕上(该属性可以识别标签)
console.log : 在控制台输出的内容(不会被用户看见,后续调试时,对程序员的提示)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 输入语句
//prompt('这是输入内容的提示')
// 打印到页面
document.write('这里是输出的内容')
// 可以识别标签
document.write('<strong>这里是输出的内容</strong>')
// 控制台输出语句,不会被用户看见
console.log('这是要在控制台输出的内容')
</script>
</body>
</html>
效果图:
3.变量
变量: 盒子——用于存储数据【注】数据本身不是变量
let+变量名: 变量的声明(不能重复声明)
变量名 = prompt('') : 变量赋值
let 变量名 = prompt('')
console.log(变量名) —— 变量的初始化 【注】打印变量时,不要加引号
let uname = 'zs', age = 21
console.log(uname, age) —— 同时定义多个变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 变量:盒子----存储数据的容器 数据本身不是变量
// 变量的声明:
// let 变量名(不能重复声明) var(不建议使用)变量名
// let age
// // 变量赋值
// age = prompt('请输入您的年龄:')
// age = 33
// console.log(age)
// 变量的初始化
// let uname = prompt('请输入您的用户名:')
// console.log(uname)
// 同时定义多个变量
let uname = '张三', age = 21
console.log(uname, age)
// 将用户输入的内容打印在body里
// let age = prompt('请输入年龄:')
// document.write(age)
</script>
</body>
</html>
3.1、变量命名规范
变量命名规范:
1、有效符号(大小写字母、数字、下划线、$)
2、关键字、保留字不能用于变量命名
3、不以数字开头
4、尽量用有意义的变量名
5、驼峰命名法 eg: userName
4.let 和var的区别
undefined : 已声明但未赋值
var可以先使用再声明;
let必须先声明再使用;
5.const常量
const :对常量进行定义
常量名用大写,常量无法更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 常量名大写 常量无法更改
const PI = 3.14
console.log(PI)
</script>
</body>
</html>
效果图:
6、数据类型
js是弱数据类型语言 只有赋值之后,才知道是什么数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// js是弱数据类型语言 只有赋值之后,才知道是什么数据类型
let uname = 21
console.log(typeof (uname))
</script>
</body>
</html>
效果图:
7.基本数据类型
7.1、数字类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = 66
let b = 33
console.log(a)
console.log(a + 2)
console.log(a + b)
console.log(a - b)
console.log(a * b)
console.log(a / b)
console.log(a % 2)
</script>
</body>
</html>
效果图:
7.2、字符串类型
字符串的使用 : 当需要使用字符串时需要加引号,单引号和双引号都可以,在字符串中还有字符串时,单双引号嵌套使用
字符串的拼接: 用+
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 当需要使用字符串时需要加引号,单引号和双引号都可以,在字符串中还有字符串时,单双引号嵌套使用
// let uname1 = 'nnnsns'
// console.log(typeof (uname1))
// let uname2 = "nnnsns"
// console.log(typeof (uname2))
// let uname3 = "nnn'gouxin'sns"
// console.log(typeof (uname3))
// 字符串的拼接(用+)
document.write("num1"+"num2")
// 例子(从用户获取数据并拼接)
// let uname = prompt("请输入名字:")
// let age = prompt("请输入年龄:")
//方式一
// document.write('你叫' + uname + ',今年' + age + '岁了')
// 方式二(该方式可以识别标签)
// document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)
</script>
</body>
</html>
7.3、布尔类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(typeof(3 < 5))
</script>
</body>
</html>
效果图:
8、null和nodefinded区别
undefinded : 声明,未赋值
null :空值
NaN : not a number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// undefinded 声明,未赋值
// null 空值; NaN : not a number
console.log(undefined + 1)
console.log(null + 1)
</script>
</body>
</html>
效果图:
9、显示转换
方法一:给字符串加+可以使得该字符串类型变为数字类型
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('num1')
console.log(typeof (a))
</script>
</body>
</html>
效果图:
方法二、在输出时加上 number(a) 把字符串类型变为数字类型
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = +prompt('num1')
console.log(typeof(Number(a)))
</script>
</body>
</html>
效果图:
方法三、
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//parseInt 整形; parseFloat 浮点型
// 只能处理数字后有其他字符类型的情况
let c = '200.9875px'
console.log(parseInt(c))
console.log(parseFloat(c))
</script>
</body>
</html>
效果图:
10、警示框:
aler : 使用警示框输出内容
!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num1 = 1
let num2 = 2
alert(num1+num2)
</script>
</body>
</html>
效果图:
11、运算符
== (隐式转换)只比较数值,将字符串转换为数字类型后进行比较
=== 既比较数值,也比较类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
// = 赋值运算符
// let a = 21
// a = 33
// a += 4 // a = a + 4 37
// a *= 2 //a = a * 2 74
//a -= 3 //a = a - 3 71
// a /= 2 //a = a / 2 35.5
// alert(a)
// let b = a++ //先赋值,再自增
// alert(b)
// alert(a) //36.5
// b = ++a //先自增,再赋值
// alert(b)
// 比较运算符
// > < >= <= == ===
let num1 = 2
let num2 = '2'
alert(num1 == num2)
alert(num1 === num2)
// == (隐式转换)只比较数值,将字符串转换为数字类型后进行比较 === 即比较数值,也比较类型
//逻辑运算符 && || !
</script>
</body>
</html>
12.分支语句
12.1、单分支
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = 11
// if(条件){
// 执行的代码
// }
if (age < 18) {
document.write('你是小学生,不准进')
}
</script>
</body>
</html>
效果图:
12.2、双分支语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('请输入您的年龄:')
if (age <= 18) {
alert('小学生,不准进')
} else {
alert('大学生?进去吧')
}
</script>
</body>
</html>
12.3、多分支
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let age = +prompt('请输入年龄:')
if (age < 18) {
alert('你是未成年 学习吧')
} else if (age <= 25) {
alert('青春年华')
} else if (age <= 40) {
alert('好汉不提当年勇')
} else {
alert('男人四十一枝花')
}
</script>
</body>
</html>
13、三元运算符
双分支运算符的简写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 三元运算符——双分支语句的简写
let age = +prompt('请输入您的年龄:')
// 代码格式 判断条件 ? 条件成立时执行的语句 :条件不成立时执行的语句
age <= 18 ? alert('小学生,不让进') : alert('大学生,进去吧')
</script>
</body>
</html>
14、switch语句
default : 所有条件都不满足时的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let num = +prompt('请输入今天星期几了:')
switch (num) {
case 1:
alert('星期一')
break
case 2:
alert('星期二了')
break
case 3:
alert('星期三了')
break
case 4:
alert('星期四了')
break
case 5:
alert('星期五了')
break
case 6:
alert('周末了')
break
case 7:
alert('周日了')
break
default:
alert('你输入了个什么东西')
}
</script>
</body>
</html>
15、循环
15.1、while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// while 一定要有终止条件
let i = 10
while (i > 11) {
console.log('我是高手')
i--
}
</script>
</body>
</html>
15.2、do while循环
先执行再判断
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let i = 10
do {
console.log('我是高手')
i--
} while (i > 11)
</script>
</body>
</html>
15.3、for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
for (let i = 1; i <= 10; i++) {
document.write(`我是个高手<br>`)
}
</script>
</body>
</html>
效果图:
16、数组
数组: 有序的数据序列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数组:是有序的数据序列
// 数组的声明方式(从0开始)
let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12,'jige']
// arr[索引下标]
alert(arr[5])
</script>
</body>
</html>
效果图:
16.1、数组的遍历
for in : 通过数组的下标进行遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12,'jige']
// 数组的遍历
for (let i in arr) {
console.log(arr[i])
}
</script>
</body>
</html>
效果图:
16.2、数组的更新
arr[1] = 'nb' : 对索引为1的元素重新赋值
console.log(arr instanceof Array) : 查看arr是否为数组
arr3 = arr.concat(arr2) : concat将arr的后面加上arr2的内容命名为arr3
push : 在数组末尾添加元素
unshift : 在数组首部添加元素
shift : 删除第一个元素
pop : 删除最后一个元素
splice(删除的起始位置,删除的个数) : 灵活删除元素
splice(删除的起始位置,0,要添加的元素) : 灵活添加元素
join : 各个元素之间的连接方式
reverse : 颠倒元素的位置
slice : 截取元素的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]
// 通过索引下标给对应元素重新赋值
// arr[1] = 'guanyu'
// 查看arr是否为数组
// console.log(arr instanceof Array)
// let arr2 = [1, 2, 3, 4]
// concat将arr的后面加上arr2的内容命名为arr3
arr3 = arr.concat(arr2)
console.log(arr3)
// 增 push 在数组末尾添加
arr.push('这里是添加的内容')
// unshift 在数组首部添加元素
arr.unshift('这里是添加的内容')
// shift 删除第一个元素
arr.shift()
// pop 删除最后一个元素
arr.pop()
// splice(删除的起始位置,删除的个数)
arr.splice(3, 1)
// splice(删除的起始位置,0,要添加的元素)
arr.splice(3, 0, 'jiangjia')
console.log(arr)
// 各个元素之间的连接方式
console.log(arr.join('**'))
// 颠倒元素的位置
console.log(arr.reverse())
// 截取前三个元素的内容
console.log(arr.slice(3))
</script>
</body>
</html>
16.3、二维数组
student.length : 获取数组的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]
// 查找第二个数组的第一个元素
// console.log(student[1][0])
// 二维数组的遍历
for (let i in student) {
for (let j in student[i]) {
console.log(student[i][j])
}
}
// student.length 获取数组的长度
</script>
</body>
</html>
效果图:
17、函数
函数: 实现特定功能的代码集合
函数必须进行调用,才会执行
函数如果要有返回值,一定要添加return关键字,否则返回值为undefined
函数的作用域:
全局变量 (在函数外声明的变量) | 在函数内与函数外均可被访问 |
局部变量 (在函数内声明的变量) | 只能在函数内部访问 |
特点 : 代码的重用性强!
函数的声明:
函数的调用: 在能访问到的前提下,先局部,再找全局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 函数的声明,要返回值,必须有return
function sum(a,b){
let sum=a+b
return sum
}
// 函数的调用(函数必须先调用才能执行)
let e= sum(11,4)
document.write(e)
</script>
</body>
</html>
效果图:
arguments : 接收所有实参,并保存到arguements数组里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getSum() {
// arguments 接收所有实参,并保存到arguements数组里
let sum = 0
for (let i in arguments) {
sum += arguments[i]
}
return sum
}
let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)
document.write(e)
</script>
</body>
</html>
效果图:
17.1、匿名函数
函数的嵌套使用(嵌套内层的函数可以没有名字)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
setInterval(function () {
console.log('小学生')
}, 1000)
</script>
</body>
</html>
效果图:
17.2、函数表达式
把函数赋值给一个变量名
将getsum这个函数赋值给a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let a = function getSum() {
console.log('jige')
}
a()
gesum()
</script>
</body>
</html>
效果图:
17.3、立即执行函数
无需调用立即执行(其实本质上已经调用了),多个立即执行函数之间用分号隔开
在声明的同时就执行了
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 立即执行函数
(function () { document.write('caixukun') })()
</script>
</body>
</html>
效果图:
18、值传递和引用传递
值传递不会改变之前的值
引用传递会改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 值传递 传数据,不发生改变
let a = 10
let b = 20
function change(x, y) {
x = 30;
y = 50;
}
change(a, b);
alert(a + "--" + b)
let arr = [1, 3, 4, 5]
// 引用传递 传地址,发生改变
function change2(a) {
a.push(1000)
}
change2(arr)
alert(arr)
</script>
</body>
</html>
效果图:
19、默认值参数
参数中有一个固定值,为了方便调用,可以如下设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function getCir(r, PI = 3.14) {
return PI * r * r
}
let a = getCir(3)
console.log(a)
</script>
</body>
</html>
20、箭头函数
作用和匿名函数类似
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
setInterval(() => {
console.log('i hate you')
}, 1000)
</script>
</body>
</html>
效果图:
21、递归
必须有结束条件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 求 9!
function jiecheng(n) {
if (n === 1) {
return 1
} else {
//自身调用自身
return n * jiecheng(n - 1)
}
}
let a = jiecheng(9)
alert(a)
、
</script>
</body>
</html>
效果图:
22、字符串的常见使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let str = '你是who'
// split 把字符串拆分,如果从某个字符拆分,则该字符会被覆盖
console.log(str.split('w'))
// 左闭右开,截取第二个到第三个字符
console.log(str.substring(2, 4))
// 如果开头的字符和输入的字符相同时,返回true,反之返回false
console.log(str.startsWith('你'))
// 如果结尾的字符和输入的字符相同时,返回true,反之返回false
console.log(str.endsWith('你'))
// 如果字符串中包含输入字符时,返回true
console.log(str.includes('w'))
</script>
</body>
</html>
效果图:
23、对象
对象: 无序的数据集合
对象元素可以嵌套函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 对象:无序的数据集合
let obj = {
uname: 'zhangfei',
age: 21,
gender: 'nan'
}
// 查找对象元素
console.log(obj.uname)
console.log(obj['age'])
// 对象元素可以嵌套函数
let obj2 = {
uname: '刘德华',
age: 60,
sing: function () {
console.log('我要唱歌了')
}
}
obj2.sing()
</script>
</body>
</html>
效果图:
24.1、对象的修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
uname: 'zhangfei',
age: 21,
gender: 'nan'
}
// 改:对象.属性名
obj.uname = 'GGBond'
// 增加 对象.新属性名
obj.sing = function () {
console.log('sing~')
}
// delete 对象.属性名
delete obj.gender
console.log(obj)
</script>
</body>
</html>
效果图:
25.2、对象的遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let obj = {
uname: 'zhangfei',
age: 21,
gender: 'nan'
}
for (let k in obj) {
console.log(k)
console.log(obj[k])
}
</script>
</body>
</html>
效果图:
25.3、数组对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let arrObj =
[
{
uname: 'zs',
age: 21
},
{
uname: 'jige',
age: 33
},
{
uname: 'caixukun',
age: 12
}
]
// 对jige进行查询
console.log(arrObj[1].uname)
// 数组对象的遍历
for (let i = 0; i < arrObj.length; i++) {
for (let k in arrObj[i]) {
console.log(arrObj[i][k])
}
}
</script>
</body>
</html>
效果图:
25.4、math内置对象
Math.ceil : 向上取整
Math.floor : 向下取整
Math.abs : 绝对值
pow : 求幂次方
sqrt : 开平方根
随机数 从而n到m中随机整数 : let random = Math.floor(Math.random() * (m - n + 1)) + n
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
console.log(Math.E)
console.log(Math.PI)
// Math.ceil向上取整
console.log(Math.ceil(3.1415))
// Math.floor向下取整
console.log(Math.floor(3.1415))
// Math.abs 绝对值
console.log(Math.abs(-3.12))
// pow 求幂次方
console.log(Math.pow(3.12, 10))
// sqrt 开平方根
console.log(Math.sqrt(9))
// 随机数 从而n到m中随机整数
// let random = Math.floor(Math.random() * (m - n + 1)) + n
// 从2到10 随机整数
let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2
console.log(random)
</script>
</body>
</html>
25.5、日期内置对象
date : 获取完整时间
date.getFullYear : 获取年份
date.getMonth() + 1 : 获取月份 默认从0开始
date.getDate() : 获取日期
date.getDay : 获取星期
toFixed : 保留小数点后几位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let date = new Date()
// // 获取完整时间
alert(date)
// // 获取年份
let year = date.getFullYear()
// // 获取月份 默认从0开始
let month = date.getMonth() + 1
// // 获取日期
let day = date.getDate()
let hh = date.getHours()
let mm = date.getMinutes()
let ss = date.getSeconds()
// 获取星期
let gg = date.getDay()
alert(gg)
document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)
// 保留小数点后4位
let a = 3.234364
alert(a.toFixed(4))
</script>
</body>
</html>
26、获取元素的方法
document.querySelector(推荐) : 通过css选择器获取(获取到的内容是'字符串')
document.querySelector : 默认只找到第一个符合要求的元素
document.querySelectorAll : 将所有匹配的元素全部获取到,并存放到伪数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>盒子</div>
<ul>
<li>1</li>
<li class="two">2</li>
<li>3</li>
<li id="four">4</li>
</ul>
<script>
// 1、通过css选择器获取(推荐) (获取到的内容是'字符串')
const li2 = document.querySelector('.two')
console.log(li2)
// 默认只找到第一个符合要求的
const li = document.querySelector('li')
console.log(li)
// document.querySelectorAll将所有匹配的元素全部获取到,并存放到伪数组
const lis = document.querySelectorAll('li')
console.log(lis)
//遍历
for (let i = 0; i < lis.length; i++) {
console.log(lis[i])
}
// 支持结构伪类选择器
const li3 = document.querySelector('ul li:nth-child(3)')
console.log(li3)
// 通过标签名
console.log(document.getElementsByTagName('div'))
// 通过id号
console.log(document.getElementById('four'))
// 通过class
console.log(document.getElementsByClassName('two'))
</script>
</body>
</html>
27、修改元素的内容
修改的过程:
1、 | 获取到需要修改的元素 |
2、 | 对需要获取到的元素进行修改 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="one">我是一个即将被更改的盒子</div>
<div class="two">我也是一个即将被更改的盒子</div>
<script>
// 1、获取元素
const box1 = document.querySelector('.one')
const box2 = document.querySelector('.two')
// 2、操作
// 不可以识别标签
box1.innerText = `<h1>这是改后的盒子</h1>`
// 可以识别标签
box2.innerHTML = `<h1>这也是改后的盒子</h1>`
</script>
</body>
</html>
效果图:
28、修改元素属性
改元素属性 : 对象.属性=值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" placeholder="提示词">
<button disabled>同意该协议</button>
<script>
// 1、获取元素
let inp = document.querySelector('input')
let btn = document.querySelector('button')
// 改元素属性 对象.属性=值
inp.type = "password"
inp.placeholder = "请输入用户名"
btn.disabled = false
</script>
</body>
</html>
效果图:
29、修改元素样式属性
1、通过style修改样式 (该方式不能识别 - 只需在 - 后大写即可)eg:style.fontSize
2、通过添加类名 :calssName 会将原来的类名删除掉(不推荐)
toggle (切换): 有则删除,没有就添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box1 {
width: 300px;
height: 300px;
background-color: rgb(207, 39, 67);
font-size: 50px;
}
</style>
</head>
<body>
<div class="box1">1111</div>
<div class="box2 box1"></div>
<script>
// 1、获取元素
const box2 = document.querySelector('.box2')
const div = document.querySelector('.box1')
// 2、通过style修改样式
div.style.width = '500px'
div.style.fontSize = '16px'// 该方式不能识别 - ,只需大写即可
div.style.backgroundColor = 'pink'
// 3、添加类名 calssName会将原来的类名删除掉(不推荐)
// box2.className = 'box1'
// classlist.add('类名')追加
box2.classList.add('box1')
// box2.classList.remove('box1') 移除
box2.classList.toggle('box1') //切换:有则删除,没有则添加
</script>
</body>
</html>
30、定时器
setTimeout : 某段代码或者函数在多久后执行
定时器的第一个参数如果是对象方法,this不再指向对象,指向全局环境
格式:
//setTimeout(函数或一段代码,延迟时间,实参……)
setTimeout(code/function,time(ms))
//例子
setTimeout('console.log("我是一秒之后执行的代码")', 4000)
setInterval : 间隔一段时间,将代码或者函数执行一次
clearTimeout(a) : 清除a中的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// setTimeout\setInterval 定时器
// setTimeout :某段代码或者函数在多久后执行
// setTimeout(code/function,time(ms))
// 返回值是一个整数,代表定时器编码(方便后期的清除)
// 传的应该是函数名,不是函数调用
let timer3 = setTimeout(fn, 3000)
// setTimeout(函数或一段代码,延迟时间,实参……)
let timer4 = setTimeout(function (a, b) {
console.log(a + b)
}, 2000, 1, 4)
let obj = {
uname: 'gouxin',
a: 3,
b: 4,
sum: function () {
console.log(this)
console.log(this.a)
}
}
obj.sum()
setTimeout(obj.sum, 1000)
// 定时器的第一个参数如果是对象方法,this不再指向对象,指向全局环境
// 解决方法一
setTimeout(function () { obj.sum() }, 1000)
// 解决方法二
let a = setTimeout(obj.sum.bind(obj), 1000)
clearTimeout(a) //清除a中的数据
// setInterval 间隔一段时间,将代码或者函数执行一次
let timer = setInterval(' console.log("66666")', 1000)
clearInterval(timer)
setInterval(function (a, b) {
console.log(a + b)
}, 1000, 2, 3)
</script>
</body>
</html>