2018年11月10日 星期六

電腦回歸



上禮拜去台南後突然不能開機,送修是說主機板壞掉,想說就趁這次換一下機器吧,然後透過朋友幫忙用學生價入手了 2018 款的 Mac Pro,再經過時光機還原後,終於又可以正式上工啦。





Read more

2018年11月6日 星期二

日本凶宅網- 大島てる



大島てる是一個介紹日本凶宅的網站,以地圖為主要的介面,在地圖上就可以依據地理位置找到哪間是凶宅,除了標示外也有說明曾經發生過的事件,如果去日本玩怕住到不乾淨的房子,可以使用這個網站來查詢。
Read more

2018年10月31日 星期三

[DeTools] 金庸武俠世界裡的主要門派分布地圖



看到有人貼了一張金庸門派的地理位置圖,我就用 google map 也做了一個動態版的金庸武俠世界裡的主要門派分布地圖,建點的時候有參考原本那張圖,然後也有 google 一下小說的描述和位置,應該大致上是正確的,有缺或需要補的可以再跟我說。

Read more

2018年10月30日 星期二

[jQuery Plugin] 倒數計時- jQuery.countdown



要使用倒數計時功能找到一隻很方便的 plugin- jQuery.countdown,基本的使用方法是把 plugin 讀入後像這樣寫:

  1. $("#getting-started")   
  2.   .countdown("2017/01/01"function(event) {   
  3.     $(this).text(   
  4.       event.strftime('%D days %H:%M:%S')   
  5.     );   
  6.   });  

可以依據自己的需求去顯示時分秒甚至是週、月、年都可以。

若是要在一個頁面裡面顯示很多個倒數計時,這個若是在做活動頁面應該會有機會用到,寫法如下:

  1. <div data-countdown="2016/01/01"></div>  
  2. <div data-countdown="2017/01/01"></div>  
  3. <div data-countdown="2018/01/01"></div>  
  4. <div data-countdown="2019/01/01"></div>  

  1. $('[data-countdown]').each(function() {   
  2.   var $this = $(this), finalDate = $(this).data('countdown');   
  3.   $this.countdown(finalDate, function(event) {   
  4.     $this.html(event.strftime('%D days %H:%M:%S'));   
  5.   });   
  6. });  

有需要的話再去調整每一個時間顯示的樣子,想看更多範例可以看官方文件

我有把這個做在 Pokemon GO 活動列表上。
Read more

使用 vis.js 建立時間軸



時間軸 UI 用過幾個,這次是想要一個可以作區間的但又不是像 full calendar 那麼複雜的介面,類似甘特圖的 UI,找來找去就找到這個 vis.js,但他不止能做時間軸,還可以做類似心智圖或其他圖表的功能,這邊先就時間軸來說明一下。

一樣將 js 跟 css 讀入後,像這樣使用就可以了。

  1. var container = document.getElementById('visualization');   
  2.   
  3.   // Create a DataSet (allows two way data-binding)   
  4.   var items = new vis.DataSet([   
  5.     {id: 1, content: 'item 1', start: '2013-04-20'},   
  6.     {id: 2, content: 'item 2', start: '2013-04-14'},   
  7.     {id: 3, content: 'item 3', start: '2013-04-18'},   
  8.     {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},   
  9.     {id: 5, content: 'item 5', start: '2013-04-25'},   
  10.     {id: 6, content: 'item 6', start: '2013-04-27'}   
  11.   ]);   
  12.   
  13.   // Configuration for the Timeline   
  14.   var options = {};   
  15.   
  16.   // Create a Timeline   
  17.   var timeline = new vis.Timeline(container, items, options);  

其中 content 是用來放要顯示的內容,有 start 跟 end 的話就會顯示一個區間,只有 start 的話就會顯示一個點,區間是包含時分秒的,也就是如果給到幾點幾分幾秒,會在時間軸上算到一個位置把點放上去。

option 那邊可以設定時間軸的樣子。

  1. var options = {   
  2.   width: '100%',   
  3.   height: '30px',   
  4.   margin: {   
  5.     item: 20   
  6.   }   
  7. };  

預設的時間軸是你上面有多少內容,他會一次顯示給你看,如果上面太多東西一次看到的範圍就會太大而且會包含已經發生過的事情,所以如果想要設定開始時間跟範圍的話,可以像這樣給一個 start 的值。
  1. var options = {   
  2.         start: yourtime,   
  3. };  

更多文件及設定資料可以看官方說明

我有把它用在 Pokemon GO 活動列表
Read more

2018年10月29日 星期一

2018年10月28日 星期日

鐵啞鈴社群日

因為第一次社群日很多地方伺服器塞爆出包,N 社破天荒辦了兩次鐵啞鈴的社群日,不過由於第一次我待的地方網路很順,加上這次給的彗星拳誠意十足,所以兩次加起抓了很多也抓的很開心。





總計抓了 16 隻色違。

IMG_8638IMG_8640IMG_8641IMG_8642IMG_8646IMG_8647IMG_8651IMG_8655IMG_8724IMG_8725IMG_8727IMG_8728IMG_8729IMG_8730IMG_8738IMG_8739

還有換到兩隻亮晶晶跟一隻 iv96 的。
IMG_8734IMG_8735

Read more
Related Posts Plugin for WordPress, Blogger...