blog banner

練習五:喜宴倒數?

某天,聚餐後順路載老同學回家,聊到結婚的話題時,聽見老同學喃喃的說著:倒數94天…

握著方向盤的我腦中突然閃出了一個想法。不做出來的話實在太浪費了…大概…

原本想說熱血的修改LINE群組名稱來做每日到數,但是想想每天都要改實在太累了,還是用網頁來做吧!

於是就弄了一個簡單的javascript計數器,這部分還滿簡單的,甚至根本不需要用到jQuery,網路上也有很多範例,

只是為了美觀上要額外處理”個位數”時前面多補上一個”0″,倒數計時器<-點此看範例效果

function Appendzero(obj){//個位數顯示時補0
    if(obj<10){
        return "0"+ obj;
    }else{
        return obj;
    }
}

計時器完成後,覺得好單調,應該要增添一點緊張感,於是就把之前惡搞同學的PS圖拿來當背景。

背景效果就簡單多了,其實就只是用兩張圖作重疊的效果而已<-點此看範例效果

做著做著又覺得應該要有音樂啊、雜訊效果啊、一些中二的元素…等,

比較麻煩的是”音樂”處理的問題,行動裝置對於音樂自動撥放的設定絕對都是禁止的,所以這部分就別想太多了,乖乖的的把音樂開關做出來。

這當中有個插曲,本來想直接盜連用youtube的影片來當背景音樂,但是會因為版權問題無法跨網域播放,所以最後還是自己切了一小段音樂,意思意思弄個氣氛就好。音樂播放<-點此看範例效果

就這樣,以上都不是什麼高難度的技巧,但是只要參再一起做撒尿牛丸,就會變得很像一回事了,

最後在傳給其他的同學們,讓大再次(?)感受籌備婚宴的緊張感XD

不知不覺就搞成了這樣<-點此看範例效果
那個…同學~不好意思~活動已經結束了~
尚未結束的狀態長這樣<-不要當真了活動已經結束了