Học lập trình: Tạo đồng hồ chạy trong các website deal

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%.

Timer counter của nhommua

Timer counter của cungmua

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

<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:

Chúc các bạn thành công