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 nhommuaH2: Timer counter của cungmua
H3: Timer counter của hotdealfunction 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
