Tuesday, 25 March 2014
AAMath-Function file (Updated)
It is a javascript file that can be linked to your html webpages to include some of the functions to save time generating such functions.
Get more information on these functions for the reference file along with the script file.
-download script and reference-
Download
External linking url:
https://googledrive.com/host/0B9LZUJ9ROeSreUl0b1ZuSHB5TDA
View Reference Download language file for Notepad++
Hope its helpful.....will continue to add more functions
Get more information on these functions for the reference file along with the script file.
-download script and reference-
Download
External linking url:
https://googledrive.com/host/0B9LZUJ9ROeSreUl0b1ZuSHB5TDA
View Reference Download language file for Notepad++
Hope its helpful.....will continue to add more functions
Saturday, 22 March 2014
Wednesday, 19 March 2014
Monday, 17 March 2014
Saturday, 15 March 2014
Thursday, 13 March 2014
Wednesday, 5 March 2014
HTML5 Clock-3 [Code]
Creating a simple html clock using html, css and javascript |
<html> <head> <style> ... </style> </head> <body onload="runclock()"> <div class="cbg"></div> <div id="clock" class="clock"></div> <div id="min" class="min"></div> <div id="day" class="day"></div> <div id="date"></div> <div id="sec" class="sec"></div> <div id="sr1" class="sr" style="background:orange;"></div> <div id="sr2" class="sr" style="background:yellow;"></div> <div id="sr3" class="sr" style="background:lime;"></div> <div id="sr4" class="sr" style="background:red;"></div> <script> ... </script> </body> </html>
The style part is:
.clock { width:500px; height:500px; position:absolute; left:300px; top:100px; font-family:YouMurderer BB; font-size:300px; text-align:center; color:#900000; text-shadow:2px 2px black; } .min { width:500px; height:500px; position:absolute; left:450px; top:150px; font-family:YouMurderer BB; font-size:250px; text-align:center; color:#b64500; text-shadow:2px 2px black; } .cbg { width:500px; height:500px; border-radius:250px; position:absolute; left:300px; top:50px; } .day { width:150px; height:150px; position:absolute; left:475px; top:100px; font-family:YouMurderer BB; font-size:100px; text-align:center; color:#009315; text-shadow:2px 2px black; } #date { width:150px; height:150px; position:absolute; left:400px; top:120px; font-family:YouMurderer BB; font-size:150px; text-align:center; color:#00f6ff; text-shadow:2px 2px black; } .sec { width:150px; height:150px; position:absolute; left:575px; top:250px; font-family:YouMurderer BB; font-size:150px; text-align:center; color:#ffde00; text-shadow:2px 2px black; } .sr { position:absolute; left:300px; top:50px; width:20px; height:100px; background:red; } @keyframes secrun1 { 0%{top:50px;left:300px;transform:rotate(0deg);} 100%{top:400px;left:300px;transform:rotate(90deg);} } @keyframes secrun2 { 0%{top:400px;left:300px;transform:rotate(90deg);} 100%{top:400px;left:900px;transform:rotate(0deg);} } @keyframes secrun3 { 0%{top:400px;left:900px;transform:rotate(0deg);} 100%{top:50px;left:900px;transform:rotate(90deg);} } @keyframes secrun4 { 0%{top:50px;left:900px;transform:rotate(90deg);} 100%{top:50px;left:300px;transform:rotate(0deg);} }
Script part is:
function runclock() { var t = new Date(); var h = t.getHours(); var m = t.getMinutes(); var s = t.getSeconds(); var sec=s; var d = t.getDay(); var da=t.getDate(); d=day(d); m=putzero(m); h=format(h); h=putzero(h); da=putzero(da); s=putzero(s); //create animation if(sec%4==0) { document.getElementById('sr1').style.animation="secrun1 1s"; document.getElementById('sr2').style.animation="secrun2 1s"; document.getElementById('sr3').style.animation="secrun3 1s"; document.getElementById('sr4').style.animation="secrun4 1s"; } else if(sec%4==1) { document.getElementById('sr1').style.animation="secrun2 1s"; document.getElementById('sr2').style.animation="secrun3 1s"; document.getElementById('sr3').style.animation="secrun4 1s"; document.getElementById('sr4').style.animation="secrun1 1s"; } if(sec%4==2) { document.getElementById('sr1').style.animation="secrun3 1s"; document.getElementById('sr2').style.animation="secrun4 1s"; document.getElementById('sr3').style.animation="secrun1 1s"; document.getElementById('sr4').style.animation="secrun2 1s"; } else if(sec%4==3) { document.getElementById('sr1').style.animation="secrun4 1s"; document.getElementById('sr2').style.animation="secrun1 1s"; document.getElementById('sr3').style.animation="secrun2 1s"; document.getElementById('sr4').style.animation="secrun3 1s"; } //Display Clock setTimeout(function(){runclock()},500); document.getElementById('clock').innerHTML=h; document.getElementById('min').innerHTML=m; document.getElementById('day').innerHTML=d; document.getElementById('date').innerHTML=da; document.getElementById('sec').innerHTML=s; } function putzero(i) { if(i<10) { i="0"+i; } return i; } function format(j) { if(j>12) { j=j-12; } return j; } function day(k) { switch(k) { case 0:k="SUN"; break; case 1:k="MON"; break; case 2:k="TUE"; break; case 3:k="WED"; break; case 4:k="THU"; break; case 5:k="FRI"; break; case 6:k="SAT"; break; } return k; }
Sunday, 2 March 2014
Javascript Code- Magic Square Generator
HTML code to generate an odd-Magic Square:
HTML part is:
<html> <head> <title>MAgic SQuaRe</title> <style> .box { font-weight:bold; font-size:50px; text-align:center; outline:black solid thick; } </style> </head> <body> <table id="table" border="2"></table> <script> .... </script> </body> </html>Script part is:
for(t=0;;t++) { var n=prompt("Enter the dimension"); if(n%2!=0&&n>2) break; else alert("MAgic Square cannot be made"); } var last=n*n; var a=[]; for(m=0;m<n;m++) a[m]=[]; var i=0; var j=Math.floor(n/2);; for(var c=1;c<=last;c++) { if(i<0) i=n-(-i); if(i>=n) i=i-n; if(j<0) j=n-(-j); if(j>=n) j=j-n; a[i][j]=c; if(c%n==0) { i++; } else { i--; j++; } } document.write("<table border='2'>"); for(k=0;k<n;k++) { document.write("<tr>"); for(l=0;l<n;l++) { document.write("<td class='box' width='60' height='60'>"+a[k][l]+"</td>"); } document.write("</tr>"); } document.write("</table>");
Subscribe to:
Posts (Atom)