基礎教程 7. Date 類型、定時器、數組去重

時間  2021-08-12
標籤 javascript css html java 算法 數組 markdown dom 函數 post 欄目 JavaScript 简体版
原文   原文鏈接

這是我參與8月更文挑戰的第6天，活動詳情查看：8月更文挑戰javascript

1、Date類型

Date是一個類型，咱們經過new操做符獲取Date的實例css

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等方法html

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

2、定時器

js中的定時器分爲兩種：java

  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);
複製代碼

3、倒計時案例

根據所學，完成一個定時器功能。給定一個目標時間，每秒鐘減去 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、數組排序算法

4.1 冒泡排序

冒泡排序原理：數組相鄰兩項直接互相比較，若是前一項比後一項大，就交換兩項的位置，不然什麼也不作；這樣比較一輪事後，能夠得出本輪的最大值。數組

示例：markdown

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以及中間相拼接起來。dom

  • 示例：
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));
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程