Angular中關于時間的操作總結(jié)

mengera88 發(fā)布于2019-08-22 16:13 / 2738人閱讀

摘要：上顯示出來時間本地系統(tǒng)顯示時間發(fā)送前控制臺打印出來瀏覽器網(wǎng)絡中監(jiān)測顯示解決方案只有在發(fā)送時間類型的數(shù)據(jù)時會進行轉(zhuǎn)換，導致相差個小時，但是我發(fā)送前就將其轉(zhuǎn)換成字符串，就不會造成這樣的結(jié)果了。

創(chuàng)建時間

使用new Date(),可以看見有5種構(gòu)造函數(shù)

    console.log(new Date()); // 當前時間
    console.log(new Date("2015-08-12 12:30"));// 字符串
    console.log(new Date(12345679));//時間戳
    console.log(new Date(2018, 3, 20, 12, 30));//指定年月日等

如果要創(chuàng)建一個時間為當日的日期不包含時間的值

 console.log(new Date(new Date().toLocaleDateString()));

時間計算

通常可以轉(zhuǎn)換成時間戳的方式進行計算

    const endTime = new Date(new Date().toLocaleDateString());
    let d = endTime.valueOf(); // 時間戳
    d -= 7 * 24 * 60 * 60 * 1000;
    const startTime = new Date(d);
    console.log(startTime);
    console.log(endTime);
    console.log(d);

時間轉(zhuǎn)換

    console.log(new Date().toTimeString());
    console.log(new Date().toLocaleDateString());
    console.log(new Date().toDateString());
    console.log(new Date().getTime());

Angular 自帶的時間管道

現(xiàn)在的時間是{{today | date:"yyyy-MM-dd HH:mm:ss"}}

第三方插件

moment.js

這是一個很強大的時間插件，這里用一個應用場景來演示。

nodejs上的時間和我本地的時間總是相差8個小時，這導致我每次發(fā)送時間到后臺時，nodejs將時間轉(zhuǎn)化成字符串傳送出去的時候總是和我服務器上的時間相差8小時。
node上顯示出來時間

本地系統(tǒng)顯示時間

發(fā)送前控制臺打印出來

瀏覽器網(wǎng)絡中監(jiān)測顯示

解決方案

nodejs只有在發(fā)送時間類型的數(shù)據(jù)時會進行轉(zhuǎn)換，導致相差8個小時，但是我發(fā)送前就將其轉(zhuǎn)換成字符串，就不會造成這樣的結(jié)果了。
所以對angular的http進行封裝，在發(fā)送前將body中的時間類型轉(zhuǎn)換成字符串類型

    post(url: string, body?: any, params?: any,headers?:any) {
        this.begin();
        return this.http
            .post(url, this.parseBody(body) || null, {
                headers:this.parseHeaders(headers),
                params: this.parseParams(params)
            })
    }
  parseBody(body: any) {
    if (body) {
      for (const key in body) {
        if (body[key]) {
          const _data = body[key];
          // 將時間轉(zhuǎn)化為字符串
          if (moment.isDate(_data)) {
            body[key] = moment(_data).format("YYYY-MM-DD HH:mm:ss");
          }
        }
      }
    }
    return body;
  }

其中用到了moment.js 的兩個方法，一個時判斷是否時時間類型moment.isDate（_data）另一個時轉(zhuǎn)換成字符串moment(_data).format("YYYY-MM-DD HH:mm:ss");
關于更多用法可以參考官網(wǎng)

云服務器 GPU云服務器 php中關于的運算 linux中關閉防火墻的命令時間操作函數(shù) 時間控件操作

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94154.html

前端練級攻略(第二部分)

摘要：是文檔的一種表示結(jié)構(gòu)。這些任務大部分都是基于它。這個實踐的重點是把你在前端練級攻略第部分中學到的一些東西和結(jié)合起來。一旦你進入框架部分，你將更好地理解并使用它們。到目前為止，你一直在使用進行操作。它是在前端系統(tǒng)像今天這樣復雜之前編寫的。本文是前端練級攻略第二部分，第一部分請看下面：前端練級攻略(第一部分) 在第二部分，我們將重點學習 JavaScript 作為一種獨立的語言，如...

BWrong 2019-08-23 16:49 評論0 收藏0
JavaScript數(shù)據(jù)雙向綁定的簡單演示

摘要：對于前端，有時候需要實現(xiàn)視圖層和數(shù)據(jù)層的雙向綁定例如當前流行的各種框架和類庫。為代表前端數(shù)據(jù)劫持。參考資料實現(xiàn)數(shù)據(jù)雙向綁定的三種方式談談中的雙向數(shù)據(jù)綁定非常簡單的雙向數(shù)據(jù)綁定框架三對于前端，有時候需要實現(xiàn)視圖層和數(shù)據(jù)層的雙向綁定(two-way-binding), 例如當前流行的各種框架和類庫:Vue.js、Angular.js、React.js。然而，他們最原始的實現(xiàn)方式其實都相...

snifes 2019-08-19 17:57 評論0 收藏0
Angular4的QuickStart—— ES6 而非TypeScript

摘要：今年月份，官方發(fā)布了新版，新版本的特性已經(jīng)有很多文章了，在此不一一贅述。組件是系統(tǒng)中最重要的基本構(gòu)造塊之一。但是由于目前不支持裝飾器語法，因此通過方法完成這一工作。本文主要是提供一個基于的，如有問題，歡迎留言探討。原文發(fā)表于本人的個人博客，地址：Angular4的QuickStart——With ES6 Not TypeScript，歡迎反饋探討。今年3月份，Angular官方發(fā)布...

jkyin 2019-08-21 11:44 評論0 收藏0
聊聊面試中關于并發(fā)問題的應對方案

摘要：這里呢，我直接給出高并發(fā)場景通常都會考慮的一些解決思路和手段結(jié)尾如何有效的準備面試中并發(fā)類問題，我已經(jīng)給出我的理解。 showImg(https://segmentfault.com/img/bV7Viy?w=550&h=405); 主題又到面試季了，從群里，看到許多同學分享了自己的面試題目，我也抽空在網(wǎng)上搜索了一些許多公司使用的面試題，目前校招和社招的面試題基本都集中在幾個大方向上...

xzavier 2019-08-15 15:19 評論0 收藏0
【譯】前端練級攻略

摘要：由于系統(tǒng)變得越來越復雜，人們提出了稱為預處理器和后處理器的工具來管理復雜性。后處理器在由預處理器手寫或編譯后對應用更改。我之前建議的文章，，也涵蓋了預處理器相關的知識。譯者：前端小智原文：medium.freecodecamp.org/from-zero-t… medium.freecodecamp.org/from-zero-t… 我記得我剛開始學習前端開發(fā)的時候。我看到了很多文章及...

wuyumin 2019-05-22 16:41 評論0 收藏0