Node.js 的 30 天學習日記--第十四天

Node.js 學習第十四天

感覺好想變成學校作業一樣，不趕快在 12 點前作完就會失敗，這樣逼自己寫 w w w 。

如果在看的過程中有任何錯誤歡迎寫 E-MAIL： pp840405@gmail.com 提醒我錯誤。

UI 時間介接

今天這天是讓資料庫的每筆資料新增一組 UNIX 時間代碼，好讓搜尋可以更加方便且在某時間範圍內搜尋。
按照下面設定可以去搜尋一整天的記錄。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
        開始時間：<br>
        <input type="date" id="time" value="">
        <input type="button" id="send" value="送出">
    <script>
        var time = document.getElementById('time');
        var send = document.getElementById('send');
        send.addEventListener('click',function(e){
        //確認日期格式是否正確
        console.log(time.value);
        var now = new Date(time.value);
        //把日期格式轉成且設定0時0分0秒0毫秒
        var startTime = now.setHours(0,0,0,0);
        console.log(startTime)
        //把日期格式轉成且設定23時59分59秒999毫秒
        var endTime = now.setHours(23,59,59,999);
        console.log(endTime)
        });
    </script>
</body>

圖

reverse -資料翻轉調整

原本 firebase 資料新增是由新到舊由上到下排列， reverse 可以把整個資料反轉排列，如果做 Todolist 資料一直往下新增以後資料一多去檢視網頁就比較麻煩。

1
2
3
4
var data = [1,2,3,4,5];
console.log(data);
data.reverse();
console.log(data);

範例結果
不過這語法只能反轉陣列內的資料，物件資料不能翻轉所以要把物件資料 push 到陣列裡面。
下面程式碼是用前面練習 Todolist 來做的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
todos.on('value',function(snapshot){
        var str = '';
        //新增陣列
        var data = [];
        snapshot.forEach(function(item){
            //把物件加入陣列裡面
            data.push(item.val());
            console.log(data);
        })
        //翻轉陣列內資料
        data.reverse();
        //再把資料排列好
        for(var item in data){
            str+='<li>'+data[item].content+'</li>';
        }
        list.innerHTML = str;
    })

結語

反轉這語法用在很多的網頁上面做使用，所以可以去了解這語法更詳細的做法，有任何問題歡迎寫 MAIL： pp840405@gmail.com 一起共同討論。