Javascript: Macam-Macam Effect Yang Mantap
Perasaan akhir-akhir ini posting saya berbicara tentang yang mantap2, hahahah….!! tapi gak papa lah..!! maklum lagi mantap2 nya postingan
..!! hehehhe..!
pada pertemuan kali ini saya akan membagikan beberapa kode javascript yang keren di mata saya, kalo di mata kalian gimana ?? gag tawu lah hahahaha
1. Buat Jam Di title bar
Seperti yang anda ketahui title bar adalah bagian dari broser anda, yang paling atas itu loh..!! ahahahahahhaha..!! apa maksud dari judul di atas ?? kalo mau liat langsung
scriptnya :
var scroller;
var ampm;
var actualtitle=document.title+" "
function antiMilitaryTime()
{
if (hr == "12"){
ampm="P.M."
}
else if (hr == "13"){
hr="1"
ampm="P.M."
}
else if (hr == "14"){
hr="2"
ampm="P.M."
}
else if (hr == "15"){
hr ="3"
ampm="P.M."
}
else if (hr == "16"){
hr = "4"
ampm="P.M."
}
else if (hr == "17"){
hr = "5"
ampm="P.M."
}
else if (hr == "18"){
hr = "6"
ampm="P.M."
}
else if (hr == "19"){
hr = "7"
ampm="P.M."
}
else if (hr == "20"){
hr = "8"
ampm="P.M."
}
else if (hr == "21"){
hr = "9"
ampm="P.M."
}
else if (hr == "22"){
hr = "10"
ampm="P.M."
}
else if (hr == "23"){
hr = "11"
ampm="P.M."
}
else if (hr == "24"){
hr = "12"
}
}
function addZero(){
if (min <= "9"){
min = "0"+min
}
if (sec<= "9"){
sec = "0"+sec
}
if (hr <=9){
hr = "0"+hr
}
}
function time(){
dt=new Date()
sec=dt.getSeconds()
hr=dt.getHours()
ampm="A.M."
min=dt.getMinutes()
}
function scroll() {
time()
antiMilitaryTime()
addZero()
var scroller="TIME: "+hr+":"+min+":"+sec+" "+ampm
var timeout=setTimeout("scroll()", 1000)
document.title=actualtitle+scroller
}
if (document.all||document.getElementById)
scroll()DI SINI
2. Jam mengikuti cursor
yang ini mungkin lebih keren, karena bentuknya digital, ngikutin cursor lagi, keren lah scriptnya..!!!
langsung aja
berikut code nya :
<pre>//Digital clock following mouse [Posted by Xiruki]
//Credits to: mf2fm
//Do not remove the credits
var colour="#639"; // change the colour of the clock
var clock_size=8; // change the size of the clock (range is from 4 to as big as you like!)
/****************************
* Digital Clock Effect *
*(c)2005-7 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/
var clok;
var cpos=0;
var newx=xmo=400;
var newy=ymo=300;
window.onload=function() { if (document.getElementById) {
clok=document.createElement("div");
clok.style.position="absolute";
clok.appendChild(createDigit("dig0"));
clok.appendChild(createDigit("dig1"));
clok.appendChild(createColon());
clok.appendChild(createDigit("dig2"));
clok.appendChild(createDigit("dig3"));
clok.appendChild(createColon("ms"));
clok.appendChild(createDigit("dig4"));
clok.appendChild(createDigit("dig5"));
document.body.appendChild(clok);
tick();
}}
var digit=new Array(247, 146, 221, 219, 186, 235, 239, 210, 255, 251);
function tick() {
var now=new Date();
var t=Math.floor(now.getTime()/500)%2;
var i, j, k;
var won=oo(now.getHours())+oo(now.getMinutes())+oo(now.getSeconds());
for (i=0; i<6; i++) for (j=0; j<7; j++) {
k=digit[won.substring(i, i+1)].toString(2).substring(j+1, j+2);
document.getElementById("dig"+i+j).style.backgroundColor=(k==1)?colour:"transparent";
}
document.getElementById("mstop").style.backgroundColor=(t)?"transparent":colour;
document.getElementById("msbot").style.backgroundColor=(t)?"transparent":colour;
xmo+=Math.floor((newx-xmo)/4);
clok.style.left=Math.round(xmo-(clock_size+2)*4)+"px";
ymo+=Math.floor((newy-ymo)/4);
clok.style.top=Math.round(ymo-clock_size*2.5)+"px";
setTimeout("tick()", 40);
}
document.onmousemove=mouse;
function mouse(e) {
newy=(e)?e.pageY:event.y+scro();
newx=(e)?e.pageX:event.x;
}
function scro() {
var scro=0;
if (document.body.scrollTop) scro=document.body.scrollTop;
else if (document.documentElement && document.documentElement.scrollTop) scro=document.documentElement.scrollTop;
return (scro);
}
function oo(o) { return(((o<10)?"0"+o:o).toString()); }
function createDigit(id) {
var odiv=createDiv(0, cpos, clock_size+clock_size+2, clock_size+2, false);
cpos+=clock_size+4;
odiv.appendChild(createDiv(0, 1, 2, clock_size, id+"0"));
odiv.appendChild(createDiv(1, 0, clock_size, 2, id+"1"));
odiv.appendChild(createDiv(1, clock_size, clock_size, 2, id+"2"));
odiv.appendChild(createDiv(clock_size, 1, 2, clock_size, id+"3"));
odiv.appendChild(createDiv(clock_size+1, 0, clock_size, 2, id+"4"));
odiv.appendChild(createDiv(clock_size+1, clock_size, clock_size, 2, id+"5"));
odiv.appendChild(createDiv(clock_size+clock_size, 1, 2, clock_size, id+"6"));
return (odiv);
}
function createColon(id) {
var odiv=createDiv(0, cpos, clock_size+clock_size+2, 2, false);
cpos+=4;
var dot1=createDiv(4, 0, 3, 2, (id)?id+"top":false);
dot1.style.backgroundColor=colour;
odiv.appendChild(dot1);
var dot2=createDiv(clock_size+clock_size-5, 0, 3, 2, (id)?id+"bot":false);
dot2.style.backgroundColor=colour;
odiv.appendChild(dot2);
return (odiv);
}
function createDiv(top, left, height, width, id) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.top=top+"px";
div.style.left=left+"px";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
if (id) div.setAttribute("id", id);
return (div);
}3. Jam Mengikuti Cursor (jam dinding)
untuk script yang ini, mungkin agak sama dengan yang di atas, namun sebenarnya, yang ini berbentuk jam dinding, jika masih bingung
LIHAT DEMONYA DI SINI
scriptnya:
/*****************/
/* ANALOG CLOCK */
/****************/
// <![CDATA[
var second_hand_colour="#c9f"; // colour of second hand
var minute_hand_colour="#96c"; // colour of minute hand
var hour_hand_colour="#639"; // colour of hour hand
var facia_colour="#639"; // colour of facia (i.e. numbers)
var face_colour="#ccc"; // colour of face (can be set to "transparent");
var xoffset=60; // horizontal distance from centre of clock to cursor
var yoffset=60; // vertical distance from centre of clock to cursor
var size=120; // pixels high/wide
var facia=String.fromCharCode(9660)+" 1 2 "+String.fromCharCode(9668)+" 4 5 "+String.fromCharCode(9650)+" 7 8 "+String.fromCharCode(9658)+" 10 11"; // characters to use for face, starting at '12' position
var clok;
var newx=xmo=400;
var newy=ymo=300;
window.onload=function() { if (document.getElementById) {
var i, j, k;
clok=document.createElement("div");
clok.style.position="absolute";
if (face_colour!="transparent") for (i=0; i<size; i++) {
j=createDiv(false, face_colour);
if (document.all) j.style.filter="Alpha(Opacity=50)";
else j.style.opacity=0.5;
k=size*Math.sqrt(i/size-Math.pow(i/size, 2));
j.style.left=size/2-k+"px";
j.style.top=i+"px";
j.style.height="1px";
j.style.width=k*2+"px";
clok.appendChild(j);
}
for (i=1; i<size/4; i++) {
j=createDiv("sec"+i, second_hand_colour);
j.style.height="2px";
j.style.width="2px";
clok.appendChild(j);
}
for (i=1; i<size/4; i++) {
j=createDiv("min"+i, minute_hand_colour);
j.style.height="3px";
j.style.width="3px";
clok.appendChild(j);
}
for (i=0; i<size/6; i++) {
j=createDiv("hour"+i, hour_hand_colour);
j.style.height="4px";
j.style.width="4px";
if (!i) j.style.top=j.style.left=size/2-2+"px";
clok.appendChild(j);
}
facia=facia.split(" ");
for (i=0; i<12; i++) {
j=createDiv(false, "transparent");
j.style.color=facia_colour;
j.style.font="bold 10pt monospace";
j.style.overflow="visible";
j.appendChild(document.createTextNode(facia[i]));
j.style.top=size/2-7-size/2*Math.cos(i*Math.PI/6)+"px";
j.style.left=size/2-5+size/2*Math.sin(i*Math.PI/6)+"px";
clok.appendChild(j);
}
document.body.appendChild(clok);
tick();
tock();
}}
function tick() {
var i, j;
var now=new Date();
var sec=(now.getSeconds()+(now.getMilliseconds()%1000)/1000)*Math.PI/30;
for (i=1; i<size/4; i++) {
j=document.getElementById("sec"+i).style;
j.left=size/2+2*i*Math.sin(sec)-1+"px";
j.top=size/2-2*i*Math.cos(sec)-1+"px";
}
xmo+=Math.floor((newx-xmo)/4);
clok.style.left=xmo+"px";
ymo+=Math.floor((newy-ymo)/4);
clok.style.top=ymo+"px";
setTimeout("tick()", 40);
}
function tock() {
var i, j;
var now=new Date();
var min=(now.getMinutes()+now.getSeconds()/60)*Math.PI/30;
var hrs=(now.getHours()+now.getMinutes()/60)*Math.PI/6
for (i=1; i<size/4; i++) {
j=document.getElementById("min"+i).style;
j.left=size/2+2*i*Math.sin(min)-1.5+"px";
j.top=size/2-2*i*Math.cos(min)-1.5+"px";
}
for (i=1; i<size/6; i++) { j=document.getElementById("hour"+i).style; j.left=size/2+2*i*Math.sin(hrs)-2+"px"; j.top=size/2-2*i*Math.cos(hrs)-2+"px"; } setTimeout("tock()", 999); } document.onmousemove=mouse; function mouse(e) { newy=yoffset-size/2+((e)?e.pageY:event.y+scro()); newx=xoffset-size/2+((e)?e.pageX:event.x); } function scro() { var scro=0; if (document.body.scrollTop) scro=document.body.scrollTop; else if (document.documentElement && document.documentElement.scrollTop) scro=document.documentElement.scrollTop; return (scro); } function createDiv(id, bg) { var div=document.createElement("div"); div.style.position="absolute"; div.style.overflow="hidden"; div.style.backgroundColor=bg; if (id) div.setAttribute("id", id); return (div); } // ]]>kalau kode di atas eror silahkan
LIHAT DI SINI
4. Script Sesuai Hari
nah script ini sebenarnya lumayan sederhana, anda dapat melihat hari apa sekarang tanpa harus menggunakan gadget yang kadang menyusahkan anda,
untuk contohnya anda bisa lihat di bawah:
nah kata-kata tersebut akan terganti sesuai harinya
scriptnya :
<!--
document.write("<font face=Times New Roman size=4><b>")
now = new Date()
if (now.getDay() == 5)
document.write("Jangan lupa Sholat JUMAT")
if (now.getDay() == 6)
document.write("ngeblog paling enak hari SABTU")
if (now.getDay() == 0)
document.write("wah hari ini hari MINGGU")
if (now.getDay() == 1)
document.write("siap siap upacara di hari SENIN")
if (now.getDay() == 2)
document.write("hari SELASA")
if (now.getDay() == 3)
document.write("enaknya makan bakso di hari RABU")
if (now.getDay() == 4)
document.write("wah..!! udah hari KAMIS")
document.write("</b></font>")
friendstertalk091011
//-->\kalau eror
LIHAT DI SINI
Bagaimana memasangnya ??
sebenarnya cara memasangnya sangat mudah, hanya banyak orang yang bingung dengan tutorial di atas, nah dan sebenarnya caranya sama ketika anda menambahkan efect salju dll di blog anda, jadi tinggal mempaste link yang telah saya letakkan di bawah scriot aslinya, untuk lebih mudah berikut tutorialnya
1. pilih salah satu script di bawah, dan langsung copy script yang anda inginkan (letaknya di bawah judul) :
a. membuat jam di title bar
<script src="http://h1.ripway.com/beehacker/live.js" type="text/javascript"></script>
b. Jam mengikuti cursor (digital)
<script src="http://blogacim.co.cc/tools/myclock.js" type="text/javascript"></script>
c. Jam mengikuti cursor (jam dinding)
<script src="http://blogacim.co.cc/tools/jamjie.js" type="text/javascript"></script>
d. Menentukan hari
<script src="http://blogacim.co.cc/tools/hari.js" type="text/javascript"></script>
2. sekali lagi silahkan copy script di atas, jika sudah silahkan LOGIN KE BLOG ANDA
3. TATA LETAK
4. Elemen Halaman
5. Add Gadget / Tambah Gadget
6. HTML/JAVASCRIPT
7. silahkan paste code yang sudah anda copy tadi
8. silahkan save lalu lihat hasilnya, gimana ??
SEMOGA BERMANFAAT





wah keren bgt tuh script2nyaa haha. ntar kapan2 aku coba yaaa
pertamaxxx gan…. pi kalo dipake semua bisa nambah berat loading page nih, huhuhuuhuhu……..
Caramelcoklat´s last blog ..Placebo Dipastikan Menggelar Aksinya 16 Februari 2010, Di Jakarta
Mainan Jaman Kuliah Dulu , Java Script , thanks Sob dah di ingatkan kembali hehehehhe
udah lupa semua soale
Sukses
Peluang Online´s last blog ..Hasilkan Duit dari Blog dengan PPC
wah sangat bermanfaat bgt thu artikel2nya…
@ananda : iapz..!! segera juga gak papa, hahaha
@caramel: hehehehe..!! nak kaskus nih…!! bisa kok kalo mau di convert
@peluang: hehehe.! salam om..! kalo ada ilmu javascript bagi2 ea
@beni: sip , thanks
wah mansatab ilmunya sob, bisa dipraktekin ni kayaknya
, trims dah berbagi ilmunya dua jempuol dagh.
@mazziyah: iapz..!! di tunggu comment nya di posting laen
Wah mantap neeh postingannya..,
tapi kalau mau dipasang.., dicopy dimana yah ??
he he he maklumlah saya awam tentang java2 gini..,
Awaluddin Jamal´s last blog ..SEKOLAH TINGGI KESEJAHTERAAN SOSIAL
keren nich sobat scriptnya, cara pasang diblog gimana ya?
heru´s last blog ..PEMIKIRAN ANDA MEMPENGARUHI TINGKAT TINGKAT ENERGI ANDA
@MAS awaluddin dan mas heru: mohon maaf, mas… saya akan lengkapi caranya:
1. copy script di atas, lalu nanti di paste di hostingan, misalnya http://ripway.com. nah kalo sudah silahkan nanti di load lewat lemen hallaman —> add widget —-> html/js lalu tambahkan kode ini
cara ke 2 :
silahkan liat link yang terletak dibawah script (tulisan KALO ERROR) nah copy aja nanti pake script ini
silahkan copy link nya lalu paste di http://alamatlinknyadisini, setelah itu ke page elemen, tambah widget, trus html/js..
selesai deh
waaaaaaaaahhh kayanya menarik neh..tp sayang i msh gaptek hihiih..jd binun mulainya..gmn dunk..
haibara´s last blog ..PRESENT CONTINUOUS ( I AM DOING )
nice scripting bro…keep to share
Interest programming? just visit All About Programming, read and leave comment…
Wannabe learn about blog, visit me in Let Go Blogs
@haibara: artikel nya sudah saya revisi
@newbie: thanks
wah, masnya udah master banget !!!! SIIPP !!! akan saya coba ah!!
thnx ya mas!!!
http://maswafa.blogspot.com
wah, bagus ni artikelx, thnks sob infox……………
AswinF´s last blog ..Tips Menuliskan kode HTML
ilmu yang sangat bermanfaat mas, thanx yaa
rumah blogger´s last blog ..A Song by Edgar Albert Guest
jarang ada postingan kayak gini, terima kasih langsung saya coba
@all: thanks ea
naaaaahh..gini aku baru ngerti hihihi..maap wong gaptek mas hihihi
haibara´s last blog ..PRESENT CONTINUOUS ( I AM DOING )
Wah mantap tuh mas!!