JavaScriptBank
23-12-2009, 06:21 PM
Hiệu ứng sẽ hiển thị thời gian (http://www.javascriptbank.com/javascript/time/) của một số thành phố trên thế giới với cách thức khá lạ mắt. Hiệu ứng sẽ hiển thị giây ch�... chi tiết (http://www.javascriptbank.com/world-clock-with-unique-display.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)
http://www.javascriptbank.com/javascript.images/time/world-clock-with-unique-display.jpg (http://www.javascriptbank.com/javascript/time/clock-time-date/world-clock-with-unique-display/preview/vi/)
Demo: JavaScript Thời gian của thế giới (http://www.javascriptbank.com/world-clock-with-unique-display.html/vi/)
| JavaScript World clock with unique display (http://www.javascriptbank.com/world-clock-with-unique-display.html)
Cách cài đặt
Bước 1: Mã CSS bên dưới dùng cho định dạng hiệu ứng, hãy copy nó vào phần HEAD của web
CSS
<STYLE>
.topcoverlay {
BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px
}
.bottomcoverlay {
BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px
}
</STYLE>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 2: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -
var startpos=240
var bildhoehe=720
var step=3
var makepause=200
var difference=0
var local=1
var timer
function showtimelocal() {
if (local==1) {
var thistime= new Date()
var seconds=thistime.getSeconds()
var minutes=thistime.getMinutes()
var hours=thistime.getHours()
if (hours>=24) {hours=hours-24}
var secondspos=Math.floor(bildhoehe/60*seconds)
var minutespos=Math.floor(bildhoehe/60*minutes)
var hourspos=Math.floor(bildhoehe/60*hours)
if(document.all) {
document.all.secondsdiv.style.posTop=startpos-secondspos
document.all.minutesdiv.style.posTop=startpos-minutespos
document.all.hoursdiv.style.posTop=startpos-hourspos
}
if(document.layers) {
document.secondsdiv.top=startpos-secondspos
document.minutesdiv.top=startpos-minutespos
document.hoursdiv.top=startpos-hourspos
}
var timer=setTimeout("showtimelocal()",makepause)
}
else {
clearTimeout(timer)
}
}
function preUTC(thisdifference) {
clearTimeout(timer)
difference=eval(thisdifference)
local=0
showtimeUTC()
}
function inititate() {
if (document.layers) {
document.markernetscape1.visibility="VISIBLE"
document.markernetscape2.visibility="VISIBLE"
}
showtimelocal()
}
function prelocal() {
if (document.layers) {document.markernetscape.visibility="VISIBLE"}
clearTimeout(timer)
local=1
showtimelocal()
}
function showtimeUTC() {
if (local==0) {
var thistime= new Date()
var seconds=thistime.getSeconds()
var minutes=thistime.getMinutes()
var hours=thistime.getUTCHours()
hours+=difference
if (hours>=24) {hours=hours-24}
var secondspos=Math.floor(bildhoehe/60*seconds)
var minutespos=Math.floor(bildhoehe/60*minutes)
var hourspos=Math.floor(bildhoehe/60*hours)
if(document.all) {
document.all.secondsdiv.style.posTop=startpos-secondspos
document.all.minutesdiv.style.posTop=startpos-minutespos
document.all.hoursdiv.style.posTop=startpos-hourspos
}
if(document.layers) {
document.secondsdiv.top=startpos-secondspos
document.minutesdiv.top=startpos-minutespos
document.hoursdiv.top=startpos-hourspos
}
var timer=setTimeout("showtimeUTC()",makepause)
}
else {
clearTimeout(timer)
}
}
window.onload=inititate
// - End of JavaScript - -->
</SCRIPT>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
<IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute">
<IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px">
<IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV class=topcoverlay id=topcover></DIV>
<DIV class=bottomcoverlay id=bottomcover></DIV>
<DIV id=limiter1
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px">
:</DIV>
<DIV id=limiter2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px">
:</DIV>
<DIV id=markernetscape1
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=1 src="line2930.gif" width=20></DIV>
<DIV id=markernetscape2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=1 src="js 46_files/line2930.gif" width=20></DIV>
<DIV id=timezones
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A
href="#"
onmouseover=prelocal()>>> local time</A><BR><A
href="#"
onmouseover="preUTC('-8')">Anchorage</A><BR><A
href="#"
onmouseover="preUTC('-11')">Auckland</A><BR><A
href="#"
onmouseover="preUTC('3')">Baghdad</A><BR><A
href="#"
onmouseover="preUTC('8')">Bejing</A><BR><A
href="#"
onmouseover="preUTC('-3')">Buenos Aires</A><BR><A
href="#"
onmouseover="preUTC('-6')">Denver</A><BR><A
href="#"
onmouseover="preUTC('8')">Hongkong</A><BR><A
href="#"
onmouseover="preUTC('-9')">Honolulu</A><BR><A
href="#"
onmouseover="preUTC('8')">Jakarta</A><BR><A
href="#"
onmouseover="preUTC('2')">Johannesburg</A><BR><A
href="#"
onmouseover="preUTC('2')">Kairo</A><BR><A
href="#"
onmouseover="preUTC('-5')">Lima</A><BR><A
href="#"
onmouseover="preUTC('1')">London</A><BR><A
href="#"
onmouseover="preUTC('-7')">Los Angeles</A><BR><A
href="#"
onmouseover="preUTC('4')">Moscow</A><BR><A
href="#"
onmouseover="preUTC('3')">Nairobi</A><BR><A
href="#"
onmouseover="preUTC('-4')">New York</A><BR><A
href="#"
onmouseover="preUTC('2')">Paris</A><BR><A
href="#"
onmouseover="preUTC('-2')">Rio</A><BR><A
href="#"
onmouseover="preUTC('10')">Sydney</A><BR><A
href="#"
onmouseover="preUTC('9')">Tokyo</A><BR></DIV>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 4: các file cần tải
Files
rotaclock2930.gif (http://javascriptbank.com/javascript/time/rotaclock2930.gif)
Bạn có thể xem các mã tương tự bên dưới
- Thời gian các nơi (so với Nhật) (http://www.javascriptbank.com/global-time-zone-japan.html/vi/)
- Chuyển trang với khoảng thời gian (http://www.javascriptbank.com/dynamic-timed-redirect.html/vi/)
- Thời gian ở trên trang web (http://www.javascriptbank.com/time-spent-on-page.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Thời gian (http://www.javascriptbank.com/javascript/time/vi/) và Đồng hồ (http://www.javascriptbank.com/javascript/time/clock-time-date/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/time/world-clock-with-unique-display.jpg (http://www.javascriptbank.com/javascript/time/clock-time-date/world-clock-with-unique-display/preview/vi/)
Demo: JavaScript Thời gian của thế giới (http://www.javascriptbank.com/world-clock-with-unique-display.html/vi/)
| JavaScript World clock with unique display (http://www.javascriptbank.com/world-clock-with-unique-display.html)
Cách cài đặt
Bước 1: Mã CSS bên dưới dùng cho định dạng hiệu ứng, hãy copy nó vào phần HEAD của web
CSS
<STYLE>
.topcoverlay {
BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 240px; LEFT: 0px; POSITION: absolute; TOP: 0px; WIDTH: 1000px
}
.bottomcoverlay {
BACKGROUND-COLOR: #ffffff; FILTER: alpha(opacity=85); HEIGHT: 1000px; LEFT: 0px; POSITION: absolute; TOP: 253px; WIDTH: 1000px
}
</STYLE>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 2: Đặt mã JavaScript bên dưới vào phần HEAD
JavaScript
<SCRIPT language=JavaScript>
<!-- Beginning of JavaScript -
var startpos=240
var bildhoehe=720
var step=3
var makepause=200
var difference=0
var local=1
var timer
function showtimelocal() {
if (local==1) {
var thistime= new Date()
var seconds=thistime.getSeconds()
var minutes=thistime.getMinutes()
var hours=thistime.getHours()
if (hours>=24) {hours=hours-24}
var secondspos=Math.floor(bildhoehe/60*seconds)
var minutespos=Math.floor(bildhoehe/60*minutes)
var hourspos=Math.floor(bildhoehe/60*hours)
if(document.all) {
document.all.secondsdiv.style.posTop=startpos-secondspos
document.all.minutesdiv.style.posTop=startpos-minutespos
document.all.hoursdiv.style.posTop=startpos-hourspos
}
if(document.layers) {
document.secondsdiv.top=startpos-secondspos
document.minutesdiv.top=startpos-minutespos
document.hoursdiv.top=startpos-hourspos
}
var timer=setTimeout("showtimelocal()",makepause)
}
else {
clearTimeout(timer)
}
}
function preUTC(thisdifference) {
clearTimeout(timer)
difference=eval(thisdifference)
local=0
showtimeUTC()
}
function inititate() {
if (document.layers) {
document.markernetscape1.visibility="VISIBLE"
document.markernetscape2.visibility="VISIBLE"
}
showtimelocal()
}
function prelocal() {
if (document.layers) {document.markernetscape.visibility="VISIBLE"}
clearTimeout(timer)
local=1
showtimelocal()
}
function showtimeUTC() {
if (local==0) {
var thistime= new Date()
var seconds=thistime.getSeconds()
var minutes=thistime.getMinutes()
var hours=thistime.getUTCHours()
hours+=difference
if (hours>=24) {hours=hours-24}
var secondspos=Math.floor(bildhoehe/60*seconds)
var minutespos=Math.floor(bildhoehe/60*minutes)
var hourspos=Math.floor(bildhoehe/60*hours)
if(document.all) {
document.all.secondsdiv.style.posTop=startpos-secondspos
document.all.minutesdiv.style.posTop=startpos-minutespos
document.all.hoursdiv.style.posTop=startpos-hourspos
}
if(document.layers) {
document.secondsdiv.top=startpos-secondspos
document.minutesdiv.top=startpos-minutespos
document.hoursdiv.top=startpos-hourspos
}
var timer=setTimeout("showtimeUTC()",makepause)
}
else {
clearTimeout(timer)
}
}
window.onload=inititate
// - End of JavaScript - -->
</SCRIPT>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 3: Đặt mã HTML bên dưới vào phần BODY
HTML
<DIV id=secondsdiv style="LEFT: 200px; POSITION: absolute; TOP: 240px">
<IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=minutesdiv style="LEFT: 180px; POSITION: absolute">
<IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV id=hoursdiv style="LEFT: 160px; POSITION: absolute; TOP: 240px">
<IMG
src="rotaclock2930.gif" width="14" height="720"></DIV>
<DIV class=topcoverlay id=topcover></DIV>
<DIV class=bottomcoverlay id=bottomcover></DIV>
<DIV id=limiter1
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 176px; POSITION: absolute; TOP: 241px">
:</DIV>
<DIV id=limiter2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; FONT-WEIGHT: bold; LEFT: 196px; POSITION: absolute; TOP: 241px">
:</DIV>
<DIV id=markernetscape1
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 122px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=1 src="line2930.gif" width=20></DIV>
<DIV id=markernetscape2
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 12pt; FONT-WEIGHT: bold; LEFT: 230px; POSITION: absolute; TOP: 248px; VISIBILITY: hidden"><IMG
height=1 src="js 46_files/line2930.gif" width=20></DIV>
<DIV id=timezones
style="COLOR: #ff0000; FONT-FAMILY: Arial; FONT-SIZE: 8pt; LEFT: 10px; POSITION: absolute; TOP: 5px"><A
href="#"
onmouseover=prelocal()>>> local time</A><BR><A
href="#"
onmouseover="preUTC('-8')">Anchorage</A><BR><A
href="#"
onmouseover="preUTC('-11')">Auckland</A><BR><A
href="#"
onmouseover="preUTC('3')">Baghdad</A><BR><A
href="#"
onmouseover="preUTC('8')">Bejing</A><BR><A
href="#"
onmouseover="preUTC('-3')">Buenos Aires</A><BR><A
href="#"
onmouseover="preUTC('-6')">Denver</A><BR><A
href="#"
onmouseover="preUTC('8')">Hongkong</A><BR><A
href="#"
onmouseover="preUTC('-9')">Honolulu</A><BR><A
href="#"
onmouseover="preUTC('8')">Jakarta</A><BR><A
href="#"
onmouseover="preUTC('2')">Johannesburg</A><BR><A
href="#"
onmouseover="preUTC('2')">Kairo</A><BR><A
href="#"
onmouseover="preUTC('-5')">Lima</A><BR><A
href="#"
onmouseover="preUTC('1')">London</A><BR><A
href="#"
onmouseover="preUTC('-7')">Los Angeles</A><BR><A
href="#"
onmouseover="preUTC('4')">Moscow</A><BR><A
href="#"
onmouseover="preUTC('3')">Nairobi</A><BR><A
href="#"
onmouseover="preUTC('-4')">New York</A><BR><A
href="#"
onmouseover="preUTC('2')">Paris</A><BR><A
href="#"
onmouseover="preUTC('-2')">Rio</A><BR><A
href="#"
onmouseover="preUTC('10')">Sydney</A><BR><A
href="#"
onmouseover="preUTC('9')">Tokyo</A><BR></DIV>
<!--
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
-->
Bước 4: các file cần tải
Files
rotaclock2930.gif (http://javascriptbank.com/javascript/time/rotaclock2930.gif)
Bạn có thể xem các mã tương tự bên dưới
- Thời gian các nơi (so với Nhật) (http://www.javascriptbank.com/global-time-zone-japan.html/vi/)
- Chuyển trang với khoảng thời gian (http://www.javascriptbank.com/dynamic-timed-redirect.html/vi/)
- Thời gian ở trên trang web (http://www.javascriptbank.com/time-spent-on-page.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Thời gian (http://www.javascriptbank.com/javascript/time/vi/) và Đồng hồ (http://www.javascriptbank.com/javascript/time/clock-time-date/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/)