window定时器方法
有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为“计划调用（scheduling a call）”。
目前有两种方式可以实现：
- setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
- setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
并且通常情况下有提供对应的取消方法：
- clearTimeout：取消 setTimeout 的定时器；
- clearInterval：取消 setInterval 的定时器；
大多数运行环境都有内置的调度程序，并且提供了这些方法：
- 目前来讲，所有浏览器以及 Node.js 都支持这两个方法；
setTimeout的使用
setTimeout 的语法如下：
- func|code ：想要执行的函数或代码字符串。
- 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
- delay ：执行前的延时，以毫秒为单位 (1000 毫秒 = 1 秒），默认值是 0
- arg1 arg2…：要传入被执行函数（或代码字符串）的参数列表
clearTimeout 方法：
- setTimeout 在调用时会返回一个 “定时器标识符 (timer identifier)”，我们可以使用它来取消执行。
setInterval 的使用
setInterval 方法和 setTimeout 的语法相同：
- 所有参数的意义也是相同的；
- 不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行；
clearInterval方法：
- setInterval也会返回一个“定时器标识符（timer identifier）”，我们可以通过clearInterval来取消这个定时器。
<button class="out">取消setTimeout定时器</button>
<button class="itv">取消setInterval定时器</button>
<script>
// 1.setTimeout
/* function foo() {
console.log('foo被调用--------')
}
var timeoutID = setTimeout(foo, 3000)
var timeoutBtn = document.querySelector('.out') timeoutBtn.onclick = function(event) { // 取消调度
clearTimeout(timeoutID) } */
// 2.setInterval
var itvBtn = document.querySelector('.itv')
function bar(name, age, height) {
console.log('bar被调用---------', name, age, height)
}
var itvBtnID = setInterval(bar, 3000, 'why', 19, 1.88)
itvBtn.onclick = function() {
clearInterval(itvBtnID)
}
</script>
案例实战一 – 轮播消息提示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tip-bar {
display: inline-flex;
align-items: center;
height: 30px;
background-color: rgba(0, 0, 0, .4);
border-radius: 16px;
}
img {
width: 30px;
height: 30px;
border-radius: 50%;
margin-right: 5px;
}
span {
font-size: 13px;
color: white;
margin-right: 8px;
} </style>
</head>
<body>
<div class="tip-bar">
<img src="https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png" alt="">
<span>183*****624对这件商品感兴趣</span>
</div>
<script>
// 1,从服务器拿到数据 ajax/fetch 请求
let tipList = [
{ icon: 'https://bfs.biyao.com/group1/M01/A6/97/rBACYWBCHqyAFH5tAAANZXX5Eww646.png',
title: 'rinsan对这件商品感兴趣'
},
{ icon: 'https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png',
title: '123***814对这件商品感兴趣'
},
{ icon: 'https://bfs.biyao.com/group1/M00/7F/4E/rBACYV16HseAP-PnAAAW9bbVoKE463.png',
title: '刘军对这件商品感兴趣'
}
]
// 2.动态切换数据
// 2.1获取到元素
var tipBar = document.querySelector('.tip-bar')
var imgEl = tipBar.querySelector('img')
var spanEl = tipBar.querySelector('span')
// 2.2 3切换一次数据
var currentIndex = 0 // 记录当前展示到的索引位置
setInterval(function() {
// 1> 根据索引获取 item var tipItem = tipList[currentIndex]
// 2> 给 dom 设置内容
imgEl.src = tipItem.icon
spanEl.textContent = tipItem.title
// 3> 重新计算索引
currentIndex++
if (currentIndex === tipList.length) {
currentIndex = 0
}
}, 3000)
// 随机
// console.log(Math.floor(Math.random() * tipList.length))
</script>
</body>
</html>
案例实战二-关闭信息弹窗
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.top-bar {
display: flex;
flex-direction: row;
align-items: center;
height: 45px;
width: 375px;
background-color: black;
/* 关键 */ overflow: hidden;
transition: all .5s ease-out;
}
.delete {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
height: 100%;
width: 30px;
cursor: pointer;
}
.delete img {
height: 10px;
width: 10px;
}
.logo {
height: 30px;
width: 30px;
margin-left: 3px;
margin-right: 30px;
cursor: pointer;
}
span {
color: white;
font-size: 14px;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.btn {
width: 94px;
height: 100%;
line-height: 45px;
text-align: center;
font-size: 14px;
color: #fff;
background-color: #F63515;
} </style>
</head>
<body>
<div class="top-bar">
<div class="delete">
<img src="./img/delete.png" alt="">
</div>
<img class="logo" src="./img/logo.png" alt="">
<span>打开京东App,购物更轻松</span>
<div class="btn">立即打开</div>
</div>
<script>
// 2.获取元素
var topBar = document.querySelector('.top-bar')
var deleteEl = topBar.querySelector('.delete')
// 2.监听delete点击
deleteEl.onclick = function() {
// topBar.remove()
topBar.style.height = 0
/* setTimeout(function(){
topBar.remove() },300) */}
topBar.ontransitionend = function() {
topBar.remove()
}
</script>
</body>
</html>
案例实战三-侧边栏展示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.tool-bar {
position: fixed;
top: 30%;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
width: 35px;
}
.item {
position: relative;
width: 35px;
height: 35px;
margin-bottom: 1px;
background-color: #7a6e6e;
border-radius: 3px 0 0 3px;
}
.icon {
display: inline-block;
width: 100%;
height: 100%;
cursor: pointer;
background-image: url(./img/toolbars.png);
}
/* .icon01 {
background-position: -48px 0; } .icon02 { background-position: -48px -50px; } .icon03 { background-position: -48px -100px; } .icon04 { background-position: -48px -150px; } */
.name {
position: absolute;
z-index: -1;
right: 35px;
/*left: -62px;*/
top: 0;
width: 0;
height: 35px;
line-height: 35px;
color: #fff;
text-align: center;
font-size: 12px;
background-color: #7a6e6e;
cursor: pointer;
border-radius: 3px 0 0 3px;
transition: width .2s ease;
}
.item:hover,
.item:hover .name {
background-color: #cd1926;
} </style>
</head>
<body>
<div class="tool-bar">
<div class="item">
<i class="icon icon01"></i>
<div class="name">购物车</div>
</div>
<div class="item">
<i class="icon icon02"></i>
<div class="name">收藏</div>
</div>
<div class="item">
<i class="icon icon03"></i>
<div class="name">限时活动</div>
</div>
<div class="item">
<i class="icon icon04"></i>
<div class="name">大礼包</div>
</div>
</div>
<script>
// 1.动态给icon设置backgroundPosition
var iconEls = document.querySelectorAll('.icon')
for (var i = 0; i < iconEls.length; i++) {
var iconEl = iconEls[i]
iconEl.style.backgroundPosition = `-48px -${50 * i}px`
}
// 2.实现鼠标进入动画
// 方案一: mouseenter(不能使用事件委托)
/* var itemEls = document.querySelectorAll('.item')
for (var itemEl of itemEls) { itemEl.onmouseenter = function(event) { var nameEl = this.children[1] nameEl.style.width = '62px' } itemEl.onmouseleave = function() { var nameEl = this.children[1] nameEl.style.width = '0' } } */// 方案二: 事件委托
var toolbarEl = document.querySelector('.tool-bar')
function handleMouseEvent(event, width) {
if (event.target !== toolbarEl) {
// 1.获取唯一的item
var itemEl = event.target.classList.contains('item') ? event.target : event.target.parentElement
// 2.根据item获取nameElement
var nameEl = itemEl.children[1]
// 3.设置宽度
nameEl.style.width = `${width}px`
}
}
toolbarEl.onmouseover = function(event) {
handleMouseEvent(event, 62)
}
toolbarEl.onmouseout = function(event) {
handleMouseEvent(event, 0)
}
</script>
</body>
</html>
购物车-数据展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
thead {
background-color: #f5f5f5;
}
th,
td {
border: 1px solid #aaa;
padding: 8px 12px;
text-align: center;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th>
<th>书籍名称</th>
<th>出版日期</th>
<th>价格</th>
<th>购买数量</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<h2 class="price">总价格: ¥<span class="price-count">0</span></h2>
<script>
// 1.从服务器获取数据 ajax/fetch
var books = [
{
id: 1,
name: "《算法导论》",
date: "2006-09",
price: 85.0,
count: 3,
},
{
id: 2,
name: "《UNIX编程艺术》",
date: "2006-02",
price: 59.0,
count: 2,
},
{
id: 3,
name: "《编程珠玑》",
date: "2008-10",
price: 39.0,
count: 5,
},
{
id: 4,
name: "《代码大全》",
date: "2006-03",
price: 128.0,
count: 8,
},
];
// 2.对数据展示
/*
到底通过html直接编写,还是通过JavaScript动态生成
1.对于固定的,直接通过html编写(能通过html编写,尽量通过html直接编写)
2.对于哪些大量的数据,有规律的数据,可以通过javascript 编写
*/
var tbodyEl = document.querySelector("tbody");
// 2.2动态添加tr以及内部数据
for (var i = 0; i < books.length; i++) {
var trowEl = document.createElement("tr");
// 2.3 放具体的数据
var book = books[i];
var bookKeys = Object.keys(book);
for (var m = 0; m < bookKeys.length; m++) {
var key = bookKeys[m];
var value = book[key];
var tdEl = document.createElement("td");
if (key === "price") {
value = "¥" + value;
}
tdEl.textContent = value;
trowEl.append(tdEl);
}
// 2.4 添加删除按钮
var deleteTdEl = document.createElement("td");
var deleteBtnEl = document.createElement("button");
deleteBtnEl.textContent = "删除";
deleteTdEl.append(deleteBtnEl);
trowEl.append(deleteTdEl);
// 2.5 监听删除按钮的点击
deleteBtnEl.onclick = function (event) {
// 1.删除对应的trow
var deleteTRowEl = this.parentElement.parentElement;
var deleteTrIndex = deleteTRowEl.sectionRowIndex;
deleteTRowEl.remove();
// 2.删除对应books中的数据
books.splice(deleteTrIndex, 1);
// 3.重新计算一次价格
calcTotalPrice()
};
tbodyEl.append(trowEl);
}
// 3.计算总价格
var priceCountEl = document.querySelector(".price-count");
totalPrice = 0;
/*
for (var i = 0; i < books.length; i++) {
totalPrice += books[i].count * books[i].price;
}
*/
calcTotalPrice();
// 封装计算价格的函数
function calcTotalPrice() {
var totalPrice = books.reduce(function (preValue, item) {
return preValue + item.count * item.price;
}, 0);
priceCountEl.textContent = totalPrice;
}
</script>
</body>
</html>
Q.E.D.