Deathly Smile
New Member
Lâu lắm ko vào, ủng hộ anh em 1 bài
------------------
Tớ mới tạo đc cái JS làm đồng hồ chạy theo giờ Server, chia sẻ với mọi người cho sướng (thực ra thì ý tưởng bắt đầu từ khi muốn có cái JS để đếm ngược số phút còn lại -> làm xong -> thấy chưa chi tiết lắm -> làm luôn cả H, phút, giây cho hoành tráng )
* Lời mở đầu: đồng hồ JS thì ko có gì mới nhưng cái tớ sắp giới thiệu thì khác. Thứ nhất mới là vì tớ vừa mới làm đc sau khi "master" đc cái hàm SetTimeout())
Thứ hai là các đồng hồ JS mà tớ thấy thì đều lấy H local (của máy tinh) dựa vào hàm date chứ ko phải dựa vào H máy chủ như của tớ.
Thứ ba là vì tớ thấy để viết đc mấy dòng code này tớ đã phải mất khá nhiều nơron nên phải chi sẻ cho nó bõ công (trước khi ai đấy viewsource rồi thịt mất ) vả lại lâu ko viết TUT, cũng ngứa ngáy
Thứ tư là với JS tớ là Newbie of Beginner ( ) nên ko giấu dốt mà chia sẻ để ai có kiến thức ngon hơn thì góp ý, chia sẻ.
Sau đây xin giới thiệu "Đồng hồ tính theo H Server"
Đoạn mã JS như sau
Đoạn mã HTML hiển thị sẽ như sau
Gọi thủ tục hiển thị H bằng cách cho vào onload của <body> (<body onload="showTime(Gia_tri_TimeStamp_lay_tu_Server)">) hoặc gọi trực tiếp "<script language="javascript" type="text/javascript">showTime(Gia_tri_TimeStamp_lay_tu_Server)</script>
Gia_tri_TimeStamp_lay_tu_Server là gì thì điền dấu vào là hiểu
Mỗi ngôn ngữ khác nhau có cách lấy TimeStamp khác nhau. Và lưu ý function trên sử dụng TimeStamp để tính h.
Thời gian hiển thị thay đổi liên tục mỗi giây là nhờ sử dụng truy hồi sau mỗi 1 giây setTimeout("showTime("+timeStamp+")",1000)
Thời gian timeout tính theo mili giây.
Giá trị đc cập nhật hiển thị ra màn hình (trên trang html) sử dụng document.all.tenID.innerHTML với tenID là giá trị id của vị trí dữ liệu sẽ hiển thị.
timeStamp++ để tăng giá trị timeStamp lên 1 tương ứng với 1s đồng hồ đếm thêm.
Như vậy, ngoài việc hiển thị đồng hồ của server, bạn có thể thay đổi 1 chút để có đc đồng hồ đếm ngược với timeStamp cho trước khi giảm giá trị timeStamp đi 1 mỗi 1s (timeStamp--) (Lưu ý là khi đếm ngược sẽ có lúc giá trị timeStamp=0 và bạn cần 1 câu ĐK để thực hiện 1 điều gì đó trước khi đồng hồ của bạn bị ... hâm )
Đến đây xin kết thúc con TUT mới này với mong mỏi nhận đc ý kiến đóng góp chân thành mặc dù nó đơn giản vãi lúa
Xin lưu ý đây là cách do tớ nghĩ ra với việc sử dung hàm setTimeOut() với mấy phép toán đơn giản để tính H, phút, giây từ số giây cho trước (timeStamp) chứ ko hề sử dụng đến các thủ tục có sẵn của JS về time và date. Nếu bạn nào có cách hay hơn phục vụ cùng 1 mục đích thì đừng quên chia sẻ
----------------------------
Tớ copy & paste ko sửa đổi từ cái TUT viết cho thành viên chỗ tớ "ở", có thể ko hợp với nhiều người, tập trung vào code thôi nhé
P/s: box này ít bài quá hay sao mà phải để lắm cái CHÚ Ý thế ?
------------------
Tớ mới tạo đc cái JS làm đồng hồ chạy theo giờ Server, chia sẻ với mọi người cho sướng (thực ra thì ý tưởng bắt đầu từ khi muốn có cái JS để đếm ngược số phút còn lại -> làm xong -> thấy chưa chi tiết lắm -> làm luôn cả H, phút, giây cho hoành tráng )
* Lời mở đầu: đồng hồ JS thì ko có gì mới nhưng cái tớ sắp giới thiệu thì khác. Thứ nhất mới là vì tớ vừa mới làm đc sau khi "master" đc cái hàm SetTimeout())
Thứ hai là các đồng hồ JS mà tớ thấy thì đều lấy H local (của máy tinh) dựa vào hàm date chứ ko phải dựa vào H máy chủ như của tớ.
Thứ ba là vì tớ thấy để viết đc mấy dòng code này tớ đã phải mất khá nhiều nơron nên phải chi sẻ cho nó bõ công (trước khi ai đấy viewsource rồi thịt mất ) vả lại lâu ko viết TUT, cũng ngứa ngáy
Thứ tư là với JS tớ là Newbie of Beginner ( ) nên ko giấu dốt mà chia sẻ để ai có kiến thức ngon hơn thì góp ý, chia sẻ.
Sau đây xin giới thiệu "Đồng hồ tính theo H Server"
Đoạn mã JS như sau
Mã:
<script language="javascript" type="text/javascript">
<!--
function showTime(timeStamp)
{
timeStamp++
hour = Math.floor(timeStamp/3600)%24
document.all.timeLeft_hour.innerHTML = hour
min = Math.floor(timeStamp/60)%60
if(min < 10) min = '0'+min
document.all.timeLeft_min.innerHTML = min
sec = timeStamp%60
if(sec < 10) sec = '0'+sec
document.all.timeLeft_sec.innerHTML = sec
setTimeout("showTime("+timeStamp+")",1000)
}
//-->
</script>
Mã:
Current Time is <b><span id="timeLeft_hour"></span>:<span id="timeLeft_min"></span>:<span id="timeLeft_sec"></span></b>Gia_tri_TimeStamp_lay_tu_Server là gì thì điền dấu vào là hiểu
Mỗi ngôn ngữ khác nhau có cách lấy TimeStamp khác nhau. Và lưu ý function trên sử dụng TimeStamp để tính h.
* Cơ cấu hoạt động
Thời gian hiển thị thay đổi liên tục mỗi giây là nhờ sử dụng truy hồi sau mỗi 1 giây setTimeout("showTime("+timeStamp+")",1000)
Thời gian timeout tính theo mili giây.
Giá trị đc cập nhật hiển thị ra màn hình (trên trang html) sử dụng document.all.tenID.innerHTML với tenID là giá trị id của vị trí dữ liệu sẽ hiển thị.
timeStamp++ để tăng giá trị timeStamp lên 1 tương ứng với 1s đồng hồ đếm thêm.
Như vậy, ngoài việc hiển thị đồng hồ của server, bạn có thể thay đổi 1 chút để có đc đồng hồ đếm ngược với timeStamp cho trước khi giảm giá trị timeStamp đi 1 mỗi 1s (timeStamp--) (Lưu ý là khi đếm ngược sẽ có lúc giá trị timeStamp=0 và bạn cần 1 câu ĐK để thực hiện 1 điều gì đó trước khi đồng hồ của bạn bị ... hâm )
Đến đây xin kết thúc con TUT mới này với mong mỏi nhận đc ý kiến đóng góp chân thành mặc dù nó đơn giản vãi lúa
Xin lưu ý đây là cách do tớ nghĩ ra với việc sử dung hàm setTimeOut() với mấy phép toán đơn giản để tính H, phút, giây từ số giây cho trước (timeStamp) chứ ko hề sử dụng đến các thủ tục có sẵn của JS về time và date. Nếu bạn nào có cách hay hơn phục vụ cùng 1 mục đích thì đừng quên chia sẻ
----------------------------
Tớ copy & paste ko sửa đổi từ cái TUT viết cho thành viên chỗ tớ "ở", có thể ko hợp với nhiều người, tập trung vào code thôi nhé
P/s: box này ít bài quá hay sao mà phải để lắm cái CHÚ Ý thế ?
