一、数组

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 = 0for(var m=0;m<arr.length;m++){var min=mfor (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()传递的参数有多种情况

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

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

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

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

  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)//1btn1.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点击取消返回falseif(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 = uservablepassvable.vable =passvablelogin.onclick=function(){console.log(username.vable)       localStorage.setItem("username",username.vable)
localStorage.setItem("password",username.vable)
}</script>

JavaScript 学习笔记（第三天）相关推荐

1. JavaScript学习笔记（三）——从简单模仿到创作

   JavaScript学习笔记(三)--从简单模仿到创作 目前我先列好提纲,利用每晚和周末的闲暇时间,将逐步写完 ^_^ 转载于:https://www.cnblogs.com/mixer/archiv ...

2. JavaScript学习笔记（三）---事件、正则表达式、ES6、运动

   JavaScript学习笔记(三)---事件.正则表达式.ES6.运动 27.insertbefore 28.滚动条及事件 29.事件及事件对象 30.鼠标事件对象的属性 31.案例:图片随鼠标移动 ...

3. JavaScript学习笔记（三）--操作运算符

   JavaScript中的运算符有很多,主要分为算术运算符,比较运算符,逻辑运算符,三目运算符.一元运算符.位运算符等.这些运算符都有一些属于自己的运算规则,下面就为大家介绍一下JavaScript中的 ...

4. JavaScript学习笔记（三）——数组

   在学习廖雪峰前辈的JavaScript教程中,遇到了一些需要注意的点,因此作为学习笔记列出来,提醒自己注意! 如果大家有需要,欢迎访问前辈的博客https://www.liaoxuefeng.com/ ...

5. Javascript学习笔记（三）--变量、作用域和内存问题

   一.变量 1.基本类型和引用类型的值 变量包含两种不同类型的值:基本类型值和引用类型值. 基本类型值包括:Undefined.Null.Boolean.Number和String(String在js属 ...

6. node JS獲取GPS_node学习笔记（三十八）

   一.什么是NodeJS? 1.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境. 2.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效 ...

7. JavaScript:学习笔记(7)——VAR、LET、CONST三种变量声明的区别

   JavaScript:学习笔记(7)--VAR.LET.CONST三种变量声明的区别 ES2015(ES6)带来了许多闪亮的新功能,自2017年以来,许多JavaScript开发人员已经熟悉并开始使用 ...

8. JavaScript学习笔记之数组（二）

   JavaScript学习笔记之数组(二) 1.['1','2','3'].map(parseInt) 输出什么,为什么? ['1','2','3'].map(parseInt)//[1,NaN,NaN ...

9. JavaScript学习笔记（十五）

   JavaScript学习笔记(十五) 事件 事件是DOM(文档对象模型)的一部分.事件流就是事件发生顺序,这是IE和其他浏览器在事件支持上的主要差别. 一.事件流 1.冒泡型事件 IE上的解决方案就是 ...

最新文章

1. MapReduce基础开发之一词汇统计和排序（wordcount）
2. Qt修炼手册8_常用的容器类QVector和QList
3. python upper_Python 3中的模块级string.upper函数在哪里？
4. JAVA WEB篇4——Filter、Listener
5. Oracle数据库在.net连接问题总结
6. 一条命令关掉centos所有不必要的服务和端口号
7. hive不在同一台机 hue_【Impala篇】---Hue从初始到安装应用
8. maxdea如何计算指数_maxdea 5.0中文简体使用手册.pdf
9. iredmail mysql 密码_CloudCare-iRedMail 运行环境镜像使用指南
10. 微信公众号第三方平台授权流程
11. PyBullet快速上手教程
12. 小程序获取用户头像大图 小程序获取用户头像模糊的问题 小程序自定义转发头像模糊 小程序自定义转发分享大图...
13. 计算机应用基础项目化教程答案熊云,计算机应用基础习题与上机实验指导
14. rtthread工业使用_RT Thread SPI设备 使用
15. SpringCloud RestTemplate | java.net.UnknownHostException: xxx
16. 仿ofo单车做一个轮播效果
17. JavaCV 实现照片打马赛克功能
18. LIO-SAM论文与代码阅读笔记（一）论文阅读
19. 中国城市基础设施建设大会开幕 聚焦智慧城市发展
20. ❤️女朋友桌面文件杂乱无章？气得我用Python给她做了一个文件整理工具❤️

热门文章

1. Ubuntu顶栏显示网速和硬件信息
2. ios应用跳转小程序Universal Links链接验证不通过
3. ca盘显示无证书_CA根证书无法识别
4. LT8711UXE1,Type-C/DP1.2 转 HDMI2.0，内置HDCP,支持4k 60Hz向下兼容
5. ansible问题记录--Timeout (12s) waiting for privilege escalation prompt
6. 哼唱识别（query by humming）
7. Thinkpad T480 新机分区
8. textarea标签 禁止拉伸
9. 基于卷积神经网络的手势识别研究论文
10. PicPick截图神器使用体验