การทำตัวนับอายุโดยการใส่วันเกิดและเวลา ด้วย javascript

เป็นการใช้ js ในการนับอายุโดยใส่ข้อมูล วัน เดือน ปี และ เวลาที่เกิด ลงไป และทำการคํานวณ ว่ามีอายุกี่ปี กี่วัน  เผื่อมีประโยชน์เอาไว้ใส่เว็บครับ

เรามาเริ่มจากตัวอย่าง ตั้งไว้วันที่  1990-02-13 15:30  กดเลือกวันและเวลา กดปุ่ม คำนวณครับ

ในส่วน code นั้น

จะใช้ js libary อยู่สองตัวคือ jquery กับ jquery-simple-datetimepicker เพื่อทำให้ง่ายขึ้นครับ ผมจะดึงจากเว็บต้นเลยนะครับ(ไม่ได้โหลดมาไว้ใน source )

-ในส่วนของ header

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> // เรียก jquery
<script src="http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.js"></script> เรียก datetimepicker
<link rel="stylesheet" type="text/css" href="http://mugifly.github.io/jquery-simple-datetimepicker/jquery.simple-dtpicker.css"  /> css datetimepicker

– ในส่วน html

<input type=”text” name=”” id=”yearinput”> // input เพื่อทำเป็น datetimepicker

<a href="#" class="clickd" id="bt">คํานวณ</a> // ปุ่ม สำหรับกดคำนาณ
<div class="myold">
<div><span class="up_y">0</span> ปี </div>   // tag span แสดงปี
<div><span class="up_d">0</span> วัน // tag span แสดงวัน
<span class="up_h">0</span> ชัวโมง // tag span แสดงชั่วโมง
 <span class="up_m">0</span> นาที <br>  // tag span แสดงนาที
<span class="up_s">0</span> วินาที  // tag span แสดงวินาที
</div>
</div>

- การใช้ javascript จะอธิบายใน comment code 

function upTime(countTo) {   // fuction สำหรับคำนวณเวลา
  
  
  now = new Date(); // วันที่ปัจจุบัน object
  countTo = new Date(countTo);  // ทำค่าที่รับเข้ามาจาก countTo วันที่ให้เป็น object
  difference = (now-countTo); // นำวันเวลาปัจจุบันกับค่าที่ได้รับมาลบกัน 
  
  // ในส่วนนี้เป็นการคำนวณหาจำนวนวัน ชั่วโมง นาที และวินาที
  days=Math.floor(difference/(60*60*1000*24)*1); 
  years = Math.floor(days / 365);
  if (years > 1){ days = days - (years * 365)}
  hours=Math.floor((difference%(60*60*1000*24))/(60*60*1000)*1);
  mins=Math.floor(((difference%(60*60*1000*24))%(60*60*1000))/(60*1000)*1);
  secs=Math.floor((((difference%(60*60*1000*24))%(60*60*1000))%(60*1000))/1000*1);
 
  // นำตัวค่าที่ได้มาใส่ใน element html ที่เตรียมไว้ 
   $(".up_y").html(years) ;
   $(".up_d").html(days) ;
   $(".up_h").html(hours) ;
   $(".up_m").html(mins) ;
   $(".up_s").html(secs) ;

   // set ให้คำนวณใหม่ทุกๆ 1 วินาที 
   clearTimeout(upTime.to);
   upTime.to=setTimeout(function(){ upTime(countTo); },1000);
}

// init datetimepicker ใน id yearinput
 $('#yearinput').appendDtpicker({
	 "inline": true,
	 "current": "1990-1-1 12:30"
					
  });
	 
 // จับ event ในการกดปุ่มคำนวณ	 
 $('#bt').click(function(){
	    
 // ดึง object date จาก datepicker
 var date = $('#yearinput').handleDtpicker('getDate');
            

// ส่วนนี้เป็นการจัดเรียงรูปแบบ date ให้เป็น string เพื่อใส่ใน function upTime()			
 var month_names_short = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
 var month = month_names_short[date.getMonth()];
 var day = date.getDate();
 var year = date.getFullYear();
 var h_r = date.getHours();
 var m_r = date.getMinutes();
 var s_r = date.getMilliseconds();
 var usein = month+','+day+','+year+','+h_r+':'+m_r+':'+s_r;
 
// เรียกใช้ upTime			
 upTime(usein);			
 return false;			
			
 });
		

SOURCE CODE