บทเรียนพิเศษ 35 เกี่ยวกับเวลา อดีต ปัจจุบัน อนาคต

 

บทเรียนพิเศษ 35 เกี่ยวกับเวลา อดีต ปัจจุบัน อนาคต

Sat Aug 20 10:29:22 UTC+0700 2011

                    ด้านบนนี้เป็นค่าเวลาปัจจุบันในตอนที่คุณเปิดเข้ามา ตรงที่ UTC+0700 นั้นหมายความว่า เวลาบ้านเรา(ประเทศไทย) ห่างจากเวลามาตรฐานสากล 7 ชั่วโมง บรรทัดข้างบนนั้นได้จากโค้ดง่ายๆดังนี้...

<center><script language="javascript">
document.write(new Date())</script></center>

                    โอ้หลายคนคงคิดไม่ถึงรึเปล่าครับว่า ทำไมโค้ดถึงง่ายเพียงนี้ และทำไมผมไม่เอาไปลงในบทเรียนที่ 3 เพราะตอนนั้นเป็นตอนที่ทำเว็บใหม่(ตอนแรกเว็บนี้มีแต่หัวข้อจาวาสคริป) และผมยังไม่รู้ครับ ว่า new Date() เดี่ยวๆจะใช้ได้ผล แต่ไม่ได้ใช้อยู่ได้แค่นี้นะครับ คุณสามารถกำหนดเวลาเข้าไปในวงเล็บของ new Date() ได้
ยกตัวอย่างเช่น คุณใช้ new Date(2004,11,20) ก็จะได้ผลตามนี้ครับ...

Mon Dec 20 00:00:00 UTC+0700 2004

                    ในวงเล็บ เลขแรก(2004)คือเลขปี ค.ศ.   เลขที่สอง(11)คือเลขเดือน   เลขที่สาม(20)คือเลขวัน จะเห็นว่าที่แสดงออกมา Dec จะหมายถึง December ที่แปลว่าเดือนธันวาคม ซึ่งตรงกับเลขเดือนที่เรากำหนดไป(11 ...คอมนับเดือนมกราคมเป็นเลข 0) ลองเปิดปฏิทินดูก็ได้ครับ ว่าเป็นวันจันทร์(Mon)รึเปล่า ตรงเลข 00:00:00 เป็นเลขชั่วโมง:นาที:วินาที ซึ่งสามารถกำหนดได้ แต่ผมไม่ได้กำหนดไว้ครับ รูปแบบเต็มๆของการกำหนดเวลาจะเป็นดังนี้ครับ...(ผมไม่ขอแสดงตัวอย่างครับ ลองทำดูเอาเองได้)

new Date(ปี,เดือน,วัน,ชั่วโมง,นาที,วินาที,มิลลิวินาที)

                    แต่รูปที่แสดงผลออกมานั้นยากแก่การนำไปใช้จึงมีการเรียกค่าเวลาต่างๆ เหมือนกับที่ทำในบทที่ 3 แต่ยังมีการเรียกค่าอีกอย่างที่ยังไม่กล่าวถึงครับนั่นคือ new Date().getTime() ซึ่งจะแสดงค่าเวลาในหน่วยมิลลิวินาที โดยนับเวลาจากเจ็ดโมงเช้าของวันที่ 1 เดือนมกราคม ค.ศ. 1970 เลขด้านล่างที่อยู่ในหลักล้านล้าน จึงเป็นผลของการเรียกค่านี้ในตอนที่คุณเปิดเข้ามาครับ...

1313810963218

                    หากคุณไม่เชื่อว่า เลขข้างบนนี้คิดมาจากเวลาที่ว่านั้นจริงๆ ลองใช้ new Date(1970,0,1,7).getTime() แล้วคุณก็จะพบว่าเลขนั้นคือ...(ไม่เฉลยครับท่าน!) หากคุณใช้ new Date( 1313810963218) หรือเลขอื่นๆก็จะได้ค่าเวลาในตอนนั้นเช่นกันครับ ...... เอ่อ ดูไร้สาระอยู่มั้ยครับ ผมคิดอย่างนั้นตอนแรกที่ผม รู้วิธีพวกนี้ แต่ผมก็ได้พยายามเอามาใช้ จนได้นาฬิกาจับเวลาพร้อมโค้ดแบบนี้ครับ...

<a style="cursor:hand;color:blue" onmousedown=
"t1=new Date().getTime()
p=setInterval('t2=new Date().getTime();t3=(t2-t1)/1000;'+
'u.innerHTML=t3;if(t3>=5){clearTimeout(p)}',10)">
กดที่นี่เพื่อนับ 0 ถึง 5 วินาที</a><br>
<a id="u"></a>

                    หากคุณได้ค่าเวลาเกิน 5 วินาทีมาหน่อย แสดงว่าเครื่องของคุณกำลังเปิดหลายๆโปรแกรมอยู่โปรแกรม หรือไม่ก็ใช้เครื่องคอมฯอายุมาก(มั้ง)ครับ เพราะประมวลคำสั่งช้า จนหลุดเกินมา เมื่อคุณกดที่ข้อความ t1 จะแทนค่าเวลา ณ ตอนที่กดนั้น ซึ่งจะถูกเก็บไว้ในความจำของคอม   ค่าเวลา t2 จะถูกดึงออกมาใหม่เสมอทุกๆ 10 มิลลิวินาที(หากใช้คอมเก่า การประมวลผลจริงๆจะอยู่ที่ประมาณ 50 มิลลิวินาที) และนำมาหักเวลาจากที่ได้ตอนแรก(t1)ซึ่งไม่มีค่าเปลี่ยนแปลง นำมาหารด้วยพัน เพื่อเปลี่ยนเป็นหน่วยวินาที และถูกแสดงผล(t3)อย่างที่คุณเห็น เมื่อจับเวลาครบ(หรือมากกว่า) 5 วินาที การวนคำสั่งจะหยุดลงทันที .....ตัวอย่างนี้ดูไม่เหมือนนาฬิกาจับเวลาเท่าไรครับ ลองดูนี่จะเหมือนกว่า..ผมว่า...

กดที่นี่เพื่อนับถอยหลังจาก 5 ถึง 0 วินาที
0

แบบฝึกหัดพิเศษ

                    เอ่อ... ผมนึกว่าจะไม่มีแบบฝึกหัด ในบทพิเศษเหล่านี้แล้วนะครับ แต่เอาเถอะครับ สักข้อ... คิดวันละนิด จิตแจ่มใส (เกี่ยวกันรึเปล่า?)   ผมขอให้คุณเขียนสคริปที่ทำให้เกิดนาฬิกาจับเวลาแบบนับถอยหลัง เหมือนข้างบนนี้ แต่คุณจะเห็นว่านาฬิกาข้างบนนี้มีจุดอ่อนอยู่.. ตรงที่มีการแสดงค่าทศนิยมยาวๆออกมาด้วยในบางครั้ง ถ้าเป็นไปได้ ผมอยากให้คุณจัดการเอาทศนิยมเหล่านั้นออกด้วยครับ และจุดอ่อนใหญ่คือ เมื่อคุณกดข้อความซ้ำๆขณะเลขวิ่งอยู่ นาฬิกาจะทำงานไม่หยุด เพราะคำสั่งทำงานซ้ำ ขณะที่ clearTimeout ครั้งก่อนยังไม่ทำงาน(เลยไม่หยุดไงครับ) ผมอยากให้คุณแก้ไขตรงนี้ด้วยครับ ไม่มีเฉลยนะครับ ผมอยากให้คุณทำเป็น ซึ่งจะเป็นพื้นฐาน ให้คุณนำค่าเวลาที่จับไปประยุกต์ใช้ในหลายๆทาง และไม่จำเป็นต้องแสดงผลตลอดเวลาให้ผู้ใช้เห็นแบบนี้ก็ได้ครับ