一、定时器:
setTimeout
// 1. setTimeout(function () {}, 时间毫秒数) 等时间到了,执行一次回调函数。返回定时器 ID;
var timerId = setTimeout(function () {
// 这个回调函数中写你想时间到了做的事情
console.log('没时间了');
}, 3000);
var timerId2 = setTimeout(function () {
console.log('timer 2');
}, 4000);
console.log(timerId);
console.log(timerId2);
setInterval
// 2. setInterval(function () {}, 时间间隔毫秒数); 每隔时间间隔都执行一次回调函数;返回值也是定时 器 id;
var timerId3 = setInterval(function () {
console.log('inteval的时间到了');
}, 1000);
console.log(timerId3);
// 定时器清除:想让定时器停止,就是清除定时器。清除定时器也有两种办法:
// 1. clearTimeout(定时器 ID) 清除 setTimeout() 设置的定时器
clearTimeout(timerId);
// 2. clearInterval(定时器 id);清除 setInterval() 设置的定时器
clearInterval(timerId3);
定时器是异步编程的
案例:倒计时
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#timeBox {
margin: 20px auto;
height: 100px;
width: 300px;
line-height: 100px;
font-size: 25px;
text-align: center;
}
</style>
</head>
<body>
<div id="timeBox">--:--:--</div>
<script src="倒计时.js"></script>
</body>
</html>
/*
* 目标:
* 1. 理解倒计时原理
* 2. 练习 Date 实例对象的方法
* 3. 掌握剩余时分秒的计算
* */
// 需求:实现一个距离目标时间的倒计时,每隔一秒钟更新一次。倒计时到0时停止倒计时。把倒计时效果插入到页面中。
// 目标时间:2019-05-23 13:00:00
// 原理:计算从当前时间到目标时间的时间差,然后把这个时间差换算成多少小时,多少分钟,多少秒;
var timeBox = document.getElementById('timeBox');
function countDown() {
// 1. 计算当前时间距离目标时间的毫秒时间差
var curDate = new Date(); // 获取当前时间
var curStamp = curDate.getTime(); // 获取当前时间的时间戳
var targetDate = new Date('2019-05-23 14:00:00'); // new Date() 可以把时间格式的字符串转换成标准时间格式对象。因为只有标准时间格式的对象才能调用 getTime()
var targetStamp = targetDate.getTime(); // 获取目标时间的时间戳
var spanStamp = targetStamp - curStamp; // 目标时间减去当前时间的毫秒差
// spanStamp 小于等于0,表示已经到达或者超过目标时间了,此时应该停止倒计时。
if (spanStamp <= 0) {
// 停止倒计时,并且页面中的倒计时更新成 '00:00:00',终止后面的代码执行
clearInterval(timerId);
timeBox.innerHTML = '00:00:00';
return;
}
// 2. 把毫秒差换算成小时、分钟、秒
// 2.1 小时
var hours = Math.floor(spanStamp / (60 * 60 * 1000)); // 用毫秒时间差 除以 一个小时的毫秒数
// 2.2 分钟
var hMs = hours * 60 * 60 * 1000; // 小时占用的毫秒数
var mins = Math.floor((spanStamp - hMs) / (1000 * 60)); // 用总毫秒时间差 - 小时占用的毫秒数再除以 一分钟的毫秒数
// 2.3 秒数
var minsMs = mins * 1000 * 60; // 计算分钟数占用的毫秒数
var secs = Math.floor((spanStamp - hMs - minsMs) / 1000);
// 3 判断时分秒是否是各位数字,如果是个位数就需要补零;
// hours = hours < 10 ? '0' + hours : hours;
// mins = mins < 10 ? '0' + mins : mins;
// secs = secs < 10 ? '0' + secs : secs; 当重复代码过多时,就需要封装成一个函数
hours = addZero(hours);
mins = addZero(mins);
secs = addZero(secs);
timeBox.innerHTML = `${hours}:${mins}:${secs}`;
// timeBox.innerHTML = hours + ':' + mins + ':' + secs;
}
function addZero(num) {
return num < 10 ? '0' + num : num;
}
countDown();
var timerId = setInterval(countDown, 1000);
二、方法:数组去重
方案一
/*
* 方案一
* 循环原有数组中的每一项,每拿到一项都往新数组中添加
* 添加之前验证新数组中是否存在这一项,不存在再增加
*/
let newAry = [];
for (let i = 0; i < ary.length; i++) {
// 循环获取原有数组中的每一项
let item = ary[i];
// 验证新数组中是否存在这一项
if (newAry.includes(item)) {
// 存在这一项,不在增加到新数组中,继续下一轮循环即可
continue;
}
// 新数组中不存在这一项,我们加入到新数组中即可
newAry.push(item);
}
console.log(newAry);
/* 1. 基于 es6 的 Set (对应的是 Map)
* 因为 new Set 自带去重效果,但去重后是个对象
* 所以把每一项用展开运算符(...)写到数组里
*/
let ary1 = [1, 3, 4, 5, 1, 5, 8, 7, 9, 8, 5, 35];
console.log("Set 类去重:");
ary1 = [...new Set(ary1)];
console.log(ary1);
// Set 也可以用来字符串去重
console.log('去重字符串');
console.log([...new Set('ababbc')].join(''));
// 简化代码
let newAry = [];
ary.forEach(item => {
if (newAry.includes(item)) return;
newAry.push(item);
});
console.log(newAry);
方案二
/*
* 方案二:双 for 去重
* 先分别拿出数组中的每一项 A
* 用这一项 A 和 “它后面的每项” 依次进行比较,如果遇到和当前项 A 相同的,则在原来数组中把这一项移除
掉
*
* 不用 includes / indexOf(这样保证兼容性)
*/
var ary = [1, 2, 3, 1, 2, 1, 2, 3, 2, 1, 2, 3];
for (var i = 0; i < ary.length; i++) {
// item:每一次循环拿出来的当前项
// i:当前项的索引 i+1:代表后一项
var item = ary[i];
// 让当前项和后面的每一项进行比较(循环)
for (var j = i + 1; j < ary.length; j++) {
// compare:后面拿出来要比较的每一项
var compare = ary[j];
// 如果 compare 和 item 相等,说明这一项是重复的,我们把它删掉
if (compare === item) {
// j 索引这一项要从数组中移除
ary.splice(j, 1);
// 数组塌陷了:j后面的每一项索引都提前了一位,下一次要比较的应该还是j这个索引的内容
j--;
}
}
}
console.log(ary);
// 封装一个方法
function unique(ary) {
let obj = {};
for (let i = 0; i < ary.length; i++) {
let item = ary[i];
if (obj[item] !== undefined) {
ary[i] = ary[ary.length - 1];
ary.length--;
i--;
continue;
}
obj[item] = item;
}
return ary;
}