JavaScriptBank.com
02-07-2010, 08:24
Một đồng hồ báo giờ tuyệt nhất trên trang web tôi từng thấy bằng JavaScript, mặc dù hiệu ứng báo giờ này chỉ thay đổi mỗi năm phút nhưng nó có cách hoạt... chi tiết (http://www.javascriptbank.com/javascript-word-clock-spell-the-time.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/framework/javascript-word-clock-spell-the-time.jpg (http://www.javascriptbank.com/javascript/framework/jquery/javascript-word-clock-spell-the-time/preview/vi/)
Demo: JavaScript Đồng hồ đọc giờ với JavaScript (http://www.javascriptbank.com/javascript-word-clock-spell-the-time.html/vi/)
| JavaScript JavaScript Word Clock: Spell the Time (http://www.javascriptbank.com/javascript-word-clock-spell-the-time.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<style>
body {
background-color: #111;
}
div#clock {
font-size: 50px;
font-family: monospace;
color: #222;
text-align: center;
}
.lightup {
color: #EEE;
}
.seclightup {
color: #EEE;
}
.gumuz {
color: #333;
}
</style>
Bước 2: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
function render_time(classes) {
// reset
$('span').removeClass('lightup');
//toggle_sec();
for (var i in classes) {
$(classes[i]).addClass('lightup');
}
}
function toggle_sec() {
if ($('.sec').hasClass('seclightup')) {
$('.sec').removeClass('seclightup')
} else {
$('.sec').addClass('seclightup')
}
}
function check_time() {
var classes = ['.it_is']
toggle_sec();
var date = new Date();
var hours = date.getHours()%12;
if (hours==0) hours = 12;
var minutes = date.getMinutes()-(date.getMinutes()%5);
if (date.getMinutes()%5 > 2) minutes = minutes + 5;
if (minutes == 60) { minutes = 0; hours = hours+1;}
// stupid switch logic...
if (minutes == 0) {
// o'clock!
classes.push('.'+hours);
classes.push('.oclock');
} else if (minutes == 30) {
// half past
classes.push('.'+hours);
classes.push('.half');
classes.push('.past');
} else if (minutes == 15) {
// quarter past
classes.push('.'+hours);
classes.push('.past');
classes.push('.quarter');
} else if (minutes == 45) {
// quarter to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.quarter');
classes.push('.to');
} else if (minutes < 30) {
// X past
classes.push('.'+hours);
classes.push('.'+minutes+'to');
classes.push('.past');
classes.push('.minutes');
} else if (minutes > 30) {
// X to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.'+(60-minutes)+'to');
classes.push('.to');
classes.push('.minutes');
}
render_time(classes);
}
setInterval(check_time, 1000);
});
</script>
Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<div id="clock">
<span class="it_is lightup">it</span>r<span class="it_is lightup">is</span>u<span class="half">half</span><span class="10to 10past">ten</span><br>
<span class="quarter">quarter</span><span class="20to 25to lightup">twenty</span><br>
<span class="25to 5to">five</span>q<span class="minutes lightup">minutes</span>t<br>
<span class="past lightup">past</span>gumuz<span class="to">to</span>ne<br>
<span class="1">one</span>n<span class="2">two</span>z<span class="3">three</span><br>
<span class="4">four</span><span class="5">five</span><span class="7">seven</span><br>
<span class="6">six</span><span class="8 lightup">eight</span>y<span class="9">nine</span><br>
<span class="10">ten</span><span class="11">eleven</span><span class="sec">♥</span>sec<br>
<span class="12">twelve</span><span class="oclock">o'clock</span><br>
</div>
Các hiệu ứng tương tự
- Tạo một bộ bật/tắt đơn giản với JavaScript (http://www.javascriptbank.com/how-to-toggle-elements-with-javascript.html/vi/)
- Vài chỉnh sửa vui nhộn trên Facebook với JavaScript (http://www.javascriptbank.com/some-funny-modifications-on-facebook-with-javascript.html/vi/)
- Cách tạo một bộ đếm ngược thời gian đơn giản với JavaScript (http://www.javascriptbank.com/how-to-create-a-simple-javascript-countdown-timer.html/vi/)
Một vài nhãn tương tự: đồng hồ đọc giờ (http://www.javascriptbank.com/vi+tag=đồng hồ đọc giờ), báo giờ (http://www.javascriptbank.com/vi+tag=báo giờ), năm phút (http://www.javascriptbank.com/vi+tag=năm phút), hoạt động (http://www.javascriptbank.com/vi+tag=hoạt động), độc đáo (http://www.javascriptbank.com/vi+tag=độc đáo), từ ngữ (http://www.javascriptbank.com/vi+tag=từ ngữ)
Bạn có thể xem thêm nhiều JavaScript khác về Framework (http://www.javascriptbank.com/javascript/framework/vi/) và jQuery (http://www.javascriptbank.com/javascript/framework/jquery/vi/)
Code trình diễn ảnh (http://www.javascriptbank.com/javascript/image/slideshow/) - Các hiệu ứng chuột trong JavaScipt (http://www.javascriptbank.com/javascript/mouse/) - Game tìm 2 hình giống nhau (http://www.javascriptbank.com/concentration-smaller-index.html/vi/)
http://www.javascriptbank.com/javascript.images/framework/javascript-word-clock-spell-the-time.jpg (http://www.javascriptbank.com/javascript/framework/jquery/javascript-word-clock-spell-the-time/preview/vi/)
Demo: JavaScript Đồng hồ đọc giờ với JavaScript (http://www.javascriptbank.com/javascript-word-clock-spell-the-time.html/vi/)
| JavaScript JavaScript Word Clock: Spell the Time (http://www.javascriptbank.com/javascript-word-clock-spell-the-time.html)
Cách cài đặt
Bước 1: Đặt mã CSS bên dưới vào phần HEAD
CSS
<style>
body {
background-color: #111;
}
div#clock {
font-size: 50px;
font-family: monospace;
color: #222;
text-align: center;
}
.lightup {
color: #EEE;
}
.seclightup {
color: #EEE;
}
.gumuz {
color: #333;
}
</style>
Bước 2: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.setOnLoadCallback(function() {
function render_time(classes) {
// reset
$('span').removeClass('lightup');
//toggle_sec();
for (var i in classes) {
$(classes[i]).addClass('lightup');
}
}
function toggle_sec() {
if ($('.sec').hasClass('seclightup')) {
$('.sec').removeClass('seclightup')
} else {
$('.sec').addClass('seclightup')
}
}
function check_time() {
var classes = ['.it_is']
toggle_sec();
var date = new Date();
var hours = date.getHours()%12;
if (hours==0) hours = 12;
var minutes = date.getMinutes()-(date.getMinutes()%5);
if (date.getMinutes()%5 > 2) minutes = minutes + 5;
if (minutes == 60) { minutes = 0; hours = hours+1;}
// stupid switch logic...
if (minutes == 0) {
// o'clock!
classes.push('.'+hours);
classes.push('.oclock');
} else if (minutes == 30) {
// half past
classes.push('.'+hours);
classes.push('.half');
classes.push('.past');
} else if (minutes == 15) {
// quarter past
classes.push('.'+hours);
classes.push('.past');
classes.push('.quarter');
} else if (minutes == 45) {
// quarter to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.quarter');
classes.push('.to');
} else if (minutes < 30) {
// X past
classes.push('.'+hours);
classes.push('.'+minutes+'to');
classes.push('.past');
classes.push('.minutes');
} else if (minutes > 30) {
// X to
if (hours==12) hours = 0;
classes.push('.'+(hours+1));
classes.push('.'+(60-minutes)+'to');
classes.push('.to');
classes.push('.minutes');
}
render_time(classes);
}
setInterval(check_time, 1000);
});
</script>
Bước 3: Copy mã HTML bên dưới và dán vào khu vực BODY trên trang web của bạn
HTML
<div id="clock">
<span class="it_is lightup">it</span>r<span class="it_is lightup">is</span>u<span class="half">half</span><span class="10to 10past">ten</span><br>
<span class="quarter">quarter</span><span class="20to 25to lightup">twenty</span><br>
<span class="25to 5to">five</span>q<span class="minutes lightup">minutes</span>t<br>
<span class="past lightup">past</span>gumuz<span class="to">to</span>ne<br>
<span class="1">one</span>n<span class="2">two</span>z<span class="3">three</span><br>
<span class="4">four</span><span class="5">five</span><span class="7">seven</span><br>
<span class="6">six</span><span class="8 lightup">eight</span>y<span class="9">nine</span><br>
<span class="10">ten</span><span class="11">eleven</span><span class="sec">♥</span>sec<br>
<span class="12">twelve</span><span class="oclock">o'clock</span><br>
</div>
Các hiệu ứng tương tự
- Tạo một bộ bật/tắt đơn giản với JavaScript (http://www.javascriptbank.com/how-to-toggle-elements-with-javascript.html/vi/)
- Vài chỉnh sửa vui nhộn trên Facebook với JavaScript (http://www.javascriptbank.com/some-funny-modifications-on-facebook-with-javascript.html/vi/)
- Cách tạo một bộ đếm ngược thời gian đơn giản với JavaScript (http://www.javascriptbank.com/how-to-create-a-simple-javascript-countdown-timer.html/vi/)
Một vài nhãn tương tự: đồng hồ đọc giờ (http://www.javascriptbank.com/vi+tag=đồng hồ đọc giờ), báo giờ (http://www.javascriptbank.com/vi+tag=báo giờ), năm phút (http://www.javascriptbank.com/vi+tag=năm phút), hoạt động (http://www.javascriptbank.com/vi+tag=hoạt động), độc đáo (http://www.javascriptbank.com/vi+tag=độc đáo), từ ngữ (http://www.javascriptbank.com/vi+tag=từ ngữ)
Bạn có thể xem thêm nhiều JavaScript khác về Framework (http://www.javascriptbank.com/javascript/framework/vi/) và jQuery (http://www.javascriptbank.com/javascript/framework/jquery/vi/)
Code trình diễn ảnh (http://www.javascriptbank.com/javascript/image/slideshow/) - Các hiệu ứng chuột trong JavaScipt (http://www.javascriptbank.com/javascript/mouse/) - Game tìm 2 hình giống nhau (http://www.javascriptbank.com/concentration-smaller-index.html/vi/)