tạo groupon time counter giống nhommua, cungmua, hotdeal

tạo groupon time counter giống nhommua, cungmua, hotdeal:
Nếu các bạn là người dùng Việt Nam chắc chắn ai ai cũng biết đến 3 website nổi tiếng nhất hiện nay đó là nhommua, cungmua, và hotdeal, chúng là 1 website cung cấp các deal, coupon, và vouchor.

Khi một bài viết (deal) được publish chúng ta sẽ thường thấy 1 đồng hồ tick và thời gian nó sẽ giảm dần cho đến khi hết hạn, và sau khi hết hạn thì deal đó trong trạng thái close đi

Mặc dùng là các site cung cấp deal khác nhau nhưng nhìn chung, tất cả đều tương đồng đến 90%.

H1: Timer counter của nhommua

H2: Timer counter của cungmua

H3: Timer counter của hotdeal

Trong bài này chúng ta sẽ tiếp cận với cách làm timer counter đó sử dụng asp.net và javascript.

Đầu tiên tạo 1 dự án asp.net empty website bằng Visual Studio 2010
Thêm 1 item mới named default.aspx
Copy và paste đoạn javascript sau vào Visual Studio

function Timer(container, timeLeft) {
  // get hour, minute and second element using jQuery selector
  var hoursContainer = $(container).find('.hour');
  var minsContainer  = $(container).find('.min');
  var secsContainer  = $(container).find('.sec');
   
  // hold time left
  var currentTimeLeft = timeLeft;
  // 1 second = 1000 ms
  var secondsForTimer = 1000;  
  // hold ID value return by setInterval()
  var timerInterval;
  
  // call setInteval() only when timeLeft is greater than 0
  if (currentTimeLeft == 0) {
   return;
  } else {
   //Call setInterval()function and store ID value to timerInterval. 
   timerInterval = setInterval(countdown, secondsForTimer);
  }
  
  //function being passed to setInterval()
  function countdown() {
    currentTimeLeft = parseInt(currentTimeLeft - secondsForTimer);    
    if (currentTimeLeft == 0) {
       //stop calling countdown function by calling clearInterval()
       clearInterval(timerInterval);
       return;
    } else {     
       //calculate hours left
       var wholeSeconds = parseInt(currentTimeLeft / 1000,10);
       var wholeMinutes = parseInt(currentTimeLeft / 60000,10);
       var wholeHours   = parseInt(wholeMinutes / 60,10);
       //calculate minutes left
       var minutes = parseInt(wholeMinutes % 60,10);
       //calculate seconds left
       var seconds = parseInt(wholeSeconds % 60,10);
       //prefix 0 to hour, min and second counter
       $(hoursContainer).text((wholeHours < 10 ? "0" : "") + wholeHours + (wholeHours <=0 ? " hr" : " hrs"));
       $(minsContainer).text((minutes < 10 ? "0" : "") + minutes  + (minutes <=0 ? " min" : " mins"));
       $(secsContainer).text((seconds < 10 ? "0" : "") + seconds  + (seconds <=0 ? " sec" : " secs"));
    }
  }
}

Đặt tên nó là timer.js sau đó reference nó vào trang default.aspx look like:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="timer.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        var timeLeft = '<%=remaingTime%>';         
        var timer = new Timer($('#counter'), timeLeft);
    });
</script>

Trước tiên reference Jquery để bind function onload (.ready) cho page
Chú ý biến remaingTime chúng ta sẽ handle nó trong sự kiện page_load của trang default như sau:

using System;
using System.Web.UI;
 
public partial class _Default : Page
{
    protected string remaingTime = String.Empty;
 
    protected void Page_Load(object sender, EventArgs e)
    {
        var expiredDate = new DateTime(2012, 07, 11,16,0,0);
        var timeLeft = expiredDate.Subtract(TimeZoneInfo.ConvertTimeBySystemTimeZoneId(DateTime.Now, "SE Asia Standard Time"));
        remaingTime = timeLeft.TotalMilliseconds.ToString();
    }
}

Đầu tiên mình khai báo biến remaingTime với giá trị là rỗng
Sau đó mình khởi tạo biến expiredDate với giá trị lớn hơn ngày hiện tại mình viết bài 24h.
Dùng hàm Subtract để tính số thời gian chênh lệch giữa 2 biến.
Dùng hàm ConvertBySystemTimeZoneId để convert time đúng theo múi giờ mà mình muốn, trong trường hợp server đặt ở 1 location không phải là Việt Nam.

Khi có khoảng thời gian chệnh lệch rồi thì mình sẽ có được tổng số Millisecond
Chạy ứng dụng lên chúng ta sẽ thấy màn hình như sau:Hỉnh 4: Timer counter

Và đây là demo: deal timer counter, coupon timer counter
Mọi thắc mắc góp ý về bài viết vui lòng liên hệ: mr_ha_hcm@yahoo.com

Trong các bài viết sắp tới mình sẽ hướng dẫn tiếp cách mà 3 websites này rewrite url