• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Tạo bộ đếm ngược sử dụng Mootools

1
17/10/2010

Có nhiều website như RapidShare hay 4shared chẳng hạn, thường bắt bạn đợi một khoảng thời gian định sẵn trước khi cho phép bạn tải về một phần mềm nào đó. Sử dụng công cụ MooTools có thể tạo ra plugin đếm ngược tương tự như các trang web nói trên.


Xem Demo.

Sau đây là Javascript MooTools.


var CountDown = new Class({

//implements
Implements: [Options,Events],

//options
options: {
element: 'countdown',
start: 10,
finish: 0,
startFont: '36px',
finishFont: '12px',
onComplete: $empty,
duration: 1000
},

//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},

//get things started
start: function() {
this.anim();
},

//animate!
anim: function() {
this.options.element.set('text',this.options.start--);
var fx = new Fx.Tween(this.options.element,{
duration: this.options.duration,
link: 'ignore',
onComplete: function() {
if(this.options.start >= this.options.finish) {
this.anim();
} else {
this.fireEvent('complete');
}
}.bind(this)
}).start('font-size',this.options.startFont,this.options.finishFont);
}
});

/* usage */
window.addEvent('domready',function() {
var cd = new CountDown({
element: $('countdown'),
start: 12,
finish: 0,
onComplete: function() {
this.options.element.set('text','Xong rồi! Bạn đã có thể tải về phần mềm bạn cần!').setStyle('color','#090');
}
}).start();
});

Trong lớp CountDown có những tùy chọn cho phép bạn tùy chỉnh theo ý mình:
element: chứa văn bản đếm ngược
start: số bắt đầu (mặc định đến 10)
finish: số kết thúc (mặc định đến 0)
duration: thời gian giữa các số (mặc định đến 1000 hoặc 1 giây)
startFont: cỡ font chữ cho số bắt đầu
finishFont: cỡ font chữ cho số kết thúc

Một thứ quan trọng cần có là file javascript moo1.2.js đặt trước phần javascript ở trên. Bạn nên tải về moo1.2.js rồi gắn URL vào phần scr. Tóm lại bạn cần đặt tất cả chúng vào giữa 2 thẻ <head>, </head> như thế này:

<head>
<script type="text/javascript" src="/moo1.2.js"></script>
<script type="text/javascript">

var CountDown = new Class({

//implements
Implements: [Options,Events],

//options
options: {
element: 'countdown',
start: 10,
finish: 0,
onComplete: $empty,
duration: 1000
},

//initialization
initialize: function(options) {
//set options
this.setOptions(options);
},

//get things started
start: function() {
this.anim();
},

//animate!
anim: function() {
this.options.element.set('text',this.options.start--);
var fx = new Fx.Tween(this.options.element,{
duration: this.options.duration,
link: 'ignore',
onComplete: function() {
if(this.options.start >= this.options.finish) {
this.anim();
} else {
this.fireEvent('complete');
}
}.bind(this)
}).start('font-size',this.options.startFont,this.options.endFont);
}
});

window.addEvent('domready',function() {
var cd = new CountDown({
element: $('countdown'),
start: 12,
duration: 1000,
startFont: '36px',
endFont: '12px',
finish: 0,
onComplete: function() {
this.options.element.set('text','Xong rồi! Bạn đã có thể tải về phần mềm bạn cần!').setStyle('color','#090');
}
}).start();
});
</script>
</head>

Sau cùng là thiết lập HTML nơi hiển thị bộ đếm ngược:

<p><span id="countdown"></span></p>

Hy vọng đây có thể là công cụ hữu ích cho các bạn!

{1 bình luậnAdd yours ?}

Yolks
AUTHOR
21:08:00, 4 thg 10, 2011

Ồ cái này good , thích hợp với mấy site chuyên mở sự kiện như site em

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn