ตัวนับเวลาถอยหลัง (Midnight-Daily-Reset) อย่างง่าย ด้วย Javascript by seeer

จากที่เราเล่นเกมกันบ่อยๆ คงไม่มีใครไม่เคยเห็นระบบเล็กๆน้อยของเกม ที่กำหนดเวลาอนุญาตให้ทำ พูดง่ายๆก็อย่างเช่น ทำได้ทุกๆ สองชั่วโมง สิบสองชั่วโมง หรือ ธรรมดาๆก็ ทำทุกๆ 1 วัน อาทิเช่น ตีเมืองคนอื่นได้แค่วันละครั้ง ส่งของให้เพื่อนได้แค่วันละครั้ง อะไรแบบนี้เป็นต้น และเพื่อความเก๋ไก๋ เราก็ต้องมีตัวนับเวลาถอยหลัง โชว์เวลาถอยหลังให้ตื่นเต้นเล่นๆกันนิดหน่อย ตัวนับเวลาถอยหลังทำได้หลายแบบ เช่น นับจากวันที่กำหนดไว้  เหลือเวลาอีกเท่าไหร่จะถึงวันที่นี้ๆ เดือนนี้ๆ เป็นต้น ตัวนับที่นับถอยตามชั่วโมงที่มีให้เห็นได้ทั่วไป เราจะมาพูดถึง ตัวนับเวลาถอยหลัง ที่ทำทุกๆวัน หรือที่เรียกว่า Daily reset โดยที่ไม่ได้ reset โดยนับ 24 ชั่วโมง แต่จะ reset ตอนเที่ยงคืนของทุกวัน (เพราะเรานับวันใหม่หลังเที่ยงคืน เป็นอะไรที่มาตรฐาน)

มาดูกันว่า ถ้าเราอยากได้ ตัวนับถอยหลังที่นับจากเวลาเที่ยงคืน จะเขียนได้อย่างไรบ้าง

<html>

<head>

<title>Countdown to Mid-night</title>

<script type=”text/javascript”>

function ShowTimes() {

var now = new Date();

var hrs = 23-now.getHours();

var mins = 59-now.getMinutes();

var secs = 59-now.getSeconds();

//   ถึงเที่ยงคืนแล้วจะให้ทำอะไรก็เชคไป บลาๆๆ

if(now.getHours() == 23 && now.getMinutes() == 59 && now.getSeconds() == 59)

{

document.getElementById(“start_butt”).style.display = “block”;

}

var str = ”;

str = now.toString();

str += ‘<br> Timeleft: ‘+hrs+’ hours ‘+mins+’ minutes ‘+secs+’ seconds’;

document.getElementById(‘countdownToMidnight’).innerHTML = str;

}

var _cntDown;

function dontClick() {

document.getElementById(“start_butt”).style.display = “none”;

}

</script>

</head>

<body onload=”_cntDown=setInterval(‘ShowTimes()’,1000)”>

<div id=”countdownToMidnight”></div>

<div id=”start_butt” style=”display:block”>

<button onclick=”dontClick()”>Start</button>

</div>

</body>

</html>

จากตัวอย่าง จะเห็นว่า ถ้ากดปุ่ม Start ไปแล้ว ปุ่มก็หายไป แล้วบอกเป็นนัยๆว่า รอกดใหม่พรุ่งนี้นะ บอกแล้วอย่างง่ายจริงๆ ขอบคุณบทความจาก http://www.webdeveloper.com/forum/archive/index.php/t-215504.html