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!
{ 0 comments... read them below or add one }
Post a Comment