防止連續點擊
https://jsbin.com/cowumunufi/
複製裝填 cloneNode複製以及append in：
https://jsbin.com/tovoyociqi/
use sprite for retina
多個倒數計時器&使用Unix Time得到真正的時間
- 過去時常使用new Date()得到最近的時間，
今天發現設置時間的同時，使用.getTime()能得到更精準的時間。
例如：
var endDate = new Date(2016, 12, 10, 12, 00).getTime();
相關網址：http://www.unixtimestamp.com/index.php
jQuery多個同時倒數秒的計時器：
沒有值的時候，就是清除掉element的內容
//在html內，給每個funtw-timer-area一個data-end-time的數值，
//用each找每個值，然後經過sett()跑過，計算出各別的d、h、m、s，
//再把值each丟回給各別的容器內
function sett() {
$('.funtw-area-active li .funtw-timer-area').each(function(index, el) {
var startDate = new Date().getTime(); //得到毫秒
var endDate = $(this).attr('data-end-time');
var spantime = endDate*1000 - startDate; //用毫秒 - 毫秒
// console.log('spantime', spantime);
var second = 1000;
var minute = 1000 * 60;
var hour = 1000 * 60 * 60;
var day = 1000 * 60 * 60 * 24;
var d = Math.floor(spantime / day);
var h = Math.floor((spantime % day) / hour);
var m = Math.floor((spantime % hour) / minute);
var s = Math.floor((spantime % minute) / second);
$(this).find(".funtw-timer-day").html(d);
$(this).find(".funtw-timer-hour").html(h);
$(this).find(".funtw-timer-min").html(m);
$(this).find(".funtw-timer-sec").html(s);
// console.log('s', s);
});
}
window.onload = function() {
setInterval(sett, 1000);
sett();//需要先執行一次，避免一開始頓
}
JavaScript多個同時倒數秒的計時器（同寫法只是改成js）：
沒有值的時候，就是扣除到目前為止的時間，作為element的內容
function sett() {
var countArea = document.querySelectorAll('.funtw-area-active li .funtw-timer-area');
var countLength = countArea.length;
var startDate = new Date().getTime();
for(var i=0; i<countLength; i++){
var endDate = countArea[i].getAttribute('data-end-time');
var spanTime = endDate*1000 - startDate;
var sec = 1000,
min = 1000*60,
hour = 1000*60*60,
day = 1000*60*60*24;
var d = Math.floor(spanTime / day),
h = Math.floor((spanTime % day) / hour),
m = Math.floor((spanTime % hour) / min),
s = Math.floor((spanTime % min) / sec);
console.log(s);
countArea[i].querySelector('.funtw-timer-day').innerHTML = d;
countArea[i].querySelector('.funtw-timer-hour').innerHTML = h;
countArea[i].querySelector('.funtw-timer-min').innerHTML = m;
countArea[i].querySelector('.funtw-timer-sec').innerHTML = s;
}
}
window.onload = function() {
setInterval(sett, 1000);
sett(); //需要先執行一次，避免一開始頓
}
好用的chrome DevTols Theme: Zero Dark Matrix 擴充工具
這個工具能幫助畫面的code更易辨識，深色底的那種syntax hightlight、以及將js es6轉成es5的功能，文字筆記下安裝方式：
打開Chrome瀏覽器 > 搜尋「DevTools Theme: Zero Dark Matrix」並新增到功能 >
開啟「開發人員工具」 > Settings > General > Theme選擇Dark > 在網址列輸入「chrome://flags」並搜尋 > 開啟頁面後，再度搜尋「Experiments」並且開啟，然後立即重新啟動Chrome這個瀏覽器
再度重啟瀏覽器後 > setting 「Experiments」 > AllowCustome UI themes 打勾
完成。
[Js plugin] template doT.js
由於公司活動專案的關係，發現投票十個女生，在html上各別點擊十個dom，都彈出一樣的popup，差別在於裡面的文字資料、連結資料、照片不同。
因為被推薦了這個套件，筆記。
http://olado.github.io/doT/index.html
額外的工作筆記：
—
這次專案內使用了一個名為swiper的套件，這個slide套件的好處在於RWD網站的呈現跟touch都幫你作好了（置中需要自己另外寫），但是當其中每個slide內需達到其他目的時，最左邊（整串slide最後一個），內部的function使用bind click卻失效了，查詢之後才發現，如果使用on，並且從$(document)開始，並且過濾並且找到指定元素，再執行該function：
$(document).on(‘click’, 指定元素, function name);
[javascript] 產生物件的寫法
因為記憶很差，而且這邊就是記事本。
分為以下三種圖片寫法（擷取codecademy的）：
html內對於render現象 / 整塊 / 不行 / 壞掉
越來越多後台使用wp架構，而仰賴流量跟pv賺取＄的農場網站，
紛紛不用theme，而另外設計切版，
這樣情況的總覽首頁、各分類首頁，都有文章塊狀可點擊連結的需求產生，
原來切版時，只是單純一篇文章的連結區塊，用一個大<a>包覆，如下圖：
卻發現網頁呈現，使用瀏覽器檢查元素，發現整塊<a>能在區塊內自動產生無性生殖？，
卻以<div>作為區隔而已，如下圖：
上圖竟然以<div class="timer-main">為區隔，再上方即自動增加</a>作為結束，
連結這種是還是老實為好，將大圖＋標題、時間發表、文章前文略述，
分三個部分各別寫<a>才是正確的作法。
使用tinyMap工具方便在google map上標記、甚至sandbox
需求：
- 同時標記多個地標
- 需要自訂地圖中心點
我的簡易使用：http://jsbin.com/deqeviteze/edit?js,output
[css] 讓圖片不佔空間的相對漂浮在文字上面
當hover文字時，圖片漂浮在上面，卻不佔空間。
https://jsbin.com/palizicuze/edit?html,css,output
setInterval 與 setTimeout 使用異同點
其實兩者使用原意不同。
1s = 1000;
setInterval 是每隔一段時間跑一次function。寫法如下：
setInterval(myFunc, 1000);
setTimeout 是只執行一次。寫法如下：
setTimeout(myFunc, 1000);
原來的setInterval：
function myFunc(){
alert(123);
}
setInterval(myFunc, 1000);
但是依據使用方式不同，setTimeout也可以如同setInterval一樣間隔跑一次，
作法如下：
myFunc();
function myFunc(){
alert(123);
setTimeout(myFunc, 1000); //這樣每秒都會跳一次alert 123
}
Alice's Note 