iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 18
0

Day18-課題內容

進入JS30的第十八天,今天的課題中,我們也要來處理陣列中的資料,
而這次處理的資料對象為時間,我們要將每個元素的時間加總起來。[1]

進入課題

在一開始的草稿中,作者總共提供了58個代表影片的 li 元素,並利用 Data-attribute 將各個影片長度資料加上,而我們的目的就是利用 array.reduce() 方法,把所有的影片時間加總起來。
首先我們先將所有的li 元素選取起來,然後使用 Array.from() 方法轉為陣列:

const allListItem = Array.from(document.querySelectorAll('li'));

array.reduce() 方法中,首先先透過 element.dataset.attribute 方法取得 data-time的時間值。再來利用 string.split() 方法將分跟秒分開,因取得的分跟秒為 string ,所以使用 Number() 方法將其轉為數字,然後回傳總秒數:

const total = allListItem.reduce(function(acc, cv){
    //取得代表時間的 data-attribute 字串
    const videoLength = cv.dataset.time;
    //將取的的時間轉為各個陣列中元素
    const array = videoLength.split(':')
    //將字串轉為數字然後計算成總秒數
    const seconds = Number(array[0]*60) + Number(array[1]);
    return acc + seconds;
  },0);

然後要將秒數換算成 '時:分:秒'的格式,我們先來認識一下 javascript 中的數字運算符 operator 。[2]

  1. +:加。
  2. -:減。
  3. *:乘。
  4. /:除。
  5. %:餘數。
  6. ++:加一。
  7. --:減一。

知道這些運算符之後,我們就可以將我們的總秒數換算成 '時:分:秒'的格式:

const hour = parseInt(total/3600);
const min = parseInt((total - 3600*hour)/60);
const second = total%60;
console.log(`${hour}:${min}:${second}`);

總結

以上是今天的內容,之前我們處理的資料都是單純的字串或數字,而今天時間的計算,則是需要先透過不同的方法,將資料轉為秒數,在轉為我們要的格式,相信完成今天的課題之後,我們對不同資料的處理可以更得心應手!!

參考資料

  1. javascript30
  2. w3schools-JavaScript Operators

上一篇
JS30-Day17-Sort Without Articles
下一篇
JS30-Day19-Webcam Fun
系列文
新手也能懂的JS3030

尚未有邦友留言

立即登入留言