[程式] 點一下圖片，黑白瞬間變彩色

夥伴傳來一個連結，打開後，裡面的多張黑白(灰階)圖片，按一下圖片後，就會慢慢轉成彩色，所以覺得很療癒。

不過，我想了一下，想試著把它的動作還原，整理以下思路：

1. 一開始把頁面中的圖片都設成灰階
2. 設定每個圖片監聽 click 事件
3. 圖片被點擊後，取消灰階
4. (opt)取消灰階後，用 fadeIn 讓圖片浮現

試了一下，果然可行，其中的關鍵字：

• css
• filter
• grayscale

以下是我簡單做的範例程式，提供參考囉！

[javascript] 新增、移除物件中的元素

新增成為最後一個：

.push( obj )

移除最後一個元素：

.pop()

從 x 元素開始移除 y 個元素：

.splice( x, y )

從 x 元素新增 元素：

.splice(x, 0, obj  )

example:

var data = {[
    {readerid: '100001', name: "吳一英 ", classname: "601"},
    {readerid: '100002', name: "吳二英 ", classname: "602"},
    {readerid: '100003', name: "吳三英 ", classname: "603"},
    {readerid: '100004', name: "吳四英 ", classname: "604"}
]};
data.splice( 2, 0,
    {readerid: '100005', name: "吳小英 ", classname: "605"}
);    

結果：

var data = {[
    {readerid: '100001', name: "吳一英 ", classname: "601"},
    {readerid: '100002', name: "吳二英 ", classname: "602"},
    {readerid: '100003', name: "吳小英 ", classname: "605"},    {readerid: '100004', name: "吳三英 ", classname: "603"},
    {readerid: '100005', name: "吳四英 ", classname: "604"}
]};

若有資料可以對應物件內的資料的話，可以利用 jquery 的語法來快速移除某個元素

var elm_readerid = 'aaa';
data = $.grep( data, function(e) {
    return e.readerid != elm_readerid;
});

JS 學習資源

學習資源

• Angular 2 Tutorial For Beginners   https://angular-university.io/course/getting-started-with-angular2
• Build your first Node.js website, Part 1  https://www.ibm.com/developerworks/library/wa-simplenode1-app/
• CREATING A SIMPLE RESTFUL WEB APP WITH NODE.JS, EXPRESS, AND MONGODB  http://cwbuecheler.com/web/tutorials/2014/restful-web-app-node-express-mongodb/
•