Thursday, August 16, 2007

TUTORIAL MEMBUAT SITE (Course 4 [ contoh script-2 ] )

JAM PADA WEBPAGE.

<html>
<head>
<title>Dashboard Clock</title>
<script language="JavaScript">
<!-- hiding
var timerID ;
function tzone(tz, os, ds, cl)
{
this.ct = new Date(0) ; // datetime
this.tz = tz ; // code
this.os = os ; // GMT offset
this.ds = ds ; // has daylight savings
this.cl = cl ; // font color
}

function UpdateClocks()
{
// www.timeanddate.com/worldclock
var ct = new Array(
new tzone('SFO: ', -8, 1, 'lime'),
new tzone('TYO: ', +9, 0, 'violet'),
new tzone('HKG: ', +8, 0, 'cyan'),
new tzone('BKK: ', +7, 0, 'yellow'),
new tzone('NYC: ', -5, 1, '#FFAA00'),
new tzone('LON: ', 0, 1, 'silver'),
new tzone('SVO: ', +3, 0, 'pink'),
new tzone('KTM: ', +5.75, 0, 'red')
) ;

var dt = new Date() ; // [GMT] time according to machine clock

var startDST = new Date(dt.getFullYear(), 3, 1) ;
while (startDST.getDay() != 0)
startDST.setDate(startDST.getDate() + 1) ;

var endDST = new Date(dt.getFullYear(), 9, 31) ;
while (endDST.getDay() != 0)
endDST.setDate(endDST.getDate() - 1) ;

var ds_active ; // DS currently active
if (startDST < dt && dt < endDST)
ds_active = 1 ;
else
ds_active = 0 ;

// Adjust each clock offset if that clock has DS and in DS.
for(n=0 ; n<ct.length ; n++)
if (ct[n].ds == 1 && ds_active == 1) ct[n].os++ ;

// compensate time zones
gmdt = new Date() ;
for (n=0 ; n<ct.length ; n++)
ct[n].ct = new Date(gmdt.getTime() + ct[n].os * 3600 * 1000) ;

document.all.Clock0.innerHTML =
'<font color="' + ct[0].cl + '">' + ct[0].tz + ClockString(ct[0].ct) + '</font>' ;

document.all.Clock1.innerHTML =
'<font color="' + ct[1].cl + '">' + ct[1].tz + ClockString(ct[1].ct) + '</font>' ;

document.all.Clock2.innerHTML =
'<font color="' + ct[2].cl + '">' + ct[2].tz + ClockString(ct[2].ct) + '</font>' ;

document.all.Clock3.innerHTML =
'<font color="' + ct[3].cl + '">' + ct[3].tz + ClockString(ct[3].ct) + '</font>' ;

document.all.Clock4.innerHTML =
'<font color="' + ct[4].cl + '">' + ct[4].tz + ClockString(ct[4].ct) + '</font>' ;

document.all.Clock5.innerHTML =
'<font color="' + ct[5].cl + '">' + ct[5].tz + ClockString(ct[5].ct) + '</font>' ;

document.all.Clock6.innerHTML =
'<font color="' + ct[6].cl + '">' + ct[6].tz + ClockString(ct[6].ct) + '</font>' ;

document.all.Clock7.innerHTML =
'<font color="' + ct[7].cl + '">' + ct[7].tz + ClockString(ct[7].ct) + '</font>' ;


timerID = window.setTimeout("UpdateClocks()", 1001) ;
}

function ClockString(dt)
{
var stemp, ampm ;

var dt_year = dt.getUTCFullYear() ;
var dt_month = dt.getUTCMonth() + 1 ;
var dt_day = dt.getUTCDate() ;
var dt_hour = dt.getUTCHours() ;
var dt_minute = dt.getUTCMinutes() ;
var dt_second = dt.getUTCSeconds() ;

dt_year = dt_year.toString() ;
if (0 <= dt_hour && dt_hour < 12)
{
ampm = 'AM' ;
if (dt_hour == 0) dt_hour = 12 ;
} else {
ampm = 'PM' ;
dt_hour = dt_hour - 12 ;
if (dt_hour == 0) dt_hour = 12 ;
}

if (dt_minute < 10)
dt_minute = '0' + dt_minute ;

if (dt_second < 10)
dt_second = '0' + dt_second ;

stemp = dt_month + '/' + dt_day + '/' + dt_year.substr(2,2) ;
stemp = stemp + ' ' + dt_hour + ":" + dt_minute + ":" + dt_second + ' ' + ampm ;
return stemp ;
}
// End -->
</script>
</head>

<!-- TARO DI BODY -->
<body onLoad="UpdateClocks()">

<!-- STEP THREE: Copy this code into the BODY of your HTML document -->
<table border="0" cellspacing="0" width="100%">
<tr bgcolor="#000000" style="font-family: Verdana, Tahoma, Arial; font-size: x-small">
<td id="Clock0" width="25%" > </td>
<td id="Clock1" width="25%" > </td>
<td id="Clock2" width="25%" > </td>
<td id="Clock3" width="25%" > </td>
</tr>
<tr bgcolor="#000000" style="font-family: Verdana, Tahoma, Arial; font-size: x-small">
<td id="Clock4" width="25%" > </td>
<td id="Clock5" width="25%" > </td>
<td id="Clock6" width="25%" > </td>
<td id="Clock7" width="25%" > </td>
</tr>
</table>
</body>
</html>






LOADING BAR PROGRES
<html>
<head>
<title>Preloading images...</title>
<script language="javascript">

///////////////////////////////////////////////
// PUT ALL IMAGES IN AN ARRAY FOR PRELOADING //
///////////////////////////////////////////////
var pics = new Array("http://images.bravenet.com/common/images/warning.gif";,"http://images.bravenet.com/common/images/warning.gif";,"http://images.bravenet.com/common/images/warning.gif";,"http://images.bravenet.com/common/images/warning.gif";,"http://images.bravenet.com/common/images/warning.gif";

///////////////////////////////////////////////////
// ENTER URL TO GOTO AFTER IT FINSHES PRELOADING //
///////////////////////////////////////////////////
var url = "";

////////////////////////////////////////////////////
// ASK USERS TO GO TO NEXT PAGE AFTER PRELOADING? //
////////////////////////////////////////////////////
var doConfirm = true;

////////////////////////////////////
// ALLOW USER TO SKIP PRELOADING? //
////////////////////////////////////
var canSkip = true;


////////////////////////////////////////////////////////////////////////////////////
//------------YOU ARE DONE, DON'T EDIT ANYTHING BEYOND THIS POINT-----------------//
////////////////////////////////////////////////////////////////////////////////////


var imgObjs = new Array(pics.length);
var loaded = 0;
var total = pics.length;
var cPercent = 0;

var barLayer = null;
var percentLayer = null;
var statLayer = null;
var doneMsgLayer = null;


function getLayer(layerID) {
if (document.getElementById)
return document.getElementById(layerID);
else if (document.all)
return document.all[layerID];
else
return null;
}


function updateBar() {
statLayer.innerHTML = "<font face="Arial" color="#FFFFFF"><B>" +loaded+ "/" +total+ "</B></font>";
var percent = Math.round(loaded/total * 100);
if (cPercent != percent)
{
cPercent = percent;
barLayer.style.width = (cPercent*3) +"px";
percentLayer.innerHTML = "<font color="#ffffff"><B>" +cPercent+ "%</B></font>";
}
if (loaded == total)
{
doneMsgLayer.innerHTML = "<a href="javascript:done()"><font face="Arial" color="#ffffff" size="2"><B>Done (Click Here)</B></font></a>";
if (doConfirm && confirm("Files have finish loading, continue to next page?"))
done();
}
}

function startLoading() {
if (document.getElementById || document.all)
{
barLayer = getLayer("bar");
percentLayer = getLayer("percent");
statLayer = getLayer("stat");
doneMsgLayer = getLayer("doneMsg");
if (canSkip)
doneMsgLayer.innerHTML = "<a href="javascript:done()"><font color="#ffffff" size="2" face="Arial">Skip Pre-Loading</font></a>";
for (i=0; i<pics.length; i++)
{
imgObjs[i] = new Image();
imgObjs[i].onload = imgLoaded;
imgObjs[i].onerror = imgFailed;
imgObjs[i].src = pics[i];
}
}
else
{

window.location.replace(url);
}
}

function done() {
parent.window.location.replace(url);
}

function imgFailed() {
alert("The following image failed to load, probably a broken link:\n" +this.src+ "\nPlease contact the webmaster of the site you are visiting about this. The program will skip this file now.");
loaded++;
updateBar();
}

function imgLoaded() {
loaded++;
if (loaded>pics.length)
return
updateBar();
}

window.onload=startLoading
</script>

</head>

<body bgcolor="#004891">
<font face="tahoma" color="#ffffff" size="4" style="padding-left: 110px;">Preloading images...</font>
<div id="bg" style="left: 50px; width: 300px; position: absolute; top: 50px; height: 20px; background-color: #dddddd"></div>
<div id="bar" style="left: 50px; width: 1px; position: absolute; top: 50px; height: 20px; background-color: #000000"></div>
<div id="percent" style="left: 180px; position: absolute; top: 50px"><font color="#ffffff"><b>0%</b></font></div><br>
<div id="stat" style="left: 370px; position: absolute; top: 50px"><font face="arial" color="#ffffff"><b>0/0</b></font></div><br>
<div id="donemsg" style="left: 140px; position: absolute; top: 90px"></div>
<br><br><br>

<!--Rest of text...-->
</body></html>






Scroller Textbook

<html>
<head>
<title>Textbox Scroller</title>
<script language="JavaScript">
<!-- Begin
// THESE VARIABLES CAN BE CHANGED //
var myMainMessage=" TES DOANK... ";
var speed=150;
var scrollingRegion=50;

// END CHANGEABLE VARIABLES //
var startPosition=0;
function mainTextScroller() {
var mainMessage=myMainMessage;
var tempLoc=(scrollingRegion*3/mainMessage.length)+1;
if (tempLoc<1) {tempLoc=1}
var counter;
for(counter=0;counter<=tempLoc;counter++)
mainMessage+=mainMessage;
document.mainForm.mainTextScroller.value=mainMessage.substring(startPosition,startPosition+scrollingRegion);
startPosition++;
if(startPosition>scrollingRegion) startPosition=0;
setTimeout("mainTextScroller()",speed); }
// End -->
</script>
</head>
<body onLoad="mainTextScroller()">
<form name="mainForm">
<center>
<input type="text" name="mainTextScroller" size="40" value>
</center>
</form>
</body>
</html>






Bikin Browser auto close

<body onLoad="setTimeout(window.close, 3000);">




Pop UP

<!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
<head>
<script language="JavaScript">
<!-- hiding
function expand() {
for(x = 0; x < 50; x++) {
window.moveTo(screen.availWidth * -(x - 50) / 100, screen.availHeight * -(x - 50) / 100);
window.resizeTo(screen.availWidth * x / 50, screen.availHeight * x / 50);
}
window.moveTo(0,0);
window.resizeTo(screen.availWidth, screen.availHeight);
}
// End -->
</script>
</head>
<!-- STEP TWO: Copy this code into the BODY of your HTML document -->
<body>
<a href="http://www.aniplasma.co.nr"; onClick="expand();">Visit Bravenet.com</a>





Buka window normal

<A HREF="javascript:void(0)"
ONCLICK="window.open('http://www.aniplasma.co.nr´ ;,'miniwin','toolbar=1,location=1,directories=1,status=1,menubar=1,scrollba rs=1,resizable=1,width=500,height=300')">Open a Google Window</a>





Buka windows tanpa tools

<A HREF="javascript:void(0)"
ONCLICK="window.open('http://www.aniplasma.co.nr´ ;,'miniwin','toolbar=0,location=0,directories=0,status=0,menubar=0,scrollba rs=0,resizable=0,width=500,height=300')">Open A Window</a>





Terbuka ketika site tempat kode ini ditaruh ditutup

<body onUnload="window.open('http://www.aniplasma.co.nr/´;, 'newWindow', 'scrollbars=0,resizable=0,height=300,width=400')">




buka window dengan jendela tutuo.

Button link: <form><input TYPE="button" VALUE="Close Window" onClick="window.close()"></form>
<BR>

0 Comments: