บทความนี้เราจะมาเล่นกับเวลากันซักหน่อยครับ จะเป็นการเขียนโค๊ดนับเวลาถอยหลัง ซึ่งเป็นโค๊ดที่ผมพัฒนาขึ้นมาเล่นๆ โดยมีแนวคิดที่นำไปใช้ประโยชน์ในเว็บประมูลสินค้าครับ และผมได้ทดสอบดูแล้ว ซึ่งมีผลลัพธ์ตรงกับเว็บประมูลสินค้าอื่นๆเลยครับ เช่น ระบบประมูลของตลาดดอทคอม
ในโค๊ดคุณจะได้เห็นวิธีแทรกโค๊ด ภาษาพีเอชพีลงในจาวาสคริปต์ได้ด้วยครับ ให้สังเกตุคำสั่ง setTimeout("countDown(<?=$mktime?>);",1000);
หากเป็นเว็บประมูล เราสามารถดึงข้อมูลวัน/เวลาจากฐานข้อมูล โดยใช้พีเอชพี (จาวาสคริปต์ไม่สามารถทำได้) แล้วเอาค่าวันเวลาในฐานข้อมูลมาเก็บไว้ในตัวแปรของพีเอชพี แล้วแทรกตัวแปรของพีเอชพีลงในจาวาสคริปต์อีกทีนึงครับ
มาดูโค๊ดกันเลยครับ
<?php date_default_timezone_set('Asia/Bangkok');//เซตโซนเวลาให้เป็นเวลาในไทย //หมดเวลา วันที่ 7/8/2012 เวลา 19:00:00 $mktime=mktime(19,00,00,8,7,2012);//mktime ( ชั่วโมง, นาที, วินาที, เดือน, วัน, ปี); แปลงให้เป็น timestamp ก่อนเน้อ ?> <!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" /> <script type="text/javascript" src="jquery.js"></script> <title>สอนเขียนโค๊ดนับเวลาถอยหลัง</title> <script type="text/javascript"> function countDown(times){//times ค่าเวลาต้องเป็น timeslamp เท่านั้น //ตัวแปร toDay รับค่าวันเวลาปัจจุบันแบบ timestamp var toDay=Math.round(new Date().getTime()/1000); //ค่าของ timestamp โดยหาร 1000 จะได้ค่าเป็นแบบ second //หาวันเวลาที่เหลือ อ้างอิงจาก http://www.thai-access.com/topic_post.asp?CategoryID=1&TopicID=2431 var difTime=times-toDay; var day=0,hours=0,minutes=0,seconds=0; if(difTime>0){//หากเวลายังไม่หมด day=Math.floor(difTime/84600);//หาค่าวัน hours=Math.floor((difTime/3600))%24;//หาชั่วโมง minutes=Math.floor(difTime/60)%60;//หานาที seconds=Math.floor(difTime)%60;//หาวินาที countDown_onLoad();//ทำงานต่อ $('.showTime').html(day+' วัน '+hours+' ชั่วโมง '+minutes+' นาที '+seconds+' วินาที '); }else{//ถ้าหมดเวลา alert('หมดเวลา'); //สามารถเขียนcodeเพิ่มเติมในส่วนนี้ได้ เช่น ถ้าหมดเวลาแล้วให้redirectไปหน้าindex.php ให้ใช้คำสั่ง window.location='index.php'; } } function countDown_onLoad(){ //แทรกcode PHP เข้าไปใน Javascript ได้เลย setTimeout("countDown(<?=$mktime?>);",1000);//1000=1วินาที } $(document).ready(function() { countDown_onLoad(); }); </script> </head> <body> <div class="showTime"></div><!--แสดงผลลัพธุ์ตรงนี้--> </body> </html>ขออธิบายนิดนึง
1.ฟังก์ชั่น counDown(times) times เป็นค่าพารามิเตอร์ที่ส่งเข้ามา คือวันเวลาสิ้นสุดของการนับถอยหลัง ซึ่งต้องเป็นค่าแบบTime Stamp
ภายในฟังก์ชั่นก็จะมีการเรียกค่าTime Stampของวันปัจจุบันมาเก็บไว้ในตัวแปร toDay จากคำสั่ง
var toDay=Math.round(new Date().getTime()/1000);
จะได้ค่า times tamp ที่เป็นแบบSeconds (แต่ถ้าหากเราใช้คำสั่ง var toDay=Math.round(new Date().getTime()); เราจะได้ค่าที่เป็นแบบ miliseconds) หาผลต่างของวันเวลาปัจจุบันกับวันเวลาสิ้นสุด เก็บค่าเอาไว้ในตัวแปร difTime
สร้างตัวแปรวัน/เวลา day,hours,minutes,seconds และกำหนดค่าเริ่มต้นให้เป็น 0
กำหนดเงื่อนไขจากตัวแปร difTime(ผลต่างของเวลา) หากมากกว่า0 ก็ให้เวลานับถอยหลังไปเรื่อยๆ สำหรับการหาค่าวัน
ชั่วโมง นาที วินาที ผมศึกษาจากที่นี้ครับ http://www.thaiaccess.com/topic_post.asp?CategoryID=1&TopicID=2431
2.ฟังก์ชั่น coundDown_onload() เป็นฟังก์ชั่นที่ใช้ในการหน่วงเวลาทุกๆ1วินาที และถูกเรียกใช้ก่อนเป็นอันดับแรกตอนที่หน้าเว็บถูกโหลดขึ้นมา ให้สังเกตุคำสั่ง
function countDown_onLoad(){
//แทรกcode PHP เข้าไปใน Javascript ได้เลย
setTimeout("countDown(<?=$mktime?>);",1000);//1000=1วินาที
}
เมื่อตอนหน้าเว็บถูกโหลดขึ้นมา ให้สังเกตุคำสั่ง
$(document).ready(function() {
countDown_onLoad();
});
สำหรับสาเหตุที่เวลาค่อยๆลดลงทีละ 1 วินาที โดยที่ไม่ต้องใช้คำสั่งวนลูปเลย เพราะผมให้ทั้งสองฟังก์ชั่นเรียกใช้งานกันตลอดเวลาครับ เราสามารถทำให้เวลาถอยหลังหรือเพิ่มไปเรื่อยๆไม่มีสิ้นสุดปล.ผมรู้สึกแปลกใจที่เว็บประมูลดอทคอมไม่ทำตัวนับถอยหลัง ทั้งที่เป็นเว็บประมูลและแหล่งรวมเหล่าเกรียนที่ใหญ่แห่่งหนึ่งในไทย
เยี่ยมเลยครับทำโปรเจีกเรื่องนี้อยู่พอดี ถึงจะยังไม่ค่อยเข้าใจเท่าไหร่ แต่่ก็ขอบคุณมากครับ
ตอบลบผมลองนำโค้ดมารันดู ไม่ขึ้นอะไรเลยครับ
ขอคำแนะนำด้วยครับ ผมมือใหม่
ตอบลบสงสัยระบุที่อยู่ของไฟล์ jQuery ไม่ถูกครับ ให้ดูที่คำสั่ง
ตอบลบ<script type="text/javascript" src="jquery.js"></script>
ตรง src="jquery.js" ให้เปลี่ยนเป็นพาธที่เก็บไฟล์ของjQueryของคุณครับ เช่น src="js/jquery.js"
แฮะๆ รบกวนด้วยนะครับ ผมความรู้เท่าหาง อึ่ง !! จะว่าโง่เลยก็ได้ครับ คือผมทำถูกไหมครับ
ลบก๊อบไฟล์ของพี่ ไปแล้ว Open Edit plus file new php และ pass save .php ลงใน appsrve
ที่ลงไว้แล้ว Run browser ตามปกติแต่หน้าจอไม่ปรากฏอารัยเลย ครับ หรือว่าต้อง Save เป็น file อื่นครับ
ขอบคุณพี่อีกทีครับ จะทำส่งอาจารย์ แต่ติดตรงเวลานี่มาหลายวันแล้วครับ
คุณแน่ใจแล้วใช่ไหมครับว่า เรียกไฟล์ jquery ถูกต้องแล้ว และมีไฟล์นี้อยู่ในเครื่องของคุณหรือป่าวครับ
ลบเพราะผมก็ก๊อปโค๊ดในบทความนี้มารันที่เครื่องซ้ำแล้วซ้ำอีกหลายรอบ ก็ไม่มีปัญหาอะไรเลยครับ รวมถึงเปลี่ยนชื่อไฟล์เป็น pass save.php แบบคุณด้วย ก็ไม่มีปัญหา
และผมแน่ใจแบบหมอลักษณ์ฟันธง ว่า ปัญหาของคุณเกิดจากการเีรียกไฟล์ jquery ครับ
ท่านเจ้าของกระทู้ครับ ถ้าเรานำไปทำงานร่วมกับ PHP แล้วใช้คำสั่ง while ดึงข้อมูลเวลาทั้งหมดจากฐาน ข้อมูล มานับถอยหลัง
ตอบลบในกรณีที่มีหลาย ข้อมูล โค้ดนี้จะ อ่านทุกข้อมูลไหมครับ
โค๊ดนี้ไม่รองรับครับ ทำงานได้ทีละ 1 รายการครับ
ลบไม่ถามซักหน่อยเลยหรอครับ ว่าต้องทำยัง ^^ บอกให้ก็ได้ครับ ลองเอาโค๊ดนี้ไปรันดูนะครับ แล้วจะเข้าใจคอนเซ็ป
ลบ<!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" />
<script type="text/javascript" src="jquery.js"></script>
<title>สอนเขียนโค๊ดนับเวลาถอยหลัง</title>
<script type="text/javascript">
function countDown(times,Aid){//times ค่าเวลาต้องเป็น timeslamp เท่านั้น
//ตัวแปร toDay รับค่าวันเวลาปัจจุบันแบบ timestamp
var toDay=Math.round(new Date().getTime()/1000); //ค่าของ timestamp โดยหาร 1000 จะได้ค่าเป็นแบบ second
//หาวันเวลาที่เหลือ อ้างอิงจาก http://www.thai-access.com/topic_post.asp?CategoryID=1&TopicID=2431
var difTime=times-toDay;
var day=0,hours=0,minutes=0,seconds=0;
if(difTime>0){//หากเวลายังไม่หมด
day=Math.floor(difTime/84600);//หาค่าวัน
hours=Math.floor((difTime/3600))%24;//หาชั่วโมง
minutes=Math.floor(difTime/60)%60;//หานาที
seconds=Math.floor(difTime)%60;//หาวินาที
countDown_onLoad(times,Aid);//ทำงานต่อ
}else{//ถ้าหมดเวลา
$('#'+Aid).html('หมดเวลา');
//สามารถเขียนcodeเพิ่มเติมในส่วนนี้ได้ เช่น ถ้าหมดเวลาแล้วให้redirectไปหน้าindex.php ให้ใช้คำสั่ง window.location='index.php';
}
$('#'+Aid).html(day+' วัน '+hours+' ชั่วโมง '+minutes+' นาที '+seconds+' วินาที ');
}
function countDown_onLoad(times,areaId){
//แทรกcode PHP เข้าไปใน Javascript ได้เลย
setTimeout('countDown('+times+','+areaId+');',1000);//1000=1วินาที
}
$(document).ready(function() {
//countDown_onLoad();
$('.showTime').each(function(){
countDown($(this).html(),$(this).attr('id'));
});
});
</script>
</head>
<body>
<div class="showTime" id="1">
<?=$mktime=mktime(10,20,10,8,7,2012);// 7/8/2012 19:00:00 แปลงให้เป็น timestamp ก่อนนะ?>
</div>
<div class="showTime" id="2">
<?=$mktime=mktime(12,10,30,5,7,2012);?>
</div>
<div class="showTime" id="3">
<?=$mktime=mktime(19,00,00,date('m'),date('d'),date('Y'));?>
</div>
</body>
</html>
พอดีช่วงนี้ไม่ค่อยว่างเลยไม่ได้เข้ามาชม
ลบแต่ขอบคุณมากครับ ที่ช่วย เขียนให้เข้าใจ คอนเซป นี้
ขอบคุณมากครับกับความรู้ใหม่ที่มาแบ่งปัน
ตอบลบผมจะนำไปประยุกต์กับการประมูลที่กำลังทำอยู่ครับ
ด้วยความยินดีครับ ^^
ลบสอบถามอีกนิสครับ คือ ผมลองเซทให้หมดเวลาแล้วครับ
ตอบลบแต่ไม่เห็นขึ้นว่าหมดเวลา ขึ้นแต่เลข 0 ครับ
โทดทีครับ ให้ผมวางคำสั่งผิดน่ะครับ ความจริงต้อง
ลบif(difTime>0){
day=Math.floor(difTime/84600);//หาค่าวัน
hours=Math.floor((difTime/3600))%24;//หาชั่วโมง
minutes=Math.floor(difTime/60)%60;//หานาที
seconds=Math.floor(difTime)%60;//หาวินาที
countDown_onLoad(times,Aid);//ทำงานต่อ
$('#'+Aid).html(day+' วัน '+hours+' ชั่วโมง '+minutes+' นาที '+seconds+' วินาที ');
}else{//ถ้าหมดเวลา
$('#'+Aid).html('หมดเวลา');
//สามารถเขียนcodeเพิ่มเติมในส่วนนี้ได้ เช่น ถ้าหมดเวลาแล้วให้redirectไปหน้าindex.php ให้ใช้คำสั่ง window.location='index.php';
}
ขอบคุณมากครับ สำหรับสาระดีๆที่นำมาแบ่งปัน
ลบjquery.js จะเอามาจากไหนล่ะครับ
ตอบลบมาจากนี้ครับ http://docs.jquery.com/Downloading_jQuery
ตอบลบถาม นิดหนึ่งค่ะ ลองเอาโค๊ดไปรัน แล้ว ออกแต่ค่า
ตอบลบรบกวนหน่อยค่ะ