JavaScript学习
1.1 js之hello
<script>
alert("hello world")
document.write("hello world")
</script>
</head>
1.2 js的书写位置
（1）行内式
<body>
<button onclick="alert('hello world')">点我</button>
<a href="javascript:alert('hello world')">点我</a>
</body>
</html>
（2）内嵌式
<body>
<script>
alert("hello world")
console.log("hello world")
</script>
</body>
</html>
（3）外链式
<script src="js/hello.js"></script>
</head>
1.3 js的注释与规范
提倡不加分号
注释：双斜杠
1.4 js变量
指在程序中保存数据的一个容器
变量是在计算机内存中存储数据的标识符，根据变量名称可以获取到内存中存储的数据
注意：
1.一个变量名只能存储一个值
2.当再次给一个变量赋值时的时候，前面一次的值就没有了
3.变量名称区分大小（JS严格区分大小写）
<script>
var x=100
console.log(x+2000)
var z,m,n
var a=1,b=2,c=3
</script>
</head>
<body>
<input type="text">
</body>
</html>
1.5 变量命名的规则和规范
规则：
（1）一个变量名称可以由数字，字母，英文下划线（_），美元符号（$）组成
（2）严格区分大小写
（3）不能由数字开头
（4）不能是保留字或者关键字
（5）不要出现空格
规范：
（1）变量名尽量有意义（语义化）
（2）遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
（3）不要使用中文
1.6 数据类型
（1）基本数据类型
1.Number 18,12.5(浮点数),2e3，十六进制，八进制，二进制（不加引号）
2.String 字符串类型(双引号)
<script>
var str ="hello"
console.log(str)
</script>
</head>
<body>
<input type="number">
</body>
</html>
3.Boolean （ture false）
<script>
var ischecked =false
console.log(ischecked)
</script>
</head>
<body>
记住用户名<input type="cheakbox">
</body>
</html>
4.Undefined
5.Null
6.Symbol
（2）复杂数据类型(对象类型)
（3）判断数据类型
使用typeof关键字来进行判断
<script>
var a ="aaaaaaaa"
console.log(typeof a)
console.log(typeof(a))
//结果一定是字符串 string类型
console.log(typeof a + 100)
console.log(typeof(a + 100))
var b = null
console.log(typeof b)
</script>
</head>
<body>
(4)其他数据类型转成数值
<script>
var a ="100"
var b = Number(a)
console.log(typeof a,b)
var a = null
var b = Number(a)
console.log(a,b)
//非加号 -0 /1 *1
var a = "100"
var b = a-0
console.log(b)
</script>
</head>
(5)其他数据类型转成字符串
1.变量，toString()
有一些数据不能使用tostring()方法，比如undefined和null
2.String(变量)
所有数据类型都可以
3.使用加法运算
在JS里面，+由两个含义
字符串拼接，只要+任意一边是字符串，就会进行字符串拼接
加法运算：只有+两边都是数字的时候，才会进行数学运算
<script>
//1.String() .所有类型都能转成字符串
var a = 100
var b = String(a)
console.log(a,b)
//2.toString
var a=100
var b=a.toString()
console.log(a,b)
//3. +
var a = 100
var b = a+""
console.log(b)
</script>
</head>
(6)其他数据类型转成布尔
1.Boolean(变量)
在JS中，只有’ ’ , 0 ，null ,undefined , NaN ,这些是false
其余都是true
<script>
var a = 100
var b = Boolean(a)
console.log(a,b)
</script>
</head>
1.7 运算符
在代码里面进行运算的时候使用的符号，不光只是数学运算，我们在js里面还有很多的运算方式
（1）数学运算符
<script>
var a = 10
var b = true
console.log(a+b)
var a = 10
var b = 3
console.log(a%b)
</script>
</head>
(2)赋值运算符
<script>
var a = 1
a = 2
console.log(a)
//交换两个数
var m = 5
var n = 6
var c
c = m
m = n
n = c
console.log(m,n)
// += -= += /= %=
var number = 5
number+=1
console.log(number)
</script>
</head>
(3)比较运算符
<script>
var sum = 100
console.log(sum>200)
var age = "22"
console.log(parseInt(age)===22)
console.log(ture==1)
var x = 5
console.log(x!=6)
</script>
</head>
(4)逻辑运算符
var a = true
var b = true
console.log(a && b)
var category = "家电" //选择的当前商品的类别
var price = 300 //总金额
console.log(category==="家电"&&price>200)
var day = 7
console.log(day===6 || day===7)
var c = false
console.log(!c)
var length = 5
console.log(length===0)
console.log(!length)
</script>
</head>
特殊：
- ！！a ==>转换成布尔值
- && || 短路 用法
<script>
var x = "1111"
console.log(!!x)
var y = null
console.log(y&&y.toString())
console.log(11111)
var z =""
document.write(z || "这个家伙很懒，什么也没有留下")
</script>
</head>
(5)自增自减运算符
<script>
var number = 10
number++
document.write(number)
document.write(++number)
</script>
<script>
var n = 10
document.write(--n)
</script>
(6)三元运算符
三元运算，就是两个符号组成一个语句
语法：条件 ？ 条件为ture的时候执行：条件为false的时候执行
<script>
10>20?console.log(11111):console.log(22222)
//满200减10
var sum = 210
var youhuisum = sum>200? sum-10 : sum
console.log(sum,youhuisum)
//满200 减 10 满100减5
var sum = 190
var youhuisum = sum>200? sum-10 : (sum>100?sum-5:sum)
console.log(sum,youhuisum)
</script>
1.8 分支结构
（1）if条件分支结构
if语句
<script>
var sum = 210
var youhuisum
if(sum>200){
youhuisum = sum-10
console.log(1111)
}else{
youhuisum = sum
console.log(2222)
}
console.log(sum,youhuisum)
</script>
if else if … 语句
<script>
var sum = 190
var youhuisum
if (sum>200) {
youhuisum = sum-10
console.log(1111)
} else if (sum>100){
youhuisum = sum-5
}
console.log(sum,youhuisum)
</script>
if案例
1.判断奇数偶数
数学：能整除2的就是偶数，否则就是奇数
%2 === 0
%2 === 1 奇数
var n = 9
if(n%2===0){
console.log("偶数")
} else {
console.log("奇数")
}
2.根据0-100的数字输出成绩
- [90 , 100]输出 A
- [80 ,90 ) 输出 B
- [70 ,80 ) 输出 C
- [60 , 70) 输出 D
- [0 ,60 ) 输出 E
var inputScore = 83
if (inputScore>=90){
console.log("A")
}else if (inputScore>=80){
console.log("B")
}else if (inputScore>=60){
console.log("D")
}else{
console.log("E")
}
3.判断闰年
var inputYear = 2022
if (inputYear%400===0 || (inputYear%4===0 &&
iinputYear%100!==0)) {
console.log("闰年")
}else{
console.log("平年")
}
(2)SWITCH条件分支结构
<script>
var code = 1
switch (code) {
case 1 :
document.write("未付款")
break;
case 2 :
document.write("已付款")
break;
case 3 :
document.write("已发货")
break;
case 4 :
document.write("已完成")
break;
}
</script>
注意：
1.===
2.不要比较运算符
3.break必须写
switch案例
var sum = 220
var youhuisum
switch(true){
case sum>=200:
youhuisum = sum-10
break;
case sum>=100 && sum<200:
youhuisum = sum-5
break;
case sum>=50 && sum<100:
youhuisum = sum-3
break;
default:
youhuisum = sum
break;
}
console.log(sum,youhuisum)
根据1-12的数字来输出一个月有多少天，不考虑闰年
var month = 12
switch (key) {
case 1:
console.log("31天")
break;
case 2:
console.log("28天")
break;
default:
break;
}
1.9 循环结构
循环结构，就是根据某些给出的条件，重复的执行同一段代码
循环必须要有某些固定的内容组成
1.初始化
2.条件判断
3.要执行的代码
4.自身改变
(1)WHILE循环
注：如果没有自身改变，那么就会一直循环不停了
<script>
var n = 0;
while(n<10){
console.log("helllo")
n++
}
</script>
while案例
1.求1-100所有数字的和
<script>
var n = 1
var sum = 0
while(n<=100){
sum+=n
n++
}
console.log(sum)
</script>
2.求一个数字的阶乘
<script>
var n = 5
var sum = 1
while (n>0) {
sum*=n
n--
}
console.log(sum)
</script>
(2)DO WHILE 循环
<script>
do{
console.log("hello")
}while (false)
var n = 0
do {
console.log("li",n)
n++
} while (n<10)
</script>
do while案例
alert(“111”)
do{
var res = prompt("请输入你的名字")
if (res) {
document.write(res)
}
} while(!res)
var n = 1
var sum = 0
do{
sum+=n
n++
} while (n<=100)
console.log(sum)
(2) FOR循环
<script>
for(var n=1;n<=10;n++){
if(n<=3) {
console.log("广告商品",n)
} else {
console.log("普通商品",n)
}
}
</script>
for案例
<script>
var sum = 0
for(var i=1;i<=100;i++){
sum+=i
}
console.log(sum)
</script>
1000-2000闰年
<script>
var count = 0
for(var n=1000;n<=2000;n+=4){
if(n%400===0 || n%100!==0){
document.write(n+" ")
count++
if (count%4===0){
document.write("<br/>")
}
}
}
</script>
(3)BREAK循环
<script>
for(var i=0;i<=5;i++){
if(i===3){
break
}
console.log(i)
}
</script>
<script>
for(var i=0;i<=5;i++){
if(i===3){
continue
}
console.log(i)
}
</script>
求质数
<script>
var n = 71
for(var i = 2;i<n/2;i++){
if(n%i===0){
break
}
console.log(i)
}
if(i<=n/2){
console.log("不是")
}else{
console.log("是")
}
</script>
九九乘法表
<style>
span{
display: inline-block;
width: 100px;
}
</style>
</head>
<body>
<script>
for (var m =1; m<= 9;m++){
for(var n=1; n <= m;n++){
document.write("<span>"+m+"*"+n+"="+m*n+"</span>")
}
document.write("<br>")
}
</script>
2.0 函数的概念
Function
函数是一个复杂数据类型
（1）定义函数
1.声明式
<script>
function test1(){
console.log("我是test1套餐")
}
test1()
</script>
2.赋值式
<script>
function test1(){
console.log("我是test1套餐")
}
var test3 = function(){
console.log("我是test3套餐")
}
test1()
test2()
test3()
</script>
（2）函数调用
区别 ： （1）声明式 先调用再定义
（2）先定义再调用
函数实现九九乘法表
<script>
function test(){
for (var m =1; m<= 9;m++){
for(var n=1; n <= m;n++){
document.write("<span>"+m+"*"+n+"="+m*n+"</span>")
}
document.write("<br>")
}
}
test()
</script>
(3)函数的参数
1.实参VS形参
2.可以不形参，可以不形参
3.形参只能在函数内部去使用
<script>
//定义了两个形参
function test(a,b){
var yinliao = a===1?'可乐':'雪碧'
var iaoshi = b===1?'薯条':'鸡米花'
var zhushi = "鸡腿堡"
var zhushi = "鸡腿堡"
console.log("我是套餐A", yinliao,iaoshi,)
}
test(1,2)
test(2,1)
test()
console.log(a,b)
</script>
（4）返回值
<script>
function add(x,y,z){
var result = x + y + z
return result
}
var res = add(1,2,3)
console.log(res)
function test(a){
console.log("传给后端用"，a)
}
test(res)
// 注意:1.return 看需求
//2. return 后面无法执行了。
</script>
函数return案例
<script>
function isPrime(n){
for(var i = 2;i<n/2;i++){
if(n%i===0){
break
}
}
if(i<=n/2){
return false
}else{
return true
}
}
var res = isPrime(111)
console.log(res)
for(var i=300;i<500;i++){
if(isPrime(i)){
console.log(i)
}
}
</script>
(5) 预解析
<script>
//赋值函数
myFunc()
var myFunc = function(){
console.log("myFunc")
}
myFunc()
//声明式
test()
function test(){
console.log("test")
}
test()
</script>
(6)重名问题
以第二个为主
不能跨script标签提升
（7）作用域
1.访问规则
作用域的查找机制只能是向上找，不能向下找
<script>
var num = 100
function test1(){
var num = 200
function child1(){
var num = 300
console.log(num)
}
child1()
}
test1()
</script>
2.赋值规则
<script>
function test2(a,b){
return a+b
}
var res = test2(1,2)
console.log(res)
var result
function test3(a,b){
result = a+b
}
test3(1,2)
console.log(result)
</script>
2.1对象
<script>
//字面量的方式创建一个对象
var obj0 = {}
console.log(obj0)
var obj = {
name: "kerwin",
age: 100,
location:"大连"
}
console.log(obj)
//内置构造函数
var obj2 = new object()
console.log(obj2)
obj2.name = "xiaoming"
obj2.age = 18
console.log(obj2)
</script>
(1)对象的基本操作
<script>
//增
var obj = {}
console.log(obj)
obj.name = "kerwin"
obj.age = 100
obj.location = "dalian"
console.log(obj)
//查
document.write("姓名是"+obj.name)
//改
obj.age = 200
console.log(obj)
//2-增
var obj2 = {}
obj2["name"] = "tiechui"
console.log(obj2)
//2-查
console.log(obj2["name"])
//2-改
obj2["name"] = "tiechui2"
console.log(obj2)
//2-删
delete obj2["name"]
console.log(obj2)
//区别
var myobj = {
"a+b":"111111"
"#aa":"222222"
}
console.log(myobj["a+b"])
(2)对象的遍历
<script>
var obj = {
name: "kerwin",
age: 100,
location: "dalian"
}
for(var i in obj){
document.write(i+":"+obj[i])
document.write("<br>")
}
</script>
2.2不同数据类型的存储
<script>
var obj = {
name:"kerwin",
age:100,
location:"dalian"
}
var obj2 = {}
for(var i in obj){
obj2[i] = obj[i]
}
obj2.name = "tiechui"
confirm.console.log(obj;obj2)
</script>
2.3数组
(1)创建一个数组
<script>
//字面量
var ageArr = [12,14,15,16]
var nameArr = ["kerwin","xiaoming","tiechui"]
var studentArr = [{
name:"kerwin",
age:100
},{
name:"xiaoming",
age:18
}]
//Array
var arr1 = new Array(12,124,15,16)
var arr2 = new Array(10)
console.log(arr1,arr2)
</script>
(2)数组的基本操作
<script>
//length
var arr1 = [1,2,3,4,8]
console.log(arr1.length)
arr1.length = 3
console.log(arr1)
//清空数组
arr1.length = 0
console.log(arr1)
//索引 0，1，2，3
var arr2 = ["kerwin","xiaoming","tiechui"]
console.log(arr2[0],arr2[1],arr2[3])
arr2[0] = "kevin"
console.log(arr2)
arr[3] = "gangdaner"
console.log(arr2)
//遍历
var arr4 = []
for(var i=0; i<arr3.length;i++){
arr4[i] = arr3[i]
}
console.log(arr4)
arr4[0] = "aaaa"
console.log(arr3,arr4)
</script>
(3)冒泡排序法
<script>
//sort 排序
var arr = [4,3]
var temp = arr[0]
arr[0] = arr[1]
arr[1] = temp
console.log(arr)
for (var i=0; i<arr.length-1;i++){
if(arr[i] > arr[i+1]){
var temp = arr[i]
arr[i] = arr[i+1]
arr[i+1] = temp
}
}
console.log(arr)
for(var m=0;m<arr.length-1;m++){
}
(4)选择排序法
(5)数组的常用方法
影响原数组的方法
<script>
var arr = [1,2,3]
//push 后面追加元素
//返回值 长度
var res = arr.push("kerwin")
console.log(arr)
console.log("返回值",res)
//pop后面删除元素
//返回值删除的元素
var respop = arr.pop()
console.log(arr)
console.log("返回值",respop)
//unshift 前面追加元素
//返回值 长度
var resunshift = arr.unshift("tiechui")
console.log(arr)
console.log("返回值",resunshift)
//shift 前面删除元素
//返回值 删除的这个元素
var resunshift = arr.shift()
console.log(arr)
console.log("返回值",resunshift)
//splice 删除
//splice 增加
var arr2 = ["ke","xm","tc"]
var resplice = arr2.splice(1,0,"gd","zs")
console.log(arr2)
console.log("返回值",ressplice)
arr2.splice(0,0,"aaaaa")
console.log(arr2)
//resver 倒序
var arr3 = [1,2,3,4]
arr3.reverse()
console.log(arr3)
//sort 排序
var arr4 = [11,21,56,7,3]
console.log(arr4)
arr4.sort()
console.log(arr4)
//sort接受一个回调函数
arr4.sort(function(a,b){
return b-a
})
console.log(arr4)
</script>
不影响原数组的方法
<script>
// concat 拼接
var arr1= [1,2,3]
var arr2= [4,5,6]
var arr3 = arr1.concat(arr2,7,[8,9])
console.log(arr1,arr2,arr3)
var arr4= arr1.concat()//复制方法
arr4.pop()
console.log(arr1,arr4)
// join 数组=>字符串
var arr = []
for(var i=0;i<5;i++){
arr.push("<li>"+i+"</li>")
}
document.wtite(arr.join(""))
//slice 截取（开始索引，结束索引）
var arr = ["aaa","bbbb","ccc","ddd","eeee"]
var arr2 =arr.slice()
arr2.pop()
console.log(arr,arr2)
//indexof -1 找不到
var arr = ["aaa","bbb","ccc","ddd","eee"]
var res = arr.indexOf("ccc")
console.log(res)
//lastIndexof -1找不到
var res = arr.lastIndexOf("kerwin",3)
console.log(res)
foreach 遍历
<script>
var arr = ["aaa","bbb","ccc","ddd"]
//回调函数
arr.forEach(function(item,index){
console.log(item,index)
})
</script>
map 映射
<script>
var arr = [1,2,3,4,5]
var arr2 = arr.map(function(item){
return item*item*item
})
console.log(arr2)
</script>
filter 过滤
<script>
var arr = [100,200,300]
var arr2 = arr.filter(function(item){
return item>200
})
console.log(arr2)
</script>
every 每一个
<script>
var arr = [80,90,92,94]
var arr2 = arr.every(function(item){
return item>=90
})
console.log(arr2)
</script>
some 只要一个满足条件 就是ture
<script>
var arr = [80,90,92,94]
var arr2 = arr.some(function(item){
return item>=90
})
console.log(arr2)
</script>
find
<script>
var arr = [{
name:"体育",
grade:100
},
{
name:"数学",
grade:98
}
]
var arr2= arr.find(function(item){
return item.grade===100
})
console.log(arr2)
</script>
reduce 叠加
<script>
var arr = [1,2,3,4,5]
var arr2= arr.reduce(function(prev,item){
return prev+item
},0)
console.log(arr2)
</script>
(6)数组去重
方法一
<script>
var arr = [1,2,3,4,5,6,2,1]
var arr2 = []
for(var i=0;i<arr.length;i++){
if(arr2.indexOf(arr[i])=== -1){
arr2.push(arr[i])
}
}
console.log(arr,arr2)
</script>
方法二（利用对象）
<script>
var obj = {}
for(var i=0;i<arr.length;i++){
obj[arr[i]] = "随便"
}
console.log(obj)
var arr2 =[]
for(var i in obj){
arr2.push(i-0)
}
console.log(arr2)
</script>
方法三 new Set
<script>
var set1 = new Set(arr)
console.log(set1)
var arr1 = Array.from(set1)
console.log(arr1)
</script>
2.4字符串
（1）统计字符出现次数
<script>
var str = "abcabcab"
var obj = {}
for(var i=0;i<str.length;i++){
console.log(str[i])
var key = str[i]
if(obj[key]===undefined){
obj[key]= 1
}else{
obj[key]++
}
}
console.log(obj)
</script>
(2)字符串常用方法
1.charAt(索引)返回索引对应的字符
<script>
var str = "kerwin"
var str1 = str.charAt(10)
console.log(str,str1)
</script>
2.charCodeAt(索引)返回索引对应的字符
<script>
var str = "kerwin"
var str1 = str.charCodeAt(0)
console.log(str1)
</script>
3. toUpperCase() toLowerCase()
<script>
var str = "heLlo"
console.log(str.toUpperCase())
console.log(str.toLocaleUpperCase())
</script>
4. 截取 substr(开始索引，长度) substring（开始索引，结束索引） slice（开始索引，结束索引）
<script>
var str = "kerwin"
var str1 = str.substr(1,2)
var str2 = str.substring(1,2)
var str3 = str.substring(1)
console.log(str1,str2,str3)
</script>
5. replace 替换
<script>
var str = "abdwadwa"
var str1 = str.replace("a","#")
console.log(str1)
</script>
6.split 分割 join
<script>
var str = "a|b|c|d"
console.log(str.split("|"))
</script>
7. indexof lastIndeexOf
<script>
var str = "abcda"
console.log(str.indexOf("a",1))
console.log(str.lastIndexOf("a",3))
</script>
8. concat 连接字符串 +
<script>
var str = "abcd"
var str1 = str.concat("ef")
console.log(str1)
</script>
9. trim 去掉首尾空格 trimStart() trimLeft()去掉首空格 trimEnd() trimRight()去掉尾空格
<script>
var str = " hello world"
console.log("|"+str+"|")
console.log("|"+str.trim()+"|")
</script>
(3)案例——模糊查询
<script>
var arr= ["aaa","abc","bcc","bcd","ddd","ccd"]
//数组的filter 字符的indexOf
var input = prompt("请输入查询的内容")
var res = arr.filter(function(item){
return item.indexOf(input)>-1
})
console.log(res)
</script>
(4)json格式字符串
<script>
var str = '{"name":"kerwin","age":100}'
console.log(str)
var obj = JSON.parse(str)
console.log(obj)
</script>
(5)模板字符串
<script>
//es6
var myhtml = "<li>1111</li><li>2222</li><li>3333</li>"
var myname = "kerwin"
var str = `my name is ${myname}`
document.write(str)
</script>
2.5数字常用方法
1. Number toFixed()
<script>
var price = 123.45678
var sum = price.toFixed(2)-0+100
console.log(price.toFixed(2))
</script>
2.Math对象
random 0-1
console.log(Math.random())
round四舍五入取整
console.log(Math.round(4.46))
ceil向上 floor向下
console.log(Math.floor(4.96))
abs绝对值
console.log(Math.abs(-10.2))
sqrt 平方根
console.log(Math.sqrt(8))
pow(底数，指数)
console.log(Math.pow(3,3))
max(多个参数)
console.log(Math.max(10,50,20,34))
min(多个参数)
console.log(Math.min(10,50,20,34))
PI
console.log(Math.PI)
案例——随机整数
<script>
//0-10 不包含10
var res = Math.floor(Math.random()*10)
console.log(res)
//0-10 包含10
var res = Math.floor(Math.random()*(10+1))
//10-20 不包含20
var res = Math.floor(Math.random()*(10))+10
//10-20 包含20
var res = Math.floor(Math.random()*(10+1))+10
console.log(res)
//函数 --min-max 不包含
function getRnd(min,max){
if(min>max){
console.error("参数有误")
return
}
return Math.floor(Math.random()*(max-min))+min
}
//函数 --min-max 包含
function getRnd(min,max){
if(min>max){
console.error("参数有误")
return
}
return Math.floor(Math.random()*(max-min+1))+min
}
console.log(getRnd(10,12))
</script>
2.6时间对象
<script>
var date = new Date()
console.log(date)//自动转为字符串
//new Date传参
//1个传参 毫秒数
var date1= new Date(10000)
console.log(date1)
// 1970 1 1 0:0:1
// 2个参数 3个参
var date2 = new Date(2023,0,3,10,10,10)
console.log(date2)
//字符串
var date3= new Date("2023-10-10 10:10:10")
console.log(date3)
</script>
(1)时间对象常用方法
<script>
var date = new Date()
//getFullYear()
console.log(date.getFullYear())
//getMonth() 0-11===>1-12
console.log(date.getMonth())
//getDate()
console.log(date.getDate())
//getDay() 周日0 周一，周六 1-6
console.log(date.getDay())
//getHours
console.log(date.getHours())
console.log(date.getMinutes())
console.log(date.getSeconds())
//getTime() 时间戳
console.log(date.getTime())
//设置
console.log(date)
date.setFullYear(2025)
console.log(date)
date.setMonth(5)
console.log(date)
date.setDate(25)
console.log(date)
</script>
2.7定时器
//倒计时
//window.alert()
var time1= setTimeout(function(){
console.log("kerwin")
},2000)//注册定时器
//setInterval
var time2= setInterval(function(){
console.log(new Date())
},1000)//注册间隔定时器
console.log(time1,time2)
//clearTimeout(time1)
//clearInterval(time2)
console.log(btn1,bbtn2)//直接通过id，拿到按钮对象
btn1.onclick = function(){
console.log("btn1 click")
clearTimeout(time1)
}
btn2.onclick = function(){
console.log("btn2 click")
clearTimeout(time2)
}
<script>
//同步，异步
console.log("111111")
setTimeout(function(){
console.log("kerwin")
},1000)
console.log("222222")
</script>
(1)案例——倒计时
<script>
var currentDate = new Date()
var targetDate = new Date("2022/6/18")
function diffTime(current,target){
var sub =Math.ceil (target-current)/1000
var day = parseInt( sub/(60*60*24))
var hours = parseInt(sub%(60*60*24)/(60*60))
var minutes = parseInt(sub%(60*60)/60)
var seconds = sub%60
console.log(hours)
var obj = {
day:1,
hours:2,
minutes:3,
seconds:4
}
return obj
}
var res= diffTime( currentDate, targetDate)
box.innerHTML = `京东618-$(res.day)天$(res.hours)时$(res.minytes)分$(res.seconds)秒`
</script>
2.8 BoM
1.获取浏览器窗口的尺寸
<style>
*{
margin:0;
padding: 0;
}
html ,body{
width: 2000px;
height: 2000px;
}
</style>
</head>
<body>
<script>
console.log(window.innerHeight,innerHeight)
console.log(window.innerWidth,innerWidth)
</script>
</body>
2.浏览器的弹出层
<button id="btn">click</button>
<script>
// alert
btn.onclick = function(){
alert("用户名密码不匹配")
}
//询问框
btn.onclick = function(){
var res = confirm("你确定删除吗？")
console.log(res)
if(res){
}else{
}
}
//输入框 prompt
btn.onclick = function(){
var res= prompt("请输入你的用户名")
console.log(res)
}
</script>
3.浏览器的地址栏
<button id="btn">下一个页面</button>
<button id="btn2">刷新</button>
<script>
console.log(location.href)//地址
btn.onclick = function(){
location.href = "http://www.baidu.com"
}
//reload
btn2.onclick = function(){
location.reload()
}
</script>
3.浏览器的常见事件
<script>
window.onload = function(){
//页面所有的资源都加载完后执行（图片，视频，dom）
console.log("加载完成")
console.log(btn)
}
</script>
</head>
<body>
<button id="btn">click</button>
<script>
// resize
window.onresize = function(){
console.log("resize")
}
window.onscroll =function(){
console.log("scroll",“滚动距离达到指定距离了？”)
}
</script>
</body>
4.浏览器滚动距离
<style>
body{
height: 3000px;
}
</style>
</head>
<body>
<div style="height:300px;width:100px;"></div>
<button id="btn">回到顶部</button>
<script>
window.onscroll = function(){
console.log(document.documentElement.scrollTop || document.body.scrollTop)
if((document.documentElement.scrollTop || document.body.scrollTop) > 100){
console.log("显示回到顶部按钮")
}else{
console.log("隐藏回到顶部按钮")
}
}
btn.oonclick = function(){
window.scrollTo(0,0)
//1.两个数字
//2.对象
window.scrollTo({
left:0,
top:0
}
)
}
</script>
5.浏览器打开标签页
<body>
<button id="btn">click</button>
<button id="btn2">close</button>
<script>
btn.onclick = function(){
window.open("http://www.baidu.com")
}
//window.close()
btn2.onclick = function(){
window.close()
}
</script>
</body>
6.浏览器的历史记录
7.本地存储
<body>
<button id="btn">存</button>
<button id="btn2">取</button>
<script>
btn.onclick = function(){
localStorage.setItem("name","kercen")
//存：只能存字符串，不能存对象。
}
btn2.onclick = function(){
console.log(localStorage.getItem("name"))
}
//永久存储：localStorage
//会话存储：sessionStrage 关闭页面就丢失
</script>
</body>
8. 案例：记住用户名
<body>
<div>
用户名：
<input type="text" id="username">
</div>
<div>
密码：
<input type="password" id="password">
</div>
<div>
<button id="login">登录</button>
</div>
<script>
//先获取用户名，密码信息进行存储
var uservalue = localStorage.getItem("username")
var passvalue = localStorage.getItem("password")
username.value = uservalue
password.value = passvalue
login.onclick = function(){
console.log(username.value,password.value)
localStorage.setItem("username",username.value)
localStorage.setItem("password",password.value)
}
</script>
2.8 DOM
1.获取元素的方式
(1)html,head,body 非常规
<script>
console.log(document.documentElement)//rem
console.log(document.head)//获取head
console.log(document.body)//获取body
</script>
(2)常规=>id,class,tag…
<script>
//getElementsByClassName
var items = document.getElementsByClassName("newsitem")
console.log(items)//伪数组
//items[0].innerHTML = "news-111111"
for(var i=0;i<items.length;i++){
items[i].innerHTML ="news-"+i
}
// Set => Array.form
var newitems = Array.form(items)
console.log(newitems.filter)
//getElementsByTagName
var items = document.getElementsByTagName("li")
console.log(items)
</script>
2.操作元素属性
<div id="box">hello</div>
<input type="text" value="hello" id="username">
<script>
//元素自带（原生）属性
//自定义属性
box.inneerHTML = "22222"
username.type = "password"
</script>
(1)案例-密码可见
<input type="password" id="password">
<button id="eyebtn">eye</button>
<script>
var passInput = document.getElementById("password")
var eyeBtn = document.querySelector("#eyebtn")
eyeBtn.onclick = function(){
console.log(passInput.type)
if(passInput.type==="password"){
passInput.type = "text"
}else{
passInput.type = "password"
}
}
</script>
(2)购物车全选
<body>
<input type="checkbox" id="all">全选/全不选
<hr>
<ul class="shop">
<li>
<input type="checkbox">商品1
</li>
<li>
<input type="checkbox">商品2
</li>
<li>
<input type="checkbox">商品3
</li>
<li>
<input type="checkbox">商品4
</li>
</ul>
<script>
var oAll = document.querySelector("#all")
var oitems = document.querySelectorAll(".shop input")
oAll.onclick = function(+){
for(var i=0;i<oitems.length;i++){
oitems[i].checked = oAll.checked
}
}
for(var i=0;i<oitems.length;i++){
oitems[i].onclick =handler
}
function handler(){
var count = 0
for(var i=0;i<oitems.length;i++){
if(oitems[i].checked) count++
}
if(count===oitems.length){
oAll.checked = true
}else{
oAll.checked = false
}
}
</script>
</body>
(3)操作元素文本内容
<body>
<div id="box">
hello world
<div>kerwin</div>
</div>
<select name="" id="select">
<option value="1">11111</option>
<option value="2" selected>2222</option>
<option value="3">3333</option>
</select>
<script>
//innerHTML
//innerText
//value
console.log(box.innerHTML)
box.innerHTML = "<h1>11111111</h1>"
console.log(box.innerText)//获取只有文本
//box.innerText = "<h1>11111111</h1>" //不解析 html
console.log(box,value)
username.value = "2222222"
console.log(select.value)
select.value = "3"
</script>
</body>
(4)渲染页面
<body>
<ul>
<li>
<img src="###" alt="">
<h3>神奇动物：邓布利多之谜</h3>
<p>观众评分 7.8</p>
</li>
</ul>
<script>
var filmlist = [
{
url:"###",
title:"神奇动物：邓布利多之谜",
grade:7.8
},
{
url:"###",
title:"小美人鱼的奇幻冒险",
grade:7.7
}
]
var filmItems = filmList.map(function(item){
return `<li>
<img src="${item.url}" alt="">
<h3>${item.title}</h3>
<p>观众评分 ${item.grade}</p>
</li>`
})
console.log(filmItems.join(""))
var oul = document.querySelector("ul")
oul.innerHTML = filmItems.join("")
</script>
</body>
(5)操作元素样式
<body>
<div id="box" style="width: 100px;color: black;background-color: yellow;">11111</div>
<script>
//只能行内样式方法 style --读写
console.log(box.style.width)
console.log(box.style["background-color"])
console.log(box.style.backgroundColor)//驼峰
box.style.width = "200px"
box.style.backgroundColor = "red"
//内部样式，外部样式，行内 getComputedStyle 获取，不能赋值写样式。
var obox = document.getElementById("box")
var res = getComputedStyle(box)["background-color"]
console.log(res)
getComputedStyle(obox).width="10px"
//getComputedStyle 标准
//ie 低版本 obox.currentStyle.backgroundColor
</script>
</body>
(6)操作元素命名
<style>
.item{
width: 100px;
height: 100px;
background-color: red;
color: black;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="box" class="item item1 item2">kerwin</div>
<script>
//.className
//console.log(box.className)
//box.className = "item item2"
box.className += "item item2 item2 item3"
//classList属性
console.log(box.classList)
</script>
</body>
(7)简易选项卡
<style>
*{
margin: 0;
padding: 0;
}
ul{
display: flex;
list-style:none;
}
li{
height: 50px;
line-height: 50px;
text-align:center;
flex:1;
}
.active{
color: red;
border-bottom: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li class="active" id="item1">正在热映</li>
<li id="item2">即将上映</li>
</ul>
<script>
item1.onclick = function(){
item1.classList.add("active")
item2.classList.remove("active")
}
item2.onclick = function(){
item1.classList.remove("active")
item2.classList.add("active")
}
//选项卡
</script>
</body>
3.DOM节点
(1)获取节点的方式
<body>
<div>hello</div>
<div id="box">
kerwin
<p>111111</p>
<p>22222</p>
</div>
<div>tiechui</div>
<script>
//childNodes属性 vs children
console.log(box.childNodes)//所有节点
console.log(box.children)//所有元素
//firstChild firstElementChild
console.log(box.firstChild)
console.log(box.firstElementChild)
//lastChild lastElementChild
console.log(box.lastChild)
console.log(box.lastElementChild)
//previouSibling previousElementSibling
console.log(box.previouSibling)
console.log(box.previouElementSibling)
//nextSibling nextElementSibling
console.log(box.nextSibling)
console.log(box.nextElementSibling)
box.nextElementSibling.dataset.index=1
//parentNode vs parentElement
console.log(box.parentNode.parentNode.parentNode)
console.log(box.parentElement.parentElement)
console.log(box.getAttribute("index"))
console.log(box.attributes[1])
//vue <div v-for=""> {{myhtml}}</div>
</script>
</body>
(2)操作DOM节点
<body>
<div id="box">
<div id="child">111111</div>
</div>
<script>
//创建
var odiv = document.createElement("div")
odiv.className = "aaaa"
odiv.id= "aaa"
odiv.style.background="yellow"
odiv.innerHTML = "我是新创建的节点"
console.log(odiv)
//插入节点
box.appendChild(odiv)
//替换节点 replaceChild(新的节点，老的节点)
var odiv2= document.creatElement("div")
odiv2.innerHTML = "222222"
box.replaceChild(odiv2,child)
//克隆节点（） flase 不克隆后代
var oCloneBox = box.cloneNode()
console.log(oCloneBox)
</script>
</body>
(3)节点属性
(4)获取元素尺寸
扫一扫
1918
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
