วันศุกร์ที่ 20 เมษายน พ.ศ. 2555

สอนเขียนโค๊ดนับเวลาถอยหลังอย่างง่าย


        บทความนี้เราจะมาเล่นกับเวลากันซักหน่อยครับ จะเป็นการเขียนโค๊ดนับเวลาถอยหลัง ซึ่งเป็นโค๊ดที่ผมพัฒนาขึ้นมาเล่นๆ  โดยมีแนวคิดที่นำไปใช้ประโยชน์ในเว็บประมูลสินค้าครับ และผมได้ทดสอบดูแล้ว ซึ่งมีผลลัพธ์ตรงกับเว็บประมูลสินค้าอื่นๆเลยครับ เช่น ระบบประมูลของตลาดดอทคอม
ในโค๊ดคุณจะได้เห็นวิธีแทรกโค๊ด ภาษาพีเอชพีลงในจาวาสคริปต์ได้ด้วยครับ ให้สังเกตุคำสั่ง 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 วินาที โดยที่ไม่ต้องใช้คำสั่งวนลูปเลย เพราะผมให้ทั้งสองฟังก์ชั่นเรียกใช้งานกันตลอดเวลาครับ เราสามารถทำให้เวลาถอยหลังหรือเพิ่มไปเรื่อยๆไม่มีสิ้นสุด

ปล.ผมรู้สึกแปลกใจที่เว็บประมูลดอทคอมไม่ทำตัวนับถอยหลัง ทั้งที่เป็นเว็บประมูลและแหล่งรวมเหล่าเกรียนที่ใหญ่แห่่งหนึ่งในไทย

18 ความคิดเห็น :

  1. ไม่ระบุชื่อ21 เมษายน 2555 14:58

    เยี่ยมเลยครับทำโปรเจีกเรื่องนี้อยู่พอดี ถึงจะยังไม่ค่อยเข้าใจเท่าไหร่ แต่่ก็ขอบคุณมากครับ

    ผมลองนำโค้ดมารันดู ไม่ขึ้นอะไรเลยครับ

    ตอบลบ
  2. ไม่ระบุชื่อ21 เมษายน 2555 15:10

    ขอคำแนะนำด้วยครับ ผมมือใหม่

    ตอบลบ
  3. สงสัยระบุที่อยู่ของไฟล์ jQuery ไม่ถูกครับ ให้ดูที่คำสั่ง
    <script type="text/javascript" src="jquery.js"></script>
    ตรง src="jquery.js" ให้เปลี่ยนเป็นพาธที่เก็บไฟล์ของjQueryของคุณครับ เช่น src="js/jquery.js"

    ตอบลบ
    คำตอบ
    1. ไม่ระบุชื่อ21 เมษายน 2555 16:08

      แฮะๆ รบกวนด้วยนะครับ ผมความรู้เท่าหาง อึ่ง !! จะว่าโง่เลยก็ได้ครับ คือผมทำถูกไหมครับ

      ก๊อบไฟล์ของพี่ ไปแล้ว Open Edit plus file new php และ pass save .php ลงใน appsrve

      ที่ลงไว้แล้ว Run browser ตามปกติแต่หน้าจอไม่ปรากฏอารัยเลย ครับ หรือว่าต้อง Save เป็น file อื่นครับ

      ขอบคุณพี่อีกทีครับ จะทำส่งอาจารย์ แต่ติดตรงเวลานี่มาหลายวันแล้วครับ

      ลบ
    2. คุณแน่ใจแล้วใช่ไหมครับว่า เรียกไฟล์ jquery ถูกต้องแล้ว และมีไฟล์นี้อยู่ในเครื่องของคุณหรือป่าวครับ
      เพราะผมก็ก๊อปโค๊ดในบทความนี้มารันที่เครื่องซ้ำแล้วซ้ำอีกหลายรอบ ก็ไม่มีปัญหาอะไรเลยครับ รวมถึงเปลี่ยนชื่อไฟล์เป็น pass save.php แบบคุณด้วย ก็ไม่มีปัญหา
      และผมแน่ใจแบบหมอลักษณ์ฟันธง ว่า ปัญหาของคุณเกิดจากการเีรียกไฟล์ jquery ครับ

      ลบ
  4. ไม่ระบุชื่อ27 เมษายน 2555 01:39

    ท่านเจ้าของกระทู้ครับ ถ้าเรานำไปทำงานร่วมกับ PHP แล้วใช้คำสั่ง while ดึงข้อมูลเวลาทั้งหมดจากฐาน ข้อมูล มานับถอยหลัง

    ในกรณีที่มีหลาย ข้อมูล โค้ดนี้จะ อ่านทุกข้อมูลไหมครับ

    ตอบลบ
    คำตอบ
    1. โค๊ดนี้ไม่รองรับครับ ทำงานได้ทีละ 1 รายการครับ

      ลบ
    2. ไม่ถามซักหน่อยเลยหรอครับ ว่าต้องทำยัง ^^ บอกให้ก็ได้ครับ ลองเอาโค๊ดนี้ไปรันดูนะครับ แล้วจะเข้าใจคอนเซ็ป

      <!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>

      ลบ
    3. ไม่ระบุชื่อ28 เมษายน 2555 16:08

      พอดีช่วงนี้ไม่ค่อยว่างเลยไม่ได้เข้ามาชม

      แต่ขอบคุณมากครับ ที่ช่วย เขียนให้เข้าใจ คอนเซป นี้

      ลบ
  5. ขอบคุณมากครับกับความรู้ใหม่ที่มาแบ่งปัน
    ผมจะนำไปประยุกต์กับการประมูลที่กำลังทำอยู่ครับ

    ตอบลบ
    คำตอบ
    1. ด้วยความยินดีครับ ^^

      ลบ
  6. ไม่ระบุชื่อ29 เมษายน 2555 13:24

    สอบถามอีกนิสครับ คือ ผมลองเซทให้หมดเวลาแล้วครับ

    แต่ไม่เห็นขึ้นว่าหมดเวลา ขึ้นแต่เลข 0 ครับ

    ตอบลบ
    คำตอบ
    1. โทดทีครับ ให้ผมวางคำสั่งผิดน่ะครับ ความจริงต้อง

      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';
      }

      ลบ
    2. ไม่ระบุชื่อ30 เมษายน 2555 09:31

      ขอบคุณมากครับ สำหรับสาระดีๆที่นำมาแบ่งปัน

      ลบ
  7. ไม่ระบุชื่อ21 พฤษภาคม 2555 15:01

    jquery.js จะเอามาจากไหนล่ะครับ

    ตอบลบ
  8. มาจากนี้ครับ http://docs.jquery.com/Downloading_jQuery

    ตอบลบ
  9. ไม่ระบุชื่อ9 มีนาคม 2558 14:00

    ถาม นิดหนึ่งค่ะ ลองเอาโค๊ดไปรัน แล้ว ออกแต่ค่า


    รบกวนหน่อยค่ะ

    ตอบลบ