JS第3次

数组

数组（Array）
数组也是一个对象，和普通对象功能类似，也是用来存储一些值
不同的是普通对象是使用字符串作为属性名，数组是使用数字作为索引操作元素
索引：从0开始的整数就是索引
数组的存储性能比普通对象要好，在开发中我们经常使用数组来存储一些数据

数组方法

push()
该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度
可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
该方法会将数组新长度作为返回值返回
pop()
该方法可以删除数组的最后一个元素，并将被删除的元素作为返回值返回
unshift()
向数组开头添加一个或多个元素，并返回新数组长度
向前边插入元素以后其他元素索引会依次调整
shift()
可以删除数组的第一个元素，并将被删除的元素作为返回值返回

字符串操作

统计字符出现次数

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)

其中if句内可以改为下面，这样就省去了比较

if(obj[key]{
   obj[key]++
}else{
   obj[key] = 1
}

字符串的方法

创建一个字符串

var str = "Hello CSDN";

我们使用console.log(str.length);
检查其长度
输出结果为13

charAt()
可以返回字符串中指定位置的字符
根据索引获取指定的字符
charCodAt()
获取指定位置字符的字符编码（Unicode编码）

String.formCharCode()
可以根据字符编码去获取字符

concat()
可以用来连接两个或多个字符串
作用和+一样

indexof()
该方法可以检索一个字符串中是否含有指定内容
如果字符串中含有该内容，则会返回其第一次出现的索引，如果没有找到指定的内容，则返回-1
可以指定第二个参数，指定开始查找的位置

lastIndexOf()；
该方法的用法和indexOf()一样
不同的是indexOf是从前往后找
而lastIndexOf是从后往前找

slice()
可以从字符串中截取指定的内容
不会影响原字符串，而是将截取到的内容返回
参数：
第一个：开始位置的索引（包括开始位置）
第二个：结束位置索引（不包括结束位置）
如果传递一个负值则默认使用0
而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换位置

substr()
用来截取字符串
参数：
1.截取开始位置的索引
2.截取的长度

split()
可以将一个字符串拆分为一个数组
参数：
需要一个字符串作为参数，将会根据该字符串去拆分数组

toUpperCase()
将一个字符串转换为大写并返回

json格式字符串

var str = '{"name":"ke","age":100}'

var obj = JSON.parse(str)

如上我们就转换了JSON格式字符串

模板字符串

var myhtml = `<li>111</li>
<li>222</li>`

如上我们就可以使用·来使得写js时换行操作
同样，我们拼接时也是可以使用特殊用法的

var myn = "ksc"
var str = `my name is ${myn)}`

如上的${}就是可以直接拼接
其中大括号内可以是变量或者算式或者是三目运算

数字常用方法

Number

var price = 123.456

console.log(price.toFixed(2))

如上就实现了小数的保留数位并四舍五入
toFixed()
返回字符串，所以上面要加起来就要进行修改

console.log(price.toFixed(2)-0+100)

如上-0是必要的

Math对象

Math.()

random

random返回0-1之间随机数

随机整数

0-10(不包含10)

var res = Math.floor(Math.random()*10)

如果是0-100呢？显然只需要改变后面的数即可
改为100

0-10(包含10)

var res = Math.floor(Math.random()*11)

10-20（不包含20）

var res = Math.floor(Math.random()*10)+10

通过上面的几个我们即可类比出来
下面我们封装为一个函数

min-max 不包含max

function gerRnd(min,max){
	if(min>max){
		console.error("参数有误")
		return
	}
	return Math.floor(Math.random()*(max-min))+min
}

min-max 包含max

function gerRnd(min,max){
	if(min>max){
		console.error("参数有误")
		return
	}
	return Math.floor(Math.random()*(max-min+1))+min
}

round

四舍五入取整
Math.round()

ceil floor

向上向下取整

abs

绝对值

sqrt

平方根

pow(底数,指数)

指数运算

max(多个参数)

取最大值

PI

PI值

时间对象

在JS中使用Date对象来表示一个时间
创建一个Date对象
如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间

var date = new Date()

如上就获取了当前时间
创建一个指定的时间对象
需要在构造函数中传递一个表示时间的字符串作为参数
日期格式 月份/日/年 时:分:秒

var d2 = new Date("12/31/2022 11:10:30");

getDate()
获取当前日期对象是几日
getDay()
获取当前日期对象是周几
会返回一个0~6的值
0表示周日
1表示周一

getMonth()
获取当前时间对象的月份
会返回一个0~11的值
0表示1月
1表示2月
11表示12月

getTime()
获取当前日期的时间戳
时间戳：指的是从格林尼治或标准时间的1970年1月1日 0时0分0秒
到当前日期所花费的毫秒数
如何获取当前时间戳

time = Date.now();

定时器

JS中有两类定时器，倒计时定时器和间隔定时器

倒计时定时器

倒计时多少时间以后执行函数
语法: setTimeout(要执行的函数，多长时间以后执行)
会在你设定的时间以后，执行函数

var timeId = setTimeout(function (){
	console.log('我执行了')
}，1000）
console.log(timerId)

时间是按照毫秒进行计算的，1000毫秒就是1秒钟
所以会在页面打开1秒钟以后执行函数
只执行一次，就不在执行了
返回值是,当前这个定时器是页面中的第几个定时器

间隔定时器

setInterval

setInterval(function(){
	console.log(new Date())
},1000)

如上就是一个间隔定时器
下面就是实现的效果

但是这个是停止不了的，下面我们改变一下
有两个方法
clearTimeout(time1)
clearInterval(time2)

</html>
<buttton id="btn1">清除定时器</buttton>
<buttton id="btn2">清除间隔定时器</buttton>
<script>
    var time1 = setTimeout(function(){
        console.log("ker")
    },2000)
    var time2 = setInterval(function(){
        console.log(new Date())
    },1000)
    console.log(time1,time2)

    btn1.onclick = function(){
        console.log("btn click")

        clearTimeout(time1)
    }

    btn2.onclick = function(){
        console.log("btn2 click")

        clearInterval(time2)
    }
</script>

如下就是显示效果

倒计时

<div id="box"></div>
<script>
    var targetDate = new Date("2023/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

        var obj = {
            day:day,
            hours:hours,
            minutes:minutes,
            seconds:seconds
        }
        return obj
    }

    setInterval(function(){
        var currentDate = new Date()
        var res = diffTime(currentDate,targetDate)

        box.innerHTML = `618-${res.day}day${res.hours}hours${res.minutes}minutes${res.seconds}s`

    },1000)

</script>

BOM

BOM(Browser object Mode1): 浏览器对象模型

其实就是操作浏览器的一些能力

我们可以操作哪些内容
1.获取一些浏览器的相关信息(窗口的大小)
2.操作浏览器进行页面跳转
3.获取当前浏览器地址栏的信息
4.操作浏览器的滚动条
5.浏览器的信息(浏览器的版本)
6.让浏览器出现一个弹出框(alert / confirm / prompt)
……
BOM 的核心就是 window 对象
window 是浏览器内置的一个对象，里面包含着操作浏览器的方法

获取浏览器尺寸

innerHeight 和innerwidth
这两个方法分别是用来获取测览器窗口的宽度和高度 (包含滚动条的)

var windowHeight = window.innerHeight
console.log(windowHeight)

var windowwidth = window.innerWidth
console.log(windowwidth)

弹出层

先设置一个div并给id值为btn

询问框

btn.onclick = function(){
	var res = confirm("你确认嘛")
	console.log(res)
}

浏览器地址栏

在 window 中有一个对象叫做 location
就是专门用来存储浏览器的地址栏内的信息的

location.href

location.href 这个属性存储的是浏览器地址栏内 url地址的信息

console. log(window.location.href)

会把中文变成url编码格式
location.href 这个属性也可以给他赋值

window.location.href = './index.html'
// 这个就会跳转页面到后面你给的那个地址

location.reload

location.reload()
这个方法会重新加载一遍页面，就相当于刷新是一个道理

window.location.reload()

注意:不要写在全局，不然浏览器就会一直处在刷新状态

浏览器常见事件

onload

浏览器的 onload 事件
这个不在是对象了，而是一个事件。
是在页面所有资源加载完毕后执行的

window.onload = function () {console.log("页面已经加载完毕')
}

resize

window.onresize = function(){
	console.log("resize")
}

用来检测窗口的改变

onscroll

window.onscroll = function(){
	console.log("scroll")
}

可以获取页面滚动信息

浏览器滚动距离

window.onscroll = function(){
    console.log(document.documentElement.scrollTop ||document.body.scrollTop)
}

浏览器打开标签页

<button id = "btn">click</button>
<script>
    btn.onclick = function(){
        window.open("http://www.abc.com")
    }
</script>

下面我们来添加一个关闭页面，关闭上面的界面

<button id = "btn2">click</button>
<script>
    btn2.onclick = function(){
        window.close()
    }
</script>

浏览器历史记录

window 中有一个对象叫做 history
是专门用来存储历史记录信息的

history.back

history.back 是用来会退历史记录的，就是回到前一个页面，就相当于浏览器上的◀按钮

window. history .back()

前提是你要有上一条记录，不然就是一直在这个页面，也不会回退

history.forword

history.forword 是去到下一个历史记录里面，也就是去到下一个页面，就相当于浏览器上的前进按钮

window. history.forward()

前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个

本地存储

localStorage

//增
localstorage.setItem("name',"kerwin")
//取
localstorage.getItem("name")
//型
localstorage.removeItem("name")
//清空
localstorage.clear()

sessionStorage

//增
sessionstorage.setitem("name","kerwin")
//取
sessionStorage.getitem("name")
//删
sessionStorage.removeItem("name")
//清空
sessionstorage.cear()