นาฬิกาเวลา จาก server อย่างง่าย
07 September 2011 เป็นลูกเล่นสำหรับเอาไปตกแต่งเว็บ เมื่อก่อนเห็นตามเว็บต่างๆ บ่อย แต่เดี๋ยวนี้ไม่ค่อยนิยม หันไปใช้นาฬิกาสวยๆ จาก flash
เอามาแนะนำเผื่อใครสนใจนำไปใช้งาน รูปแบบการทำงาน คือดึงเวลาจาก server เป็นเวลาตั้งต้น จากนั้นเวลาก็จะเดินไปเรื่อย
ตัวอย่างโค้ดทั้งหมด
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="css_time_run">
<?=date("H:i:s")?>
</div>
<br />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
var nowDateTime=new Date("<?=date("m/d/Y H:i:s")?>");
var d=nowDateTime.getTime();
var mkHour,mkMinute,mkSecond;
setInterval(function(){
d=parseInt(d)+1000;
var nowDateTime=new Date(d);
mkHour=new String(nowDateTime.getHours());
if(mkHour.length==1){
mkHour="0"+mkHour;
}
mkMinute=new String(nowDateTime.getMinutes());
if(mkMinute.length==1){
mkMinute="0"+mkMinute;
}
mkSecond=new String(nowDateTime.getSeconds());
if(mkSecond.length==1){
mkSecond="0"+mkSecond;
}
var runDateTime=mkHour+":"+mkMinute+":"+mkSecond;
$("#css_time_run").html(runDateTime);
},1000);
});
</script>
</body>
</html>
ตัวอย่าง
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
09 Nov 11 แนวทางการสร้างเมนูหลายภาษา อย่างง่ายด้วย php และ javascript อ่าน 1205 08 Feb 11 แท็บเมนู tab menu แนวตั้งอย่างง่าย ด้วย jQuery อ่าน 4115 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 7993 28 Oct 10 เริ่มต้นใช้งาน jquery ui autocomplete อย่างง่าย อ่าน 3462 18 Mar 09 เพิ่มลดขนาดตัวอักษรในหน้าเว็บแบบง่ายด้วย jQuery อ่าน 3155 25 Sep 08 Code เกี่ยวกับ การหาวันข้างหน้า อ่าน 1904 07 Sep 11 นาฬิกาเวลา จาก server อย่างง่าย อ่าน 1011 12 Nov 09 รู้จักกับ Ajax Events ใน jQuery อ่าน 4288 03 Feb 11 การใช้งาน character classes ใน Regular Expressions ของ PHP อ่าน 1329 19 Nov 10 ทางเลือก อัพโหลดไฟล์ใน ckeditor ด้วย ajax file manager อ่าน 2244 06 Dec 11 การใช้งาน css จัดตำแหน่ง ซ้อนข้อความบนรูปภาพอย่างง่าย อ่าน 967 08 Oct 08 คำสั่ง SQL DISTINCT อ่าน 4956 05 Nov 09 เช็ค บราวเซอร์ Browser ด้วย php อย่างง่าย อ่าน 2309 03 Sep 10 จัดรูปแบบ url ลิ้งค์ link ด้วย เทคนิค php ได้อย่างง่าย อ่าน 2537 16 Jul 11 แทรก +1 button ในเว็บจาก google plus อ่าน 1037 31 Aug 10 เทคนิค php ใช้ fgets และ javascript วนลูป loop อ่านไฟล์ ขนาดใหญ่ อ่าน 1648 21 Apr 10 สร้างเส้นทาง เพื่อ หาระยะทาง ใน google map ด้วย jQuery อ่าน 7528 13 Oct 08 คำสั่ง SQL ORDER BY อ่าน 7547 06 Sep 10 ประยุกต์ การ invite friends ใน facebook มาใช้งาน อ่าน 3370 13 Sep 10 ประยุกต์ สร้างเครื่องมือ ค้นหา พิกัด จากชื่อสถานที่ จำนวนมาก ใน google map อ่าน 1899