เทคนิคการทำตัวเลขเวลานับถอยหลังใน Email

cover

ได้รับ email newsletter จาก AirAsiaGo เป็นดีล flash sale แล้วมีตัวเลขเวลานับถอยหลังเป็นรายวินาที เลยประหลาดใจว่ามันทำได้ไง เพราะอีเมลเค้าไม่ให้ใส่พวก javascript ก็เลยลองแกะ source ดูพบว่าใช้เทคนิคดังนี้

  • ตัวอักษรที่เห็น ใช้เป็นรูปทั้งหมด แล้วแยกรูปด้วย คือ 1 ตัวอักษร ก็คือใช้ 1 รูป (ยกเว้นตัวเลขวินาทีอันหลังสุด ที่จับรวมกัน 2 ตัวอักษร)
  • ตัวเลขวินาทีใช้ เป็นภาพ gif animation โง่ๆ ที่แสดงผลตั้งแต่ 00-59-58-…-01-00 พอตัวเลขวิ่งถึง 00 คำถามคือพอถึงวินาทีที่ 00 แล้วตัวเลขนาทีขยับลงมั้ย... คำตอบคือไม่ขยับ มันคือเอาไว้ทำหลอกไว้เฉยๆ
  • อ้าว แล้วงี้ตัวเลขนาทีกับชั่วโมงจะขยับตอนไหน ก็ตอนที่กด reload หน้าใหม่อีกครั้ง ภาพของตัวเลขนาทีกับชั่วโมงก็จะอัพเดตตามจริง
  • วิธีที่ใช้ ยกตัวอย่างเช่นภาพหลักนาทีที่อยู่หลังสุด (เลข 8 ในภาพ) จะเรียกภาพโดยใช้ว่า

<img src=”http://pages.global.expediamail.com/generic_countdown/?saleHours=48&amp;startdate=04/14/2015&amp;starttime=18:00:00&amp;position=1&amp;tzone=uk&amp;POS=TH ” class=”digit1″ style=”display:block;”>

  • สังเกตว่า parameter ใส่มาครบเลย ทั้งเวลาเริ่มแคมเปญ แล้วก็ระยะเวลาของแคมเปญ
  • พอกดตามที่อยู่ของ img ไปจริงๆ ก็พบว่ามันจะ redirect ไปที่ http://image2.global.expediamail.com/lib/feca167675640c78/m/7/digit_8.jpg
  • ทีนี้ก็พอจะรู้แล้วว่าหลักการหลังจากนี้ก็ให้ฝั่ง server generate ตัวเลขให้เป็นไปตาม parameter ของรูปนั้นๆ จนกระทั่งสิ้นสุดระยะเวลาของแคมเปญ