JavaScript 学习笔记（第三天）

Smulll_

已于 2023-01-17 23:05:12 修改

阅读量1k

点赞数 1

分类专栏： JavaScript 文章标签： javascript 学习开发语言

于 2023-01-09 22:18:25 首次发布

本文链接：https://blog.csdn.net/weixin_74155781/article/details/128615267

版权

JavaScript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

JavaScript 学习笔记（第三天）

一、数组
二、字符串
三、数字
四、BOM

一、数组

1.1、数组的基础

什么是数组?
字面理解就是数字的组合
其实不太准确，准确的来说数组是一个数据的集合
也就是我们把一些数据放在一个盒子里面，按照顺序排好

[1，2，3，"he11o', true，false]

这个东西就是一个数组，存储着一些数据的集合

1.2、数据类型分类

number / string / boolean / undefined / null/ object / function / array /…
数组也是数据类型中的一种
我们简单的把所有数据类型分为两个大类基本数据类型和复杂数据类型
基本数据类型: number / string / boolean / undefined / null
复杂数据类型: object / function / array / …

1.3、创建数组

数组就是一个 [ ]
在 [ ] 里面存储着各种各样的数据，按照顺序依次排好

1.3.1、字面量创建一个数组

直接使用 [ ] 创建一个数组

//创建一个数组
var arrl=[]
//创建一个有内容的数组
var arr2 = [1,2,3]

1.3.2、内置构造函数创建数组

使用js的内置构造函数Array创建一个数组

//创建一个空数组
var arr1 = new Array
//创建一个长度为10的数组
var arr2 = new Array (10)
//创建一个有内容的数组
var arr3 = new Array(1，2，3)

1.4、数组的基本操作

1.4.1、数组长度

获取方式

//length
var arr1=[1,2,3,4]
console.log(arr1,length)

清空数组

arr1.lengt h= 0

1.4.2、索引

数组排列第一个是 “第0个”

var arr2 = ["xiaoming","jack","xiaohong"]
console.log(arr2[0],arr2[1],arr2[2])
//获取了前三个

1.4.3、遍历

var arr3=[3,4,4,5,8,6,8]
for( var i=0;i<arr3.length;i++){
console.log(arr3[i])
}

1.5、冒泡（sort）排列法

定义：

先遍历数组，让挨着的两个进行比较，如果前一个比后一个大，那么就把两个换个位置
数组遍历一遍以后，那么最后一个数字就是最大的那个了
然后进行第二遍的遍历，还是按照之前的规则，第二大的数字就会跑到倒数第二的位置
以此类推，最后就会按照顺序把数组排好了

for( var m=0;m<arr.length-1;m++){
	for( var i =0;i<arr.length-1-m;i++){
		if(arr[i]>arr[i+1]){
			var temp= arr[i]
			arr [i]=arr[i+1]
			arr[i+1]=temp
		}
	}	
}

1.6、选择排序法

先假定数组中的第0个就是最小的数字的索引
然后遍历数组，只要有一个数字比我小，那么就替换之前记录的索引
知道数组遍历结束后，就能找到最小的那个索引，然后让最小的索引换到第О个的位置
再来第二趟遍历，假定第1个是最小的数字的索引
在遍历一次数组，找到比我小的那个数字的索引
遍历结束后换个位置

var min = 0

for(var m=0;m<arr.length;m++){
	var min=m
	for (var i =m+1;i<arr.length;i++ ){
		if(arr[i]<arr[min]){
			min=i
		}
	}
	ver temp=arr[m]
	arr[m]=arr[min]
	arr[min]=temp
}

1.7、数组的常用方法

数组是一个复杂数据类型，我们在操作它的时候就不能再想基本数据类型一样操作了
比如我们想改变一个数组

//创建一个数组
var arr = [1，2，3]
//我们想把数组变成只有1和 2
arr = [1，2]

这样肯定是不合理，因为这样不是在改变之前的数组
相当于心弄了一个数组给到arr这个变量了
相当于把 arr里面存储的地址给换了，也就是把存储空间换掉了，而不是在之前的空间里面修改
所以我们就需要借助一些方法，在不改变存储空间的情况下，把存储空间里面的数据改变了

1.7.1、数组常用方法push

push是用来在数组的末尾追加一个元素

var arr = [1,2,3]
//使用push方法追加一个元素在末尾
//返回值为数组的长度
arr.push(4)

console.log(arr)//[1,2,3,4]

1.7.2、数组常用方法pop

push是用来在数组的末尾删除一个元素

var arr = [1,2,3]
//使用pop方法删除一个元素在末尾
//返回值为删除的元素
arr.pop()

console.log(arr)//[1,2]

1.7.3、数组常用方法unshift

unshift是用来在数组的前面追加一个元素

var arr = [1,2,3]
//使用pop方法删除一个元素在末尾
//返回值为数组长度
arr.unshift("teichui")

console.log(arr)//["teichui",1,2,3]

1.7.4、数组常用方法shift

shift是用来在数组的前面删除一个元素

var arr = [1,2,3]
//使用shift方法删除一个元素在前面
//返回值为删除的元素
arr.shift()

console.log(arr)//[2,3]

1.7.5、数组常用方法splice

能在任意位置删除，增加元素
删除

//splice 删除
//splice(从第几个下标开始，删除几个元素)
//返回值是要删掉的元素
var ressplice = arr.splice(1,1)
console.log(arr)
console.log("返回值",ressplice)

增加

//splice 增加
//splice(从第几个下标开始，删除几个元素,后面跟上要加进去的元素)
var ressplice = arr.splice(1,0,3，4)
console.log(arr)
console.log("返回值",ressplice)

1.7.6、数组常用方法reverse

是数组发生倒序

//reverse 倒序
var arr3 = [1,2,3,4]
arr3.reverse()
console.log(arr3)

1.7.7、数组常用方法sort(冒泡)

使数组发生冒泡排序

//sort 接受一个回调函数
var arr4 = [11,55,88,22,33]
arr4.sort(function(a,b){
	return a-b//从小到大排序
	//return b-a 从大到小排序
})

1.7.8、数组常用方法concat

以下介绍的是不影响原数组的方法
concat使数组发生拼接

	var arr1 = [1,2,3]
	var arr2 = [4,5,6]
 	var arr3=arr1.concat(arr2,7)//也可以在里面加上元素
 	console.log(arr1,arr2,arr3)
 	//arr3 即为拼接后的数组
	var arr4=arr1.concat()
	arr4.pop()
	//不会改变arr1的值，这也可以成为一种赋值方式

1.7.9、数组常用方法join

将数组转换为字符串

var arr = [1,2,3,4,5]
document.write(arr.join("-"))//数字之间会通过-号连接在一起
//join("xx"),xx会加到数组每个元素之间

1.7.10、数组常用方法slice

截取数组的内容

//slice 截取（不改变原数组）
var arr = ["aaa","ddd","fff","ggg"]
var arr2=arr.slice(0,2)
//slice(开始索引，结束索引)包前不包后（出现负数时表示从后面开始数）
//slice(一个值表示从此下标到最后)
//slice()无值表示截取全部的
var arr2 = arr.slice()
//也是一种赋值方式

1.7.11、数组常用方法indexof

查找元素所在数组的位置
值为-1就是不在

var arr=["aaa","bbb","ccc","ddd"]
var res= arr.indexof("aaa")
//可以找到aaa所在数组位置的下标
//如果遇到重名的只会返回第一个遇到的元素下标
var res= arr.indexof("aaa",2)//第二个参数表示从第几个元素开始查

1.7.12、数组常用方法lastIndexof

从后往前查找元素在数组的位置

var arr=["aaa","bbb","ccc","ddd"]
var res= arr.lastIndexof("aaa")
var res= arr.lastIndexof("aaa",2)
//第二个参数表示从第n个元素往前找

1.7.13、数组常用方法forEach

forEach遍历

var arr =["aaa","bbb","ccc","ddd"]
//回调函数
arr.forEach(function (item,index，arr){
	console.loh(item,index,arr)
	//第一个参数为每个元素的值，
	//第二个参数为下标值，
	//第三个参数为原数组
})

1.7.14、数组常用方法map

map映射

var arr=[1,2,3,4]
var arr2=arr.map(function(item){
	return item*item//返回值返回到原数组中
	//此式子为计算原数组平方
})

var arr =["aaa","vvv","ooo","aaas"]
var arr2 =arr.map(function(item){
	return "<li>"+item+"</li>"
})
documnet.write(arr2.join(""))

1.7.15、数组常用方法fileter

过滤数据

var arr =[
	{
	name:"aaa"
	price:100
	}
	{
	name:"bbb"
	price:200
	}
	{
	name:"ccc"
	price:300
]
var arr2=arr.fileter(function(item){
	return item.price>200//过滤出大于200的对象
})

1.7.16、数组常用方法every

每一个满足条件才能返回true

var arr=[80,90,80,66,94]

var arr2=arr.every(function(item){
	return item >=90//每一项都满足条件才会成为true否则为false
	
})

1.7.17、数组常用方法some

只要有一个满足就返回true

var arr=[80,90,80,66,94]
var arr2=arr.some(function(item){
	return item >=90//只要有一个满足就返回true

1.7.18、数组常用方法find

查找到满足条件的项

var arr =[
	{
	name:"语文"
	grade:90
	}
	{
	name:"数学"
	grade:90
	}
		{
	name:"英语"
	grade:100
	}
]
var arr2=arr.find(function(item){
	return item.grade ===100

1.7.19、数组常用方法reduce

叠加

var arr =[1,2,3,4,5]
var arr2=arr.reduce(function(prev,item){
	return prev+item
	//prev为上一次return的结果
	//prev 0 item 1
	//prev 1 item 2
	//prev 3 item 3
})

1.8、数组去重

1.8.1数组去重方法一

var arr=[1,2,3,4,5,6,2,1]
var arr=[]
for (var i=0;i<arr.length;i++)
{
	if(arr2.indexof(arr[i])===-1)//查看是否有过相同的元素
	{
	arr2.push(arr[i])
	}
}

1.8.1数组去重方法二

利用对象

var arr=[1,2,3,4,5,6,2,1]
var obj={}

for (var i -0; i<arr.length;i++)
{
	obj[arr[i]]="随便"
}

var aee2=[]
for (var i in obj)
{
	arr2.push(Number(i))
}

1.8.1数组去重方法三

set结构
一种很苛刻的结构，类似于数组，不允许有重复的元素

var arr=[1,2,3,4,5,6,2,1]
var set1 = new Set(arr)
var arr1=Array.from(ast1)
//Array.from()可以将set结构转换为数组

二、字符串

2.1、字符串的创建

我们创建字符串也分为两种方法字面量和构造函数
字面量:
var str = " he11o"
沟造函数创建
var str = new string( ' he11o ')

var str="hello"
console.log(str.lenght)//通过这种方式过去字符串长度 只读
console.log(str[1])//获取第几个下标的字符 只读

//遍历
for (var i=0;i<str.lenght;i++)
{
	console.log(i,str[i])
}

2.1.1、统计字符在字符串中出现的次数

var str="asdasdasdas"
var obj={}
for (var i= 0;i<str.lenght;i++)
{
	console.log(str[i])
	var key=str[i]
	if(obj[key])
	{
		obj[key]++
	}else{
		obj[key]=1
	}
}

2.2、字符串中常用的方法

2.2.1、charAt（索引）

返回索引对应的字符

var str = "asdsad"
var str1 =str.charAt(1)//将str中第一个字符传给str1

2.2.2、charCodeAt

返回索引对应的字符ASCLL值

var str = "asdsad"
var str1 =str.charCodeAt(0)

2.2.3、String.fromCharCode

将ASCLL值转化为字符

var arr=[]
for(var i =65;i<91;i++)
{
	arr.push(String.fromCharCode(i))
}

2.2.4、toUpperCase,toLowerCase

toUpperCase:将字符转化为大写
toLowerCase:将字符转化为小写

var str = "hello"
console.log(str.toUpperCase())
console.log(str.toLowerCase())

2.2.5、substr,substring,slice

都是进行截取
substr

var str ="hello"
ver str1=str.substr(0,2)
//substr(开始索引的位置，长度)

substring

var str ="hello"
ver str1=str.substring(0,2)
//substring(开始索引的位置，结束索引（不包含）)
ver str3=str.substring(0)
//substring(从这个位置到结束)

slice

var str ="hello"
ver str1=str.slice(0,2)
//slice(开始索引的位置，结束索引（不包含）)
ver str2=str.slice(0)
//slice(从这个位置到结束)
//支持出现负数

2.2.6、replace

替换

var str ="abasdsads"
var str1=str.replace("a","*")

2.2.7、split

分割，将字符串分割为数组

var str = "a,b,c,c"
var str1=str.split(",")

2.2.8、indexof,lastIndexof

查找字符所在字符串的位置值
值为-1就是不在

var str="abcda"
var str1=str.indexof("a")
var str1=str.indexof("a",2)//从第2个位置开始查
var str1=str.lastIndexof("a",2)//从后面开始查

2.2.9、concat

链接两个字符串

var str = "abcd"
var str = str.concat("ef")

此方法与加号拼接没有区别

2.2.10、trim,trimstart,trimLeft,trimEnd,trimRight

trim 去掉首尾空格
trimstart,trimLeft 去掉首空格
trimEnd,trimRight 去掉尾空格

var str = " hello world   "
var str1=str.trim()

2.3、模糊查询

var arr=["aaa","bbb","asd","swa","sdc"]
var input = prompt("请输入查询的内容")
var  res =arr.filter(function(item){
	return item.indexOf(input)>-1
})
console.log(res)

2.4、JSON格式字符串

JSON格式字符串为了方便前后端交流

var ste = '{"name":"zhangsan","age":100}'
//内部必须是对象结构,不能有空格
var obj=JSON.parse(str)
//双引号不能省，逗号不能少

var obj1={"name":"zhangsan"}
var str =JSON.stringify(obj1)
//转换成JSON字符串

2.5、模板字符串

//在es6中可以通过使用``来使字符串可以换行
var myhtml = `
<li>2</li>
<li>1</li>
`

var name = "zhangsan"
var str = `my name is ${name}`
//通过在${}里面添加变量可以添加字符串，使其连在一起
//${}内部的区域相当于js的区域

var arr=[1,2,3,4]
var arr2=arr.map(function(item){
	return item*item//返回值返回到原数组中
	//此式子为计算原数组平方
})

var arr =["aaa","vvv","ooo","aaas"]
var arr2 =arr.map(function(item){
	return `<li>${item}</li>`
})
documnet.write(arr2.join(""))
//map案例的改编

三、数字

3.1、Number的取整

通过toFixed()的方法

var price =123.456
console.log(price.toFixed(2))
//括号内部表示保留几位小数
//如果数位不够则会自动补零
//返回是字符串类型

3.2、Math对象

3.2.1、随机数编码

random(返回0~1之间的数)

console.log(Math.random())

3.2.2、四舍五入

round()
括号内部是要进行四舍五入的值

console.log(Math.round())

3.2.3、向上向下取整

cell向上，floor向下
括号内部是要进行取整的值

console.log(Math.cell())

3.2.4、取绝对值

abs绝对值
括号内部是要进行取绝对值的值

console.log(Math.abs())

3.2.5、取平方根

sqrt 平方根
括号内部是要进行取平方根的值

console.log(Math.sqrt())

3.2.6、取次幂

pow取次幂
括号内第一个参数是底数，第二个参数是指数

console.log(Math.pow())

3.2.7、取最大值

max取最大值
括号内有很多参数，会取最大值

console.log(Math. max())

3.2.8、取最小值

min取最小值
括号内有很多参数，会取最小值

console.log(Math. min())

3.2.9、Π

PI为Π值

console.log(Math. PI)

3.3、随机整数

0~10范围（不包含10）

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

0~10范围（包含10）

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

10~20范围（不包含20）

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

10~20范围（包含20）

ver res =Math.floor(Math.random()*11)+10

通过函数包装(不包含)

//函数--min-max 不包含
function getRnd(min,max){
	if(min>max){
		console.error("参数有误")
	}
	return Math.floor(Math.random()*(max-min))+min
}

通过函数包装(包含)

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

3.4、时间对象

JS提供的内置构造函数，专门用来获取时间的
new Date（）在不传递参数的情况下是默认返回当前时间

var time = new Date()
console.log(time)//当前时间 Fri Mar 01 2019 13:11:23GMT+0800(中国标准时间)

new Date()在传入参数的时候。可以获取到一个你传递进去的时间

//传递字符串
var time = new Date( " 2019-03-03 13:11:11")
var time = new Date( " 2019/03/03 13:11:11")
console.1og(time)// sun Mar 03 2019 13:11:11 GMT+0800(中国标准时间)

new Date()传递的参数有多种情况

传递两个数字，第一个表示年，第二个表示月份

var time = new Date(2019，00)//月份从О开始计数，О表示 1月，11表示12月
console.log(time)// Tue Jan 01 2019 00:00:00 GMT+0800(中国标准时间)

传递三个数字，前两个不变，第三个表示该月份的第几天，从1到31

var time = new Date(2019，00 ,1)

传递一个数字，为毫秒数

var time = new Date(1000)
//日期默认是从1970年1月1日开始计算

3.5、时间对象常用方法

getFullYear()获取年份

var date = new Date()
console.log(date.getFullYear())

getMonth()获取月份

//从0开始计算
var date = new Date()
console.log(date.getMonth())

getDate()获取日期份

var date = new Date()
console.log(date.getDate())

getDay()获取周几

var date = new Date()
console.log(date.getDay())

getHours()获取时

var date = new Date()
console.log(date.getHours())

getMinutes()获取时

var date = new Date()
console.log(date.getMinutes())

getSeconds()获取秒

var date = new Date()
console.log(date.getSeconds())

getMilliseconds()获取毫秒

var date = new Date()
console.log(date.getMilliseconds())

getTime获取时间戳
- 距离1970.1.1的毫秒数

var date = new Date()
console.log(date.getTime())

设置时间
- setxxx（xxx可以是年月日时分秒等等）

3.6、定时器

在js里面，有两种定时器，倒计时定时器和间隔定时器

3.6.1、倒计时定时器

倒计时多少时间以后执行函数
语法:setTimeout(要执行的函数，多长时间以后执行)
会在你设定的时间以后，执行函数
```
var timerId = setTimeout(function() 
{console.1og('我执行了')
}，1000)
console.log(timerId)//1
```
- 时间是按照毫秒进行计算的，1000毫秒就是1秒钟
- 所以会在页面打开1秒钟以后执行函数
- 只执行一次，就不在执行了
- 返回值是，当前这个定时器是页面中的第几个定时器

3.6.2、间隔定时器

一定的间隔时间后以后执行函数

语法:setInterval(要执行的函数，多长时间间隔以后执行)

		var timerId = setInterval(function() 
		{console.log( new Date())
		},1000)
		console.log(timerId)//1

清除时间计时器

	<buttom id=btn1></buttom>
	var time1 = setInterval(function() 
		{console.1og( new Date())
		}，1000)
		console.log(time1)//1

	btn1.onlick=function(){
	console.log("btn1 click")
	clearInterval(time1)
	}

setTimeout，setInterval回调函数属于异步进行器
先执行同步进行器其次再执行异步进行器

3.7、倒计时案例

<div id="box"></div>
var targetDate= new Date("2022/6/18")

function diffTime(current,targrt){
	var sub = Math.cell((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(fuction(){
	var currentDate = new Date()
	var res =diffTime(currentDate,targetDate)
	document.write(`京东618-${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`
document.write("<br>"))
	box.innerHTML=`京东618-${res.day}天${res.hours}时${res.minutes}分${res.seconds}秒`

},1000)

四、BOM

4.1、BOM概念

BOMCBrowser object Mode1:浏览器对象模型
其实就是操作浏览器的一些能力
我们可以操控那些内容：
- 获取一些浏览器的相关信息(窗口的大小)
- 操作浏览器进行页面跳转
- 获取当前浏览器地址栏的信息
- 操作浏览器的滚动条
- 浏览器的信息（浏览器的版本)
- 让浏览器出现一个弹出框(alert / confirm / prompt )
- …
BOM的核心就是window对象
window是浏览器内置的一个对象，里面包含着操作浏览器的方法

4.2、获取浏览器窗口的尺寸

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

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

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

4.3、浏览器的弹出层

alert 警告框

<buttom id="btn"></buttom>
btn.onclick=function(){
	alert("错误")
	}

confirm 询问框

<buttom id="btn"></buttom>
btn.onclick=function(){
	var res = confirm("你确定要删除吗")
	console.log(res)//点击确定返回true点击取消返回false
	if(res){}//可以通过点击的按钮进行分支
	else{}
	}

prompt 输入框

<buttom id="btn"></buttom>
btn.onclick=function(){
	var res=prompt("请输入你的用户名")
	}

4.4、浏览器里的地址栏

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

location.href

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

console.log(window.location.href)

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

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

reload 重新加载页面

<buttom id btn>刷新</buttom>
	btn.onlick=function(){
	loaction.reload()
}

4.5、浏览器的常见事件

4.5.1、浏览器的onload事件

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

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

4.5.2、html中js写在了head里面

会导致浏览器报错
可以通过使用onload写在js代码前面来改善

4.5.3、窗口事件

resize可以监视窗口大小的改变
以便给用户提示

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

scroll会在窗口滚动时起作用

window.onscroll= function(){
	console.log("scroll")
	//可以判断滚动的距离来使相应的代码发生作用

4.6、浏览器的滚动距离

查看浏览器高度滚动的值

//console.log(document.documnetElement.scrollTop)
//console.log(document.body.scrollTop)某些低版本浏览器不支持上面那个
window.onscroll=function(){
console.log(console.log(document.documnetElement.scrollTop||document.body.scrollTop)
)
}

查看浏览器宽度滚动的值

window.onscroll=function(){
console.log(console.log(document.documnetElement.scrollLeft||document.body.scrollLeft)
}

<buttom id="btn">回到顶部</buttom>
window.onscroll=function(){
	console.log(console.log(document.documentElement.scrollTop||document.body.scrollTop))

if((document.documentElement.scrollTop||document.body.scrollTop)>100){
	console.log("显示回到顶部按钮")
}else{
	console.log("隐藏回到顶部按钮")
	}
}
btn.onclick=function(){
	window.scrollTo(0,0)
	//1.两个数字，前者表示x轴，后者表示y轴
}
btn.onclick=function(){
	window.scrollTo({
		left:0,
		top:0
	})
}

scrollTo跳转到浏览器的位置
两个数字，前者表示x轴，后者表示y轴

4.7、浏览器打开标片页

window.open(“”)
将链接地址写在括号内

<buttom id="btn"> click</buttom>

btn.onclick=function(){
	window.open("链接地址")
}

window.close()
关闭当前页面，就是自身的页面

<buttom id="btn"> click</buttom>

btn.onclick=function(){
	window.close()
}

4.8、浏览器的历史记录

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

history.back

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

window.history.back()

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

history.forword

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

window.history.forward()

前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个
history.go()里面填数字可以使网页回到第N个页面

4.9、浏览器的本地存储

localStorage（永久性的）

//增 只能存字符串，不能存对象
loca1Storage.setItem("name" , "kerwin")
//取
1oca1Storage.getItem("name")
//删
1oca1Storage.removeItem("name")
//清空
1oca1Storage.clear()

sessionStorage（临时性的）

//增
sessionStorage.setItem("name" , "kerwin")
//取
sessionStorage. getItem("name")
//删
sessionStorage. removeItem( "name")
//清空
sessionStorage.clear()

4.10、案例-记住用户名

通过后缀.vable可以使拿到输入框输入的信息

<div>
	用户名：
	<input type ="text" id = "username"
</div>
<div>
	密码：
	<input type = "password" id = "password">
</div>
<div>
	<button id ="login">登录</button>
</div>
<script>
//先获取用户名 密码信息进行存储
var uservable= localStorage.getItem("username")
var passvable= localStorage.getItem("password")

	username.vable = uservable
	passvable.vable =passvable
	
	login.onclick=function(){
		console.log(username.vable)		

localStorage.setItem("username",username.vable)
localStorage.setItem("password",username.vable)		
}

</script>

Smulll_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 学习笔记（第三天）

前提是你要之前有过回退操作，不然的话你现在就是最后一个页面，没有下一个。语法:setInterval(要执行的函数，多长时间间隔以后执行)语法:setTimeout(要执行的函数，多长时间以后执行)history.go()里面填数字可以使网页回到第N个页面。new Date()传递的参数有多种情况。会在你设定的时间以后，执行函数。一定的间隔时间后以后执行函数。倒计时多少时间以后执行函数。此方法与加号拼接没有区别。
复制链接

扫一扫

专栏目录