基础教程 7. Date 类型、定时器、数组去重

和雍
399 阅读4分钟

这是我参与8月更文挑战的第6天，活动详情查看：8月更文挑战

一、Date类型

Date是一个类型，我们通过new操作符获取Date的实例

1. js中获去日期时间

var date = new Date();
console.log(date); // 这个date是标准的时间格式

console.log(typeof date); // date实例是一个对象数据类型的值

2. Date实例方法

2.1 getFullYear() 获取4位年份，返回4位年份

var year = date.getFullYear();
console.log(year);

2.2 getMonth() 获取月份，返回0-11的数字，0代表1月份，11代表12月份

var month = date.getMonth();
console.log(month);

2.3 getDay() 获取星期几，返回0-6的数字 0代表周日，6代表周六

var weekday = date.getDay();
console.log(weekday);

2.4 getDate() 获取今天是几号 今天几号就返回几

var today = date.getDate();
console.log(today);

2.6 getHours() 获取当前几点的小时数，返回0-23的数字，代表0点到23点

var hour = date.getHours();
console.log(hour);

2.7 getMinutes() 获取当前几点的分钟数，现在是几分就返回几

var min = date.getMinutes();
console.log(min);

2.8 getSeconds() 获取当前几点的秒数，是几秒就返回几

var sec = date.getSeconds();
console.log(sec);

2.9 getMilliseconds() 获取当前时间的毫秒数，是几毫秒就返回几

var mills = date.getMilliseconds();
console.log(mills);

2.10 getTime() 获取时间戳，时间戳是当前时刻距离1970年1月1日0时0分0秒的毫秒数

var timeStamp = date.getTime();
console.log(timeStamp);

Date 格式化时间

时间字符串转时间对象：Date的另一个作用是可以把时间格式的字符串转换为时间对象，转换成时间格式对象后就可以调用getFullYear等方法

var str = '2019-10-10 17:34:23';
var date2 = new Date(str);
console.log(date2);
console.log(typeof date2);

二、定时器

js中的定时器分为两种：

  1. window.setTimeout() 设置一个事件间隔，等到了这个时间间隔执行一次
  2. window.setInterval() 每隔时间间隔执行一次

I 设置定时器

1.1 setTimeout(function() {时间到了要执行的代码}, 时间间隔)，返回定时器id

var timer1 = setTimeout(function () {
  console.log('2s到了');
}, 2000);

1.2setInterval(function() {时间到了要执行的代码}, 时间间隔)，返回定时器id


var timer2 = setInterval(function () {
  console.log('一个2s中到了');
}, 2000);

II. 清除定时器：停止定时器就是清除定时器

2.1 clearTimeout(定时器id) 清除setTimeout定时器

clearTimeout(timer1);

2.2 clearInterval(定时器id) 清除setInterval定时器

clearInterval(timer2);

三、倒计时案例

根据所学，完成一个定时器功能。给定一个目标时间，每秒钟减去 1，当到达目标时间后，显示00:00:00;

  • 代码如下：
  • HTML
<!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/3-倒计时.js"></script>
</body>
</html>
  • Javascript

// 1. 获取dom对象
var timeBox = document.getElementById('timeBox');

// 2. 声明一个函数，处理倒计时
function timeCounter() {
  // 2.1 获取当前日期时间信息
  var curDate = new Date();

  // 2.2 获取目标日期时间信息
  var targetDate = new Date('2019-05-11 10:50:55');

  // 2.3 获取目标时间和当前时间的毫秒时间差
  var curStamp = curDate.getTime();
  var targetStamp = targetDate.getTime();
  var stampSpan = targetStamp - curStamp;
  if (stampSpan <= 0) {
    timeBox.innerHTML = `00:00:00`;
    clearInterval(timerId);
    return;
  }

  // 2.4 把这个时间差的毫秒数量换算成剩余多少小时、多少分钟、多少秒
  // 2.4.1 小时
  var hour = Math.floor(stampSpan / (1000 * 60 * 60));

  // 2.4.2 分钟
  var hMs = hour * 1000 * 60 * 60; // 小时数占用的毫秒，需要从stampSpan中减去才是分钟和秒数的
  var mins = Math.floor((stampSpan - hMs) / (1000 * 60));

  // 2.4.3 秒数
  var minsMs = mins * 1000 * 60;
  var secs = Math.floor((stampSpan - hMs - minsMs) / 1000);

  // 因为倒计时的时分秒都是两位数字的，所以当时分秒小于10 的时候就需要补0
  hour = hour < 10 ? `0${hour}` : hour;
  mins = mins < 10 ? `0${mins}` : mins;
  secs = secs < 10 ? `0${secs}` : secs;
  timeBox.innerHTML = `${hour}:${mins}:${secs}`
}
// timeCounter

// 3. 用倒计时每秒执行一次就算倒计时的方法，就可以实现页面中每秒减去一秒
var timerId = setInterval(timeCounter, 1000);

四、数组排序算法

4.1 冒泡排序

冒泡排序原理：数组相邻两项直接互相比较，如果前一项比后一项大，就交换两项的位置，否则什么也不做；这样比较一轮过后，可以得出本轮的最大值。

示例：

var ary = [8, 94, 15, 6, 3, 2];
//轮数 i                  每一轮比较次数 j
// 0 [8, 15, 6, 3, 2, 94]  5
// 1 [8, 6, 3, 2, 15, 94]  4
// 2 [6, 3, 2, 8, 15, 94]  3
// 3 [3, 2, 6, 8, 15, 94]  2
// 4 [2, 3, 6, 8, 15, 94]  1

// ?比较轮数: ary.length - 1 轮
// ? 每一轮两两比较的次数 ary.length - 1 - i
for (var i = 0; i < ary.length - 1; i++) {

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

console.log(ary);

4.2 快速排序

快速排序的原理：声明两个新数组，分别叫做left(左)和right(右)，获取当前数组的中间相，比中间项小的放在left中，比中间项大的放在right。然后对left和right进行同样的操作，直到当前数组只有一项或者为空时，终止这个过程，然后把所有的left和right以及中间相拼接起来。

  • 示例：
var ary = [12,8,88,97,67,56,78,86,85];
// left [12, 8, 56] |67| right [88, 97, 78, 86, 85]
// left [] |8| right [12, 56] |67| left [] |78| right [88, 97, 86, 85]
// left [] |8| left [] |12| right [56] |67|78| left [] |left [85] |86| right [88, 97]
// left [] |8| left [] |12| right [56] |67|78| left [] |left [85] |86| left [] |88| right [97]
// 拼接 [8, 12, 56, 67, 78, 85, 86, 88, 97]


function quickSort(ary) {

  // !!!! 使用递归要注意递归终止的条件：当前数组ary只要一项或者为空
  if (ary.length <= 1) {
    return ary;
  }

  // 1. 计算中间相索引
  var middleIndex = Math.floor(ary.length / 2);
  // 2. 获取中间项
  var middleVal = ary.splice(middleIndex, 1)[0];
  // 3. 声明left和right
  var left = [];
  var right = [];

  // 4. 循环比较数组项和中间项的大小
  for (var i = 0; i < ary.length; i++) {
    var cur = ary[i];

    // 用当前项和中间项比较，如果大就push到right，left
    if (cur > middleVal) {
      right.push(cur);
    } else {
      left.push(cur);
    }
  }

  return quickSort(left).concat(middleVal, quickSort(right));
}

var sortedAry = quickSort(ary);
console.log(sortedAry);

4.3 插入排序

插入排序原理：

  1. 假定第一项是最小值；
  2. 从第二项开始，从该项开始和前面的项进行比较
  3. 如果前面一项比后一项大，则交换位置
var ary = [5, 4, 3, 2, 1];

function insertSort(ary) {
  for (var i = 1; i < ary.length; i++) {
    for (var j = i; j > 0; j--) {
      if ( ary[j - 1] > ary[j]) {
        var temp = ary[j];
        ary[j] = ary[j - 1];
        ary[j - 1] = temp;
      }
    }
  }
  return ary;
}
console.log(insertSort(ary));
avatar
文章
阅读
粉丝