一、知识点
1.延时函数 setTimeout()
//延时函数,只出现一次
let timer = setTimeout(function(){
console.log('时间到了');
},2000)
//清除
clearTimeout(timer)
2.JS执行机制
同步任务与异步任务
事件循环
- 先执行执行栈中的同步任务;
- 异步任务放入任务队列中;
- 当执行栈中的所有同步任务执行完毕,系统会依次读取任务队列中的异步任务;
- 被读取的异步任务结束等待状态,进入执行栈,开始执行。
3.location对象
//location对象
//利用js的方式跳转页面
location.href='http://www.baidu.com'
4.navigator对象
5.history对象:前进、后退按钮
5.本地存储:只能存储字符串数字类型
// localStorage,将数据永久存储在本地,除非手动删除
// 存储数据,键值对
localStorage.setItem('uname','pink')
// 获取数据,键
localStorage.getItem('uname')
// 删除元素,键
localStorage.removeItem('uname')
// 修改元素,键值对
localStorage.setItem('uname','red')
// sessionStorage,生命周期为关闭浏览器
6.存储复杂数据类型
// 由于本地存储只能存储字符串数字类型
// 存:需要将复杂数据类型转换成JSON字符串
const obj = {
uname:'pink',
age:18,
gender:'女'
}
localStorage.setItem('obj',JSON.stringify(obj))
//JSON对象 {"uname":"pink","age":18,"gender":"女"}
// 取:把JSON字符串转换为对象
console.log(JSON.parse(localStorage.getItem('obj')));
7.数组中的map和join方法
// 数组中的map方法:处理数据,并返回一个数组
arr.map(function(ele,index){
return ele+'颜色'
})//(元素,索引号)
// 数组中的join方法:把数组中所有元素拼接为一个字符串
arr.join()//默认逗号分隔
arr.join('')//没有分隔符
二、综合案例
1. 5s跳转链接
<body>
<a href="http://www.itcast.cn">支付成功<span>5</span>秒钟之后跳转到首页</a>
<script>
const a = document.querySelector('a')
let num = 5
let timeId = setInterval(function() {
num--
if (num === 0){
clearInterval(timeId)
//跳转链接
location.href = 'http://www.itcast.cn'
}
a.innerHTML=`支付成功<span>${num}</span>秒钟之后跳转到首页`
}, 1000);
</script>
</body>
2.学生信息表案例
<script>
//参考数据
const initData = [
{
stuId: 1,
uname: '欧阳霸天',
age: 19,
gender: '男',
salary: '20000',
city: '上海',
}
]
//获取元素
const tbody = document.querySelector('tbody')
const info = document.querySelector('.info')
const uname = document.querySelector('.uname')
const age = document.querySelector('.age')
const salary = document.querySelector('.salary')
const gender = document.querySelector('.gender')
const city = document.querySelector('.city')
//读取本地存储的数据,如果没有数据则为空数组
const arr = JSON.parse(localStorage.getItem('data')) || []
//渲染页面模块:利用map和join
function render(){
//map遍历数组,返回对应的tr数组
const trArr = arr.map(function(ele,index){
return `
<tr>
<td>${ele.stuId}</td>
<td>${ele.uname}</td>
<td>${ele.age}</td>
<td>${ele.gender}</td>
<td>${ele.salary}</td>
<td>${ele.city}</td>
<td>
<a href="javascript:" data-id=${index}>删除</a>
</td>
</tr>
`
})
// 把数组转换为字符串join
// 把生成的字符串追加给tbody
tbody.innerHTML=trArr.join('')
}
render()
//新增业务模块
info.addEventListener('submit',function(e){
//阻止默认事件
e.preventDefault()
//非空判断
if (!uname.value || !age.value || !salary.value){
return alert('输入内容不能为空!')
}
//追加数组对象
arr.push({
//新增加的stuId应该是数组中最后一条数据的stuId+1
//一开始数组没有数据,则直接返回stuId为1
stuId: arr.length ? arr[arr.length - 1].stuId + 1 : 1,
uname: uname.value,
age: age.value,
gender: gender.value,
salary: salary.value,
city: city.value,
})
//渲染
render()
//清空表单
this.reset()
//把数组重新存入本地存储,防止刷新后数据丢失
//刷新后:代码从上往下执行,本地存储后,回到开头读取本地数据代码处
localStorage.setItem('data',JSON.stringify(arr))
})
//删除业务模块
//采用事件委托,给tbody添加点击事件
tbody.addEventListener('click',function(e){
//判断是否点击的事删除按钮
if (e.target.tagName === 'A'){
//弹出确认框confirm
if (confirm('确定要删除这条数据吗?')){
//得到当前对象在数组中的索引号,并删除此对象
arr.splice(e.target.dataset.id,1)
//重新渲染
render()
//重新本地存储
localStorage.setItem('data',JSON.stringify(arr))
}
}
})
</script>