一、Date 类型

1. js 中获取日期时间

  1. var date = new Date(); // Date 是一个类型，我们通过 new 操作符获取 Date 的实例
  2. console.log(date); // 这个 date 是标准的时间格式
  4. console.log(typeof date); // date 实例是一个对象数据类型的值

2. Date实例方法

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Date 格式化时间

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

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

二、定时器

js中的定时器分为两种：

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

I 设置定时器

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

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

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

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

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

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

  1. clearTimeout(timer1);

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

  1. clearInterval(timer2);

三、倒计时案例

  • 根据所学，完成一个定时器功能。当到达目标时间后，显示00:00:00;

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     #timeBox {
  8.       margin: 20px auto;
  9.       height: 100px;
  10.       width: 300px;
  11.       line-height: 100px;
  12.       font-size: 25px;
  13.       text-align: center;
  14.     }
  15.   </style>
  16. </head>
  17. <body>
  18. <div id="timeBox"></div>
  20. <script src="js/3-倒计时.js"></script>
  21. </body>
  22. </html>
  1. // 1. 获取dom对象
  2. var timeBox = document.getElementById('timeBox');
  4. // 2. 声明一个函数，处理倒计时
  5. function timeCounter() {
  6.   // 2.1 获取当前日期时间信息
  7.   var curDate = new Date();
  9.   // 2.2 获取目标日期时间信息
  10.   var targetDate = new Date('2019-05-11 10:50:55');
  12.   // 2.3 获取目标时间和当前时间的毫秒时间差
  13.   var curStamp = curDate.getTime();
  14.   var targetStamp = targetDate.getTime();
  15.   var stampSpan = targetStamp - curStamp;
  16.   if (stampSpan <= 0) {
  17.     timeBox.innerHTML = `00:00:00`;
  18.     clearInterval(timerId);
  19.     return;
  20.   }
  22.   // 2.4 把这个时间差的毫秒数量换算成剩余多少小时、多少分钟、多少秒
  23.   // 2.4.1 小时
  24.   var hour = Math.floor(stampSpan / (1000 * 60 * 60));
  26.   // 2.4.2 分钟
  27.   var hMs = hour * 1000 * 60 * 60; // 小时数占用的毫秒，需要从stampSpan中减去才是分钟和秒数的
  28.   var mins = Math.floor((stampSpan - hMs) / (1000 * 60));
  30.   // 2.4.3 秒数
  31.   var minsMs = mins * 1000 * 60;
  32.   var secs = Math.floor((stampSpan - hMs - minsMs) / 1000);
  34.   // 因为倒计时的时分秒都是两位数字的，所以当时分秒小于10 的时候就需要补0
  35.   hour = hour < 10 ? `0${hour}` : hour;
  36.   mins = mins < 10 ? `0${mins}` : mins;
  37.   secs = secs < 10 ? `0${secs}` : secs;
  38.   timeBox.innerHTML = `${hour}:${mins}:${secs}`
  39. }
  40. // timeCounter
  41. timeCounter(); // 保证页面打开时就有时间
  42. // 3. 用倒计时每秒执行一次就算倒计时的方法，就可以实现页面中每秒减去一秒
  43. var timerId = setInterval(timeCounter, 1000);

四、数组排序算法

4.1 冒泡排序

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

示例：

  1. var ary = [8, 94, 15, 6, 3, 2];
  2. //轮数 i                  每一轮比较次数 j
  3. // 0 [8, 15, 6, 3, 2, 94]  5
  4. // 1 [8, 6, 3, 2, 15, 94]  4
  5. // 2 [6, 3, 2, 8, 15, 94]  3
  6. // 3 [3, 2, 6, 8, 15, 94]  2
  7. // 4 [2, 3, 6, 8, 15, 94]  1
  9. // ?比较轮数: ary.length - 1 轮
  10. // ? 每一轮两两比较的次数 ary.length - 1 - i
  11. for (var i = 0; i < ary.length - 1; i++) {
  13.   for (var j = 0; j < ary.length - 1 - i; j++) {
  14.     if (ary[j] > ary[j + 1]) {
  15.       var temp = ary[j];
  16.       ary[j] = ary[j + 1];
  17.       ary[j + 1] = temp;
  18.     }
  19.   }
  20. }
  22. console.log(ary);

4.2 快速排序

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

  • 示例：
  1. var ary = [12,8,88,97,67,56,78,86,85];
  2. // left [12, 8, 56] |67| right [88, 97, 78, 86, 85]
  3. // left [] |8| right [12, 56] |67| left [] |78| right [88, 97, 86, 85]
  4. // left [] |8| left [] |12| right [56] |67|78| left [] |left [85] |86| right [88, 97]
  5. // left [] |8| left [] |12| right [56] |67|78| left [] |left [85] |86| left [] |88| right [97]
  6. // 拼接 [8, 12, 56, 67, 78, 85, 86, 88, 97]
  9. function quickSort(ary) {
  11.   // !!!! 使用递归要注意递归终止的条件：当前数组ary只要一项或者为空
  12.   if (ary.length <= 1) {
  13.     return ary;
  14.   }
  16.   // 1. 计算中间相索引
  17.   var middleIndex = Math.floor(ary.length / 2);
  18.   // 2. 获取中间项
  19.   var middleVal = ary.splice(middleIndex, 1)[0];
  20.   // 3. 声明left和right
  21.   var left = [];
  22.   var right = [];
  24.   // 4. 循环比较数组项和中间项的大小
  25.   for (var i = 0; i < ary.length; i++) {
  26.     var cur = ary[i];
  28.     // 用当前项和中间项比较，如果大就push到right，left
  29.     if (cur > middleVal) {
  30.       right.push(cur);
  31.     } else {
  32.       left.push(cur);
  33.     }
  34.   }
  36.   return quickSort(left).concat(middleVal, quickSort(right));
  37. }
  39. var sortedAry = quickSort(ary);
  40. console.log(sortedAry);

4.3 插入排序

插入排序原理：

  1. 假定第一项是最小值；
  2. 从第二项开始，从该项开始和前面的项进行比较
  3. 如果前面一项比后一项大，则交换位置
  1. var ary = [5, 4, 3, 2, 1];
  3. function insertSort(ary) {
  4.   for (var i = 1; i < ary.length; i++) {
  5.     for (var j = i; j > 0; j--) {
  6.       if ( ary[j - 1] > ary[j]) {
  7.         var temp = ary[j];
  8.         ary[j] = ary[j - 1];
  9.         ary[j - 1] = temp;
  10.       }
  11.     }
  12.   }
  13.   return ary;
  14. }
  15. console.log(insertSort(ary));

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行