สร้าง countdown นับเวลา ถอยหลัง ด้วย javascript

09 April 2010

ตัวอย่างผลลัพธ์ กำหนดเวลาที่ 01/01/2011 00:00:01

 

HTML Code ตัวอย่าง

<div id="showRemain"></div>

Javascript Code ตัวอย่าง

<script type="text/javascript">
function countDown(){
	var timeA = new Date(); // วันเวลาปัจจุบัน
	var timeB = new Date("01/01/2011 00:00:01"); // วันเวลาสิ้นสุด รูปแบบ เดือน/วัน/ปี ชั่วโมง:นาที:วินาที
	var timeDifference = timeB-timeA;
	if(timeDifference>=0){
		timeDifference=timeDifference/1000;
		timeDifference=Math.floor(timeDifference);
		var wan=Math.floor(timeDifference/86400);
		var l_wan=timeDifference%86400;
		var hour=Math.floor(l_wan/3600);
		var l_hour=l_wan%3600;
		var minute=Math.floor(l_hour/60);
		var second=l_hour%60;
		var showPart=document.getElementById('showRemain');
		showPart.innerHTML="เหลือเวลา "+wan+" วัน "+hour+" ชั่วโมง "
		+minute+" นาที "+second+" วินาที"; 
			if(wan==0 && hour==0 && minute==0 && second==0){
				clearInterval(iCountDown); // ยกเลิกการนับถอยหลังเมื่อครบ
				// เพิ่มฟังก์ชันอื่นๆ ตามต้องการ
			}
	}
}
// การเรียกใช้
var iCountDown=setInterval("countDown()",1000); 
</script>

 








บทความในหมวดที่่น่าสนใจ อื่นๆ JAVASCRIPT Learning

25 Sep 08 Javascript กับเทคนิค Mouseover และ Mouseout อ่าน 4810 22 Mar 09 สร้างฟังก์ชันโชว์รูปภาพขนาดใหญ่ด้วย javascript แบบง่าย อ่าน 4777 20 Aug 10 การสร้าง popup ที่แตกต่าง ด้วยวิธี showModalDialog อ่าน 4714 03 Nov 08 เปิด popup แล้วให้แสดงแบบ maximize อ่าน 4679 24 Feb 09 สร้างรูปแบบข้อความ เบอร์โทร เลขที่บัตรประชาชน เวลา ด้วย javascript อ่าน 4588 25 Sep 08 การสลับสีแถวในตารางด้วย javascript อ่าน 4032 29 Dec 10 เพิ่มเติม การใช้งาน popup แบบ showModalDialog อย่างสมบูรณ์ อ่าน 4011 25 Sep 08 การทำปุ่ม Print แบบรูปภาพ อ่าน 3993 26 Oct 08 เช็ค browser ด้วย javascript ได้ทั้ง IE Firefox Opera Chrome อ่าน 3920 06 Jan 09 บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย อ่าน 3826 25 Sep 08 เลือกหรือไม่เลือก checkbox ทั้งหมด อ่าน 3796 26 Oct 08 การสร้างปุ่มยืนยันให้กับ ลิ้งค์ ด้วย function return confirm() อ่าน 3791 25 Sep 08 javasdcript กับการเข้ารหัส encoding และการถอดรหัส decoding อ่าน 3765 25 Sep 08 กรอกข้อมูลได้เฉพาะตัวเลข อ่าน 3675 25 Sep 08 ปิดหน้า Browser โดยไม่ต้องมีข้อความยืนยัน อ่าน 3649

บทความคนเข้าอ่านวันนี้

18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 4549 18 Aug 09 สร้าง ฟังก์ชั่น บันทึกหน้าเพจไว้ใน Favorites และ Bookmarks ด้วย javascript อ่าน 1660 29 Oct 08 สร้างปุ่มแบ่งหน้าให้ดูดีด้วย css อย่างง่าย อ่าน 6282 25 Oct 08 ส่งอีเมลล์พร้อมกับแนบไฟล์ด้วย php mail function ได้อย่างง่าย อ่าน 5204 22 Apr 10 ประยุกต์ tooltip มากกว่า 1 ตัวใน ฟอร์ม ด้วย jQuery อ่าน 5059 22 Mar 09 javascript หาความกว้างและความสูงของหน้าเพจได้ด้วยฟังก์ชันง่ายๆ อ่าน 1717 04 Feb 09 แก้ไขข้อความแบบทันที ด้วย jQuery อ่าน 3816 02 Jun 09 แก้ปัญหา การดึงข้อมูล จากฐานข้อมูล เมื่อเปลี่ยน charset ใน แท็ก meta อ่าน 3360 05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 9222 26 Oct 08 การสร้างปุ่มยืนยันให้กับ ลิ้งค์ ด้วย function return confirm() อ่าน 3791 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 5115 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 3703 25 Sep 08 ดึงข้อมูลจากฐานข้อมูลใส่ List Box อ่าน 5505 16 Sep 10 เพิ่มความสะดวก การ insert update delete ข้อมูล ของ mysql ด้วย php function อ่าน 7130 08 Oct 08 การสร้างปุ่มด้วย CSS อ่าน 4578 19 Oct 08 คำสั่ง SQL COUNT อ่าน 6496 12 May 10 แนวทาง การดึงข้อมูล แบบ real time ด้วย ajax ใน jQuery อ่าน 8803 15 Mar 11 ทบทวน JavaScript SDK ของ facebook อ่าน 1505 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 4636 13 May 09 แก้ไขการตัดข้อความด้วย substrใน php แล้วมีรูปสี่เหลี่ยม อ่าน 2712
จำนวนผู้เยี่ยมชม 777840
คน 2012 © Copyright ninenik.com. All rights reserved.