เว็บอะไรดีออนไลน์กับครูเก่ง: แนะนำ JavaScript Source Code เกี่ยวกับเวลา

พอดีผมท่องเว็บไซต์ หาข้อมุลมาจัดทำเว็บไซต์ตัวเอง ก็เลยไปเจอ Source Code เกี่ยวกับเวลา แนะนำ JavaScript Source Code เกี่ยวกับเวลา เอาไปปรับแต่งในเว็บไซต์ของตนเองหรือหน่วยงาน สร้างชิ้นงาน หรือตกแต่งบทเรียน สื่อการเรียนการสอนต่างๆ

แบบที่ 1

Show Date

Example

Sunday, November 13, 2011

Code

<!--

var Today = new Date()

var year = Today.getYear()

var month = Today.getMonth()

var date = Today.getDate()

var day = Today.getDay()

if(year < 1000){

year += 1900

}

var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

var dayArray = new Array("Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday")

document.write( dayArray[day] + ", " + monthArray[month] + " " + date + ", " + year )

//-->

</script>

แบบที่ 2

24 Hour Clock

Example

18:24:32

Code

<!--

function clock(){

var time = new Date()

var hr = time.getHours()

var min = time.getMinutes()

var sec = time.getSeconds()

if (hr < 10){

hr = " " + hr

}

if (min < 10){

min = "0" + min

}

if (sec < 10){

sec = "0" + sec

}

document.clockForm.clockButton.value = hr + ":" + min + ":" + sec

setTimeout("clock()", 1000)

}

function showDate(){

var date = new Date()

var year = date.getYear()

if(year < 1000){

year += 1900

}

var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

alert(monthArray[date.getMonth()] + " " + date.getDate() + ", " + year)

}

window.onload=clock;

//-->

</script>

</form>

แบบที่ 3

12 Hour Clock

Example

6:44:15 PM

Code

script language="JavaScript">

<!--

function clock(){

var time = new Date()

var hr = time.getHours()

var min = time.getMinutes()

var sec = time.getSeconds()

var ampm = " PM "

if (hr < 12){

ampm = " AM "

}

if (hr > 12){

hr -= 12

}

if (hr < 10){

hr = " " + hr

}

if (min < 10){

min = "0" + min

}

if (sec < 10){

sec = "0" + sec

}

document.clockForm.clockButton.value = hr + ":" + min + ":" + sec + ampm

setTimeout("clock()", 1000)

}

function showDate(){

var date = new Date()

var year = date.getYear()

if(year < 1000){

year += 1900

}

var monthArray = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December")

alert( monthArray[date.getMonth()] + " " + date.getDate() + ", " + year)

}

window.onload=clock;

//-->

</script>

</form>

แบบที่ 4

Chronometer

Example

0:00:00:000

Code

<!--

var startTime = 0

var start = 0

var end = 0

var diff = 0

var timerID = 0

function chrono(){

end = new Date()

diff = end - start

diff = new Date(diff)

var msec = diff.getMilliseconds()

var sec = diff.getSeconds()

var min = diff.getMinutes()

var hr = diff.getHours()-1

if (min < 10){

min = "0" + min

}

if (sec < 10){

sec = "0" + sec

}

if(msec < 10){

msec = "00" +msec

}

else if(msec < 100){

msec = "0" +msec

}

document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec

timerID = setTimeout("chrono()", 10)

}

function chronoStart(){

document.chronoForm.startstop.value = "stop!"

document.chronoForm.startstop.onclick = chronoStop

document.chronoForm.reset.onclick = chronoReset

start = new Date()

chrono()

}

function chronoContinue(){

document.chronoForm.startstop.value = "stop!"

document.chronoForm.startstop.onclick = chronoStop

document.chronoForm.reset.onclick = chronoReset

start = new Date()-diff

start = new Date(start)

chrono()

}

function chronoReset(){

document.getElementById("chronotime").innerHTML = "0:00:00:000"

start = new Date()

}

function chronoStopReset(){

document.getElementById("chronotime").innerHTML = "0:00:00:000"

document.chronoForm.startstop.onclick = chronoStart

}

function chronoStop(){

document.chronoForm.startstop.value = "start!"

document.chronoForm.startstop.onclick = chronoContinue

document.chronoForm.reset.onclick = chronoStopReset

clearTimeout(timerID)

}

//-->

</script>

</form>

แบบที่ 5

Countdown

Example

6:09:42:804

Code

<!--

var hoursleft = 0;

var minutesleft = 10; // you can change these values to any value greater than 0

var secondsleft = 0;

var millisecondsleft = 0;

var finishedtext = "Countdown finished!" // text that appears when the countdown reaches 0

end = new Date();

end.setHours(end.getHours()+hoursleft);

end.setMinutes(end.getMinutes()+minutesleft);

end.setSeconds(end.getSeconds()+secondsleft);

end.setMilliseconds(end.getMilliseconds()+millisecondsleft);

function cd(){

now = new Date();

diff = end - now;

diff = new Date(diff);

var msec = diff.getMilliseconds();

var sec = diff.getSeconds();

var min = diff.getMinutes();

var hr = diff.getHours()-1;

if (min < 10){

min = "0" + min;

}

if (sec < 10){

sec = "0" + sec;

}

if(msec < 10){

msec = "00" +msec;

}

else if(msec < 100){

msec = "0" +msec;

}

if(now >= end){

clearTimeout(timerID);

document.getElementById("cdtime").innerHTML = finishedtext;

}

else{

document.getElementById("cdtime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec;

} // you can leave out the + ":" + msec if you want...

// If you do so, you should also change setTimeout to setTimeout("cd()",1000)

timerID = setTimeout("cd()", 10);

}

window.onload = cd;

//-->

</script>

<span id="cdtime">loading countdown...</span>

แบบที่ 6

Time Left Until ...

Example

1 year, 1 month, 8 days, 5 hours, 11 minutes, and 7 seconds until the next big thing

Code

<!--

var year = 2012; // in what year will your target be reached?

var month = 11; // value between 0 and 11 (0=january,1=february,...,11=december)

var day = 22; // between 1 and 31

var hour = 0; // between 0 and 24

var minute = 0; // between 0 and 60

var second = 0; // between 0 and 60

var eventtext = "until the next big thing"; // text that appears next to the time left

var endtext = "We reached the next big thing!!"; // text that appears when the target has been reached

var end = new Date(year,month,day,hour,minute,second);

function timeleft(){

var now = new Date();

if(now.getYear() < 1900)

yr = now.getYear() + 1900;

var sec = second - now.getSeconds();

var min = minute - now.getMinutes();

var hr = hour - now.getHours();

var dy = day - now.getDate();

var mnth = month - now.getMonth();

var yr = year - yr;

var daysinmnth = 32 - new Date(now.getYear(),now.getMonth(), 32).getDate();

if(sec < 0){

sec = (sec+60)%60;

min--;

}

if(min < 0){

min = (min+60)%60;

hr--;

}

if(hr < 0){

hr = (hr+24)%24;

dy--;

}

if(dy < 0){

dy = (dy+daysinmnth)%daysinmnth;

mnth--;

}

if(mnth < 0){

mnth = (mnth+12)%12;

yr--;

}

var sectext = " seconds ";

var mintext = " minutes, and ";

var hrtext = " hours, ";

var dytext = " days, ";

var mnthtext = " months, ";

var yrtext = " years, ";

if (yr == 1)

yrtext = " year, ";

if (mnth == 1)

mnthtext = " month, ";

if (dy == 1)

dytext = " day, ";

if (hr == 1)

hrtext = " hour, ";

if (min == 1)

mintext = " minute, and ";

if (sec == 1)

sectext = " second ";

if(now >= end){

document.getElementById("timeleft").innerHTML = endtext;

clearTimeout(timerID);

}

else{

document.getElementById("timeleft").innerHTML = yr + yrtext + mnth + mnthtext + dy + dytext + hr + hrtext + min + mintext + sec + sectext + eventtext;

}

timerID = setTimeout("timeleft()", 1000);

}

window.onload = timeleft;

//-->

</script>

ลองเอาไปปรับแต่งดูนะครับ

แหล่งข้อมูล http://www.proglogic.com

เว็บอะไรดีออนไลน์กับครูเก่ง

เว็บอะรัยดีช้อป

วันอาทิตย์ที่ 13 พฤศจิกายน พ.ศ. 2554

แนะนำ JavaScript Source Code เกี่ยวกับเวลา

ไม่มีความคิดเห็น:

แสดงความคิดเห็น

บทความที่ได้รับความนิยม 10 อันดับ

เว็บไซต์ที่น่าสนใจ

หน่วยงานที่ควรรู้