|
Scripts and Tools Share your free scripts , tools , icons, fontz, screen savers , etc here. |
|
Thread Tools | Display Modes |
#181
|
|||
|
|||
HTC-style JavaScript Countdown Timer with jQuery
If the JavaScript countdown timers are ever presented on jsB@nk still do not satisfy you:
- [url="http://www.javascriptbank.com/cool-javascript-digital-countdown-with-jquery.html"]Cool JavaScri... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Use CSS code below for styling the script CSS Code:
<link rel="stylesheet" type="text/css" href="style.css" /> JavaScript Code:
<script src="/javascript/jquery.js" type="text/javascript"></script> <script src="jquery.countdown.packed.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $('#countdown').countdown({until:$.countdown.UTCDate(-8, 2011, 1 - 1, 1), format: 'DHMS', layout: '<div id="timer">' + '<hr />'+ '<div id="timer_days" class="timer_numbers">{dnn}</div>'+ '<div id="timer_hours" class="timer_numbers">{hnn}</div>'+ '<div id="timer_mins" class="timer_numbers">{mnn}</div>'+ '<div id="timer_seconds" class="timer_numbers">{snn}</div>'+ '<div id="timer_labels">'+ '<div id="timer_days_label" class="timer_labels">days</div>'+ '<div id="timer_hours_label" class="timer_labels">hours</div>'+ '<div id="timer_mins_label" class="timer_labels">mins</div>'+ '<div id="timer_seconds_label" class="timer_labels">secs</div>'+ '</div>'+ '</div>' }); }); </script> HTML Code:
<div id="countdown"></div> Files [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] |
#182
|
|||
|
|||
thank for your sharing
|
#183
|
|||
|
|||
Calc4Chem: Awesome Scientific Calculator with Physical and Chemical constants
This is an amazing JavaScript calculator script that can be used as a common [Only Registered users can see links . Click Here To Register...] (with functions of sin, cos, log, ... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: CSS below for styling thescript, place it into HEAD section CSS Code:
<style type="text/css"> /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ /* --------------------------------------------------------- */ /* Calc4Chem */ /* --------------------------------------------------------- */ #calc4chem { position: relative; top: 15px; width: 529px; height: 377px; margin: auto; border: 3px outset; background: #e4e4e4; text-align: center; color: #eee; } #kalkulator { position: absolute; top: 3px; left: 3px; width: 257px; height: 365px; border: 0px ridge #f00; background: #e4e4e4; color: #fff; } #biljeska { position: absolute; top: 3px; left: 267px; width: 256px; height: 365px; border: 0px ridge #999; background: #e4e4e4; color: #fff; } #konstante { position: absolute; top: 13px; left: 275px; width: 245px; height: 350px; border: 1px ridge #999; background: #fff; color: #fff; display: none; /*visibility: hidden; visible hidden */ text-align: center; overflow: auto; } #numformat { position: absolute; top: 138px; left: 3px; width: 245px; height: 225px; border: 1px ridge #999; display: none; background: #e4e4e4; color: #fff; } .constnaslov { width: 200px; color: #00f; text-align: center; font: normal 12px/125% sans-serif; margin: 5px; padding-bottom: 5px; border-bottom: 1px #cacaba solid; } .const { width: 200px; text-align: center; font: 11px/125% sans-serif; margin: 5px; padding-bottom: 5px; border-bottom: 1px #cacaba solid; } .const a:link { display: block; color: #900; text-decoration: none; } .const a:visited { display: block; color: #036; text-decoration: none; } .const a:active { display: block; color: #900; text-decoration: none; } .const a:hover { display: block; background: #eaeafa; color: #900; text-decoration: none; } .crta { position: absolute; top: 0px; left: 262px; width: 2px; height: 372px; border: 2px inset; background: #fff; /* groove ridge */ color: #fff; } .tipkovnica { position: absolute; top: 138px; left: 5px; width: 245px; height: 228px; background: #e4e4e4; } .displej { position: absolute; top: 10px; left: 6px; width: 240px; height: 82px; border: 2px ridge #eee; background: #eee; } #numauto, #numsci, #numfix, #nummem, #numrad, #numdeg, #numgrad { position: absolute; margin-top: 2px; width: 26px; height: 10px; font: normal 9px sans-serif; color: #ccc; display: inline; border: 0px solid #e00; background: #eee; } #numauto { left: 5px; color: #000; } #numsci { left: 37px; } #numfix { left: 62px; } #nummem { left: 107px; } #numrad { left: 154px; color: #000; } #numdeg { left: 180px; } #numgrad { left: 205px; } .upit { position: absolute; top: 27px; left: 6px; width: 225px; height: 25px; border: 0px; background: #eee; text-align: left; font: normal 9pt sans-serif; letter-spacing: 1px; color: #0a0; } .rezultat { position: absolute; top: 52px; left: 6px; width: 225px; height: 25px; border: 0px; background: #eee; text-align: right; font: bold 12pt sans-serif; letter-spacing: 1px; color: #00a; } .formatbr { position: absolute; top: 35px; left: 12px; width: 220px; height: 95px; border: 1px solid #cdcdcd; background: #e8e8e8; } .formatnaslov { position: relative; margin-top: 5px; font: normal 12pt cursive; text-align: center; } .automatik, .scienc, .fiksed { position: absolute; left: 6px; font: normal 10pt sans-serif; } .automatik {top: 10px;} .scienc {top: 38px;} .fiksed {top: 66px;} .decnaslov { position: absolute; top: 10px; left: 110px; width: 110px; text-align: center; font: normal 10pt sans-serif; color: #000; border: 0px solid #cdcdcd; } .decimal { position: absolute; top: 32px; left: 136px; width: 60px; height: 22px; } .separator { position: absolute; top: 70px; left: 65px; width: 150px; text-align: right; font: normal 10pt sans-serif; color: #000; border: 0px solid #cdcdcd; } .rad { position: absolute; top: 140px; left: 12px; width: 220px; height: 21px; border: 1px solid #cdcdcd; background: #e8e8e8; } .deg { position: relative; margin: 4px; top: -1px; font: normal 10pt sans-serif; } .cls { position: absolute; top: 103px; left: 217px; width: 30px; height: 22px; color: #f00; display: none; } .zadatak { position: absolute; top: 98px; left: 6px; width: 240px; height: 28px; border: 2px groove #eee; background: #fff; } .unos { position: absolute; top: 1px; left: 4px; width: 228px; height: 23px; border: 0px; font: bold 10pt cursive; color: #060; } .tekstarea { position: absolute; top: 10px; left: 8px; width: 238px; height: 317px; padding: 0px 0px 0px 5px; border: 2px groove #ccc; background: #fff; /*plavo*/ font: normal 9pt/150% monospace; color: #345678; overflow: auto; } .n1, .n2, .n3, .n4 { position: absolute; top: 340px; height: 24px; width: 80px; font: normal 9pt sans-serif; color: #000; } .n1 { left: 8px; } .n2 { left: 91px; } .n3 { left: 174px; } .n4 { top: 174px; left: 85px; } .n2copy { position: absolute; left: 0px; top: 206px; width: 242px; color: #aaa; font: normal 9pt sans-serif; text-align: center; } .b11, .b12, .b13, .b14, .b15, .b16, .b21, .b22, .b23, .b24, .b25, .b26, .b31, .b32, .b33, .b34, .b35, .b36 { position: absolute; height: 25px; width: 40px; padding: 0px; color: #000; font: normal 10pt monospace; } .b41, .b42, .b43, .b44, .b45, .b46, .b51, .b52, .b53, .b54, .b55, .b56, .b61, .b62, .b63, .b64, .b65, .b66, .b71, .b72, .b73, .b74, .b75, .b76 { position: absolute; height: 35px; width: 40px; padding: 0px; color: #000; } .b55, .b75 { position: absolute; height: 35px; width: 81px; font: normal 10pt sans-serif; color: #000; } .b75 { position: absolute; height: 35px; width: 81px; font: normal 15pt sans-serif; color: #050; } .b45, .b46 { font: normal 10pt sans-serif; color: #a00; } .b34 { font: normal 10pt sans-serif; } .b44, .b54, .b74 { font: bold 13pt sans-serif; color: #00f; } .b64 { font: normal 15pt serif; color: #00f; } .b41, .b42, .b43, .b51, .b52, .b53, .b61, .b62, .b63, .b71, .b72 { font: normal 12pt cursive; color: #575; } .b11, .b12, .b13, .b14, .b15, .b16 { top: 0px; } .b21, .b22, .b23, .b24, .b25, .b26 { top: 26px; } .b31, .b32, .b33, .b34, .b35, .b36 { top: 52px; } .b41, .b42, .b43, .b44, .b45, .b46 { top: 85px; } .b51, .b52, .b53, .b54, .b55, .b56 { top: 121px; } .b61, .b62, .b63, .b64, .b65, .b66 { top: 156px; } .b71, .b72, .b73, .b74, .b75, .b76 { top: 192px; } .b11, .b21, .b31, .b41, .b51, .b61, .b71 { left: 0px } .b12, .b22, .b32, .b42, .b52, .b62, .b72 { left: 41px } .b13, .b23, .b33, .b43, .b53, .b63, .b73 { left: 82px } .b14, .b24, .b34, .b44, .b54, .b64, .b74 { left: 123px } .b15, .b25, .b35, .b45, .b55, .b65, .b75 { left: 164px } .b16, .b26, .b36, .b46, .b56, .b66, .b76 { left: 205px } /* END of Calc4Chem */ /* --------------------------------------------------------- */ /*Eni Generalic, Split, Create: 1999/10/14; Update: 2008/02/27 */ /* Copyright © 2008 by EniG. */ </style> JavaScript Code:
<script type="text/javascript"> // Created by: Eni Generalic | http://www.periodni.com/ // This script downloaded from www.JavaScriptBank.com // Scientific Calculator written by Eni Generalic - http://www.periodni.com/ // Copyright © 2008 by EniG. If you use a variant of this in your page, please email me at eni.generalic@gmail.com // Eni Generalic, Split, Create: 1999/10/14; Update: 2008/03/01 // Atomic Weights of the Elements 2005, Pure & Appl. Chem., Vol. 78, No. 11, (2006) 2051-2066). var EniG = " Calc4Chem - www.periodni.com"; var que = ""; var ans = 0; var mem = 0; var broj = "0"; var tocka = 0; var eksp = 0; var baza = ""; var eksponent = 3; var rjesenje = 0; var decimala = 14; var asf = 0; var rdg = 0; var sep1000 = 0; var enter = ""; var mr = ""; var pi = 3.141592653589793; var e = 2.71828182845905; var abc = ""; //window.onerror = handleError; function start(){ enter = "\r\n"; mr = document.racunalo.memorija.value; document.racunalo.notes.value = enter + EniG + enter; var dan = new Date(); document.racunalo.notes.value += " " + dan.toLocaleString() + enter + enter; document.racunalo.zadatak.focus(); } function handleError() { //alert("YOU HAVE ENCOUNTERED A JAVASCRIPT ERROR"); document.racunalo.notes.value += " = Syntax Error\r\n"; document.racunalo.rezultat.value = "Syntax Error"; document.racunalo.zadatak.focus(); return true; } function memory(operator) { switch(operator) { case 1: // MS memorija = document.racunalo.rezultat.value; memorija = memorija.replace(/ /g,''); document.racunalo.memorija.value = memorija; document.racunalo.MR.title = mr + " (" + memorija + ")"; mem = parseFloat(memorija); stanje = (document.getElementById('nummem').style.color == '#000') ? '#ccc' : '#000'; document.getElementById('nummem').style.color = stanje; break; case 2: // MR var memorija = document.racunalo.memorija.value; if (memorija==0 || slovo(memorija.charAt(0))) {memorija = ""} document.racunalo.zadatak.value += memorija; break; case 3: // CLS if (document.racunalo.zadatak.value == "") {document.racunalo.rezultat.value = "";} else {document.racunalo.zadatak.value = ""; } break; case 4: // Mode vidi('numformat'); break; case 5: // Reset document.racunalo.notes.value = enter + EniG + enter; document.racunalo.memorija.value = ""; document.racunalo.MR.title = mr; decimala = 14; asf = 0; rdg = 0; sep1000 = 0; mem = 0; ans = 0; document.getElementById('numauto').style.color = '#000'; document.getElementById('numsci').style.color = '#ccc'; document.getElementById('numfix').style.color = '#ccc'; document.getElementById('nummem').style.color = '#ccc'; document.getElementById('numrad').style.color = '#000'; document.getElementById('numdeg').style.color = '#ccc'; document.getElementById('numgrad').style.color = '#ccc'; break; } document.racunalo.zadatak.focus(); } function dodajBroj(noviznak) { document.racunalo.zadatak.focus(); document.racunalo.zadatak.value += noviznak } function dodajConst(noviznak) { document.racunalo.zadatak.focus(); document.racunalo.zadatak.value += noviznak; vidi('konstante') } function izracunaj(zarez) { var pitanje = ""; var odgovor = ""; var mem = 0; //onerror = handleError; if (zarez >= 1) { if (document.racunalo.zadatak.value == "") { broj = document.racunalo.rezultat.value; } else { broj = document.racunalo.zadatak.value; if (ubacirezultat(broj.charAt(0))) { broj = document.racunalo.rezultat.value + broj; } } } for (var i=0; i<broj.length; i++) { var mm = broj.charAt(i); var mmup = broj.charAt(i+1); var mmdn = broj.charAt(i-1); if (mm == ",") {mm = ".";} else if (mm == "}" || mm == "]") {mm = ")";} else if (mm == "{" || mm == "[") {mm = "(";} else if (mm == " " || mm == "=") {mm = "";} else if (mm == "*" && mmup == "*") {mm = "^"; i += 1;} else if (mm == "+" && mmup == "-") {mm = "-"; i += 1;} else if (mm == "E" && kemilimat(mmup)) {mm = "e";} if (mm == "." && BrojAtoma(mmdn)==false) {mm = "0.";} else if (velikoslovo(mm)) {var kem = 1;} if (pitanje == "0") { if (operator(mm)) {} else if (mm != ".") {pitanje = "";} } //if (i == 0) { // if (mm == "0" && mmup == "0") {mm = "";} //} pitanje += mm; } if (zarez == 1) { document.racunalo.notes.value += pitanje; document.racunalo.upit.value = pitanje; if (kem == 1) { //var atom = "+" + pitanje; odgovor = masa(pitanje); } else { odgovor = zagrada(pitanje); } } else { odgovor = matematika(zarez, pitanje) } odgovor = odgovor.toString(); document.racunalo.oldrezultat.value = odgovor; ans = parseFloat(odgovor); izgledbroja(odgovor); document.racunalo.zadatak.value = ""; document.racunalo.zadatak.focus(); } function matematika(zarez, rjesenje) { var pitanje = ""; with (Math) { if (zarez == 2) { pitanje = rjesenje + "^2"; rjesenje = pow(rjesenje, 2) } else if (zarez == 3) { pitanje = rjesenje + "^(1/2)"; rjesenje = sqrt(rjesenje) } else if (zarez == 4) { pitanje = rjesenje + "*(-1)"; rjesenje = -rjesenje } else if (zarez == 5) { pitanje = "ln(" + rjesenje + ")"; rjesenje = log(rjesenje) } else if (zarez == 6) { pitanje = "e^" + rjesenje; rjesenje = pow(E, rjesenje) } else if (zarez == 7) { pitanje = "1/" + rjesenje; rjesenje = 1/rjesenje } else if (zarez == 8) { pitanje = "log(" + rjesenje + ")"; rjesenje = log(rjesenje)/LN10 } else if (zarez == 9) { pitanje = "10^" + rjesenje; rjesenje = pow(10, rjesenje) } else if (zarez >= 10 && zarez <= 12) { if (zarez == 10) { pitanje = "atan(" + rjesenje + ")"; rjesenje = atan(rjesenje) } else if (zarez == 11) { pitanje = "acos(" + rjesenje + ")"; rjesenje = acos(rjesenje) } else if (zarez == 12) { pitanje = "asin(" + rjesenje + ")"; rjesenje = asin(rjesenje) } if (document.racunalo.stupnjevi[1].checked) {rjesenje = (rjesenje * 180) / PI} else if (document.racunalo.stupnjevi[2].checked) {rjesenje = (rjesenje * 200) / PI} } else if (zarez >= 14 && zarez <= 16) { if (document.racunalo.stupnjevi[1].checked) {radijani = (rjesenje / 180) * PI} else if (document.racunalo.stupnjevi[2].checked) {radijani = (rjesenje / 200) * PI} else {radijani = rjesenje} if (zarez == 14) { pitanje = "tan(" + rjesenje + ")"; rjesenje = tan(radijani) } else if (zarez == 15) { pitanje = "cos(" + rjesenje + ")"; rjesenje = cos(radijani) } else if (zarez == 16) { pitanje = "sin(" + rjesenje + ")"; rjesenje = sin(radijani) } } else if (zarez == 17) { pitanje = rjesenje + "%"; rjesenje = rjesenje/100 } else if (zarez == 18) { pitanje = rjesenje + "ppm"; rjesenje = rjesenje/1000000 } else if (zarez == 20) { pitanje = rjesenje + "!"; rjesenje = factorial(rjesenje) } else if (zarez == 21) { eksponent = prompt("Unesite eksponent / Please enter exponent", 3); pitanje = rjesenje + "^" + eksponent; rjesenje = pow(rjesenje, eksponent) } else if (zarez == 22) { eksponent = prompt("Unesite korijen / Please enter root", 3); document.racunalo.notes.value += rjesenje + "^(1/" + eksponent + ")"; rjesenje = pow(rjesenje, (1/eksponent)) } } document.racunalo.notes.value += pitanje; document.racunalo.upit.value = pitanje; return rjesenje; } function zagrada(xbroj) { var intZagClose = 0 var intZagOpen = 0 var intXbroj = 0 var strNoviXbroj = "" var strNoviZbroj = ""; do { //document.racunalo.notes.value += enter + "intXbroj = " + intXbroj; 2+(2*(2+4)+3)^3+5 xbroj = xbroj.replace(/--/g,"-1*-"); intZagClose = xbroj.indexOf(")"); if (intZagClose != -1) { for (var i = intZagClose; i >= 0; i--) { if (xbroj.charAt(i)=="(") { intZagOpen = i; strNoviZbroj = xbroj.substring(intZagOpen+1,intZagClose); break; } } } else { strNoviZbroj = xbroj; } strNoviZbroj = strNoviZbroj + "*1"; strNoviZbroj = postotak(strNoviZbroj); strNoviZbroj = trigonometrija(strNoviZbroj); strNoviZbroj = logaritam(strNoviZbroj); strNoviZbroj = potencija(strNoviZbroj); strNoviZbroj = racun(strNoviZbroj); if (intZagClose != -1) { xbroj = xbroj.replace(xbroj.substring(intZagOpen, intZagClose+1), strNoviZbroj); } else { xbroj = strNoviZbroj; } } while (intZagClose > 0) return xbroj; } function racun(zbroj) { with (Math) {zbroj = eval(zbroj);} return zbroj; } function potencija(ulaz) { var intZagClose = 0 var intZagOpen = 0; var intXbroj = ulaz.indexOf("^"); //2+2^3+2,15^2+4 while (intXbroj > 0) { for (var i = intXbroj - 1; i >= 0; i--) { if (operator(ulaz.charAt(i)) && ulaz.charAt(i-1)!="e") { //if (i > 0 && operator(ulaz.charAt(i-1))) { intZagOpen = i+1; break; } } if (ulaz.charAt(i) == "-"){ if (i == 0) {intZagOpen = 0;} else if (i > 0 && operator(ulaz.charAt(i-1))) {intZagOpen = i;} } var strNoviXbroj = ulaz.substring(intZagOpen,intXbroj); for (var i = intXbroj + 2; i < ulaz.length; i++) { if (operator(ulaz.charAt(i)) && ulaz.charAt(i-1)!="e") {intZagClose = i-1; break} } var strNoviYbroj = ulaz.substring(intXbroj+1,intZagClose+1); if (strNoviXbroj == 'e') {strNoviXbroj = e}; //cps with (Math) { intXbroj = pow(strNoviXbroj, strNoviYbroj); } //if (i != 0 && ulaz.charAt(i-1)) {} // za negativne brojeve -3^2 = -9 ili 9 ulaz = ulaz.replace(ulaz.substring(intZagOpen, intZagClose+1), intXbroj); intXbroj = ulaz.indexOf("^"); } return ulaz; } function postotak(ulaz) { var intZagClose = 0; var intZagOpen = 0; var strDesnoFun = new Array ("!", "%"); for (var f = 0; f < 2; f++) { var intXbroj = ulaz.indexOf(strDesnoFun[f]); while (intXbroj > 0) { for (var i = intXbroj - 1; i >= 0; i--) { if (operator(ulaz.charAt(i)) && ulaz.charAt(i-1)!="e") {intZagOpen = i+1; break} } var strNoviXbroj = ulaz.substring(intZagOpen,intXbroj); intZagClose = intXbroj+1; with (Math) { if (f == 0) { intXbroj = factorial(strNoviXbroj); } else { intXbroj = strNoviXbroj/100; } } ulaz = ulaz.replace(ulaz.substring(intZagOpen, intZagClose), intXbroj); intXbroj = ulaz.indexOf(strDesnoFun[f]); } } return ulaz; } function trigonometrija(kut) { var intZagClose = 0 var intKut = 0 var strNoviKut = "" var strKrozPi = ")" var strPiKroz = ")"; switch(rdg) { case 1: strKrozPi = ")*180/pi"; strPiKroz = "*pi/180)"; break; case 2: strKrozPi = ")*200/pi"; strPiKroz = "*pi/200)"; break; default: strKrozPi = ")"; strPiKroz = ")"; } var strTrigFun = new Array ("sin", "cos", "tan"); for (var f = 0; f < 3; f++) { intKut = kut.indexOf(strTrigFun[f]); if (intKut >= 0) { do { //document.racunalo.notes.value += enter + intKut + enter; cos(2*(3+5)+3*(2+4))+1 2+(2*(2+cos(4))+3)+(3^3+5)*4 intZagClose = kut.length; for (var i = intKut+4; i < intZagClose; i++) { if (operator(kut.charAt(i)) && kut.charAt(i-1)!="e") { intZagClose = i; strNoviKut = kut.substring(intKut+3, intZagClose); break; } } if (intKut>0 && kut.charAt(intKut-1)=="a") { intKut = intKut - 1; strNoviKut = "a" + strTrigFun[f] + "(" + strNoviKut + strKrozPi; } else { strNoviKut = strTrigFun[f] + "(" + strNoviKut + strPiKroz; } strNoviKut = racun(strNoviKut); strNoviKut = Math.round(strNoviKut * Math.pow(10,14)) / Math.pow(10,14); kut = kut.replace(kut.substring(intKut, intZagClose), strNoviKut); intKut = kut.indexOf(strTrigFun[f]); } while (intKut != -1); } } return kut; } function logaritam(kut) { var intZagClose = 0 var intKut = 0 var strNoviKut = "" var strKrozPi = ")" var strPiKroz = ")"; // var e = 2.71828182845905 var strLogFun = new Array ("ln", "log"); for (var f = 0; f < 2; f++) { intKut = kut.indexOf(strLogFun[f]); if (intKut >= 0) { do { intZagClose = kut.length; for (var i = intKut; i < intZagClose; i++) { if (operator(kut.charAt(i)) && kut.charAt(i-1)!="e") { intZagClose = i; strNoviKut = kut.substring(intKut+strLogFun[f].length, intZagClose); break; } } if (f == 0) { if (intKut>0 && kut.charAt(intKut-1)=="a") { intKut = intKut - 1; strNoviKut = "pow(E," + strNoviKut + ")"; } else { strNoviKut = "log(" + strNoviKut + ")"; } } else { if (intKut>0 && kut.charAt(intKut-1)=="a") { intKut = intKut - 1; strNoviKut = "pow(10," + strNoviKut + ")"; } else { strNoviKut = "log(" + strNoviKut + ")/LN10"; } } strNoviKut = racun(strNoviKut); kut = kut.replace(kut.substring(intKut, intZagClose), strNoviKut); intKut = kut.indexOf(strLogFun[f]); } while (intKut != -1); } } return kut; } function izazareza(novibroj) { with (Math) { if (eksp == -1) { var duzina = tocka; if (duzina == -1) {duzina = novibroj.length} var desni = ""; if (duzina > 16) { var privremeni = round(novibroj*pow(10, 16)) + " "; var novie = privremeni.indexOf("e"); var lijevi = (privremeni.substring(0,novie)); lijevi = round(lijevi*pow(10, 15))/pow(10, 15) + " "; desni = (privremeni.substring(novie+2,privremeni.length-1)); desni = "e+" + (desni-18); } else { var lijevi = round(novibroj*pow(10, decimala))/pow(10, decimala) + " "; } } else { var lijevi = novibroj.substring(0,eksp); var desni = novibroj.substring(eksp,novibroj.length); lijevi = round(lijevi*pow(10, decimala))/pow(10, decimala) + " "; } lijevi = lijevi.substring(0,lijevi.length - 1); if (lijevi.charAt(0) == ".") {lijevi = "0" + lijevi;} if (decimala < 14) { if (lijevi.indexOf(".") == -1 && decimala != 0) {lijevi += "."} var nula = (tocka + decimala) - (lijevi.length - 1); if (nula > 0 && decimala > 0) { for (var n = 0; n < nula; n++) { lijevi += "0"; } } } return (lijevi + desni); } } function factorial(n) { if ((n == 0) || (n == 1)) { return 1; } else { var odgovor = (n * factorial(n-1)); return odgovor; } } function masa(atom) { with (Math) { var atominfo = false; var mm=""; var mmdn=""; var mmup=""; var znak=""; var izraz=""; var Pi=pi; var H=1.0079; var He=4.0026; var Li=6.941; var Be=9.0122; var B=10.811; var C=12.011; var N=14.007; var O=15.999; var F=18.998; var Ne=20.18; var Na=22.99; var Mg=24.305; var Al=26.982; var Si=28.086; var P=30.974; var S=32.065; var Cl=35.453; var Ar=39.948; var K=39.098; var Ca=40.078; var Sc=44.956; var Ti=47.867; var V=50.942; var Cr=51.996; var Mn=54.938; var Fe=55.845; var Co=58.933; var Ni=58.693; var Cu=63.546; var Zn=65.409; var Ga=69.723; var Ge=72.64; var As=74.922; var Se=78.96; var Br=79.904; var Kr=83.798; var Rb=85.468; var Sr=87.62; var Y=88.906; var Zr=91.224; var Nb=92.906; var Mo=95.94; var Tc=98; var Ru=101.07; var Rh=102.91; var Pd=106.42; var Ag=107.87; var Cd=112.41; var In=114.82; var Sn=118.71; var Sb=121.76; var Te=127.6; var I=126.9; var Xe=131.29; var Cs=132.91; var Ba=137.33; var La=138.91; var Ce=140.12; var Pr=140.91; var Nd=144.24; var Pm=145; var Sm=150.36; var Eu=151.96; var Gd=157.25; var Tb=158.93; var Dy=162.5; var Ho=164.93; var Er=167.26; var Tm=168.93; var Yb=173.04; var Lu=174.97; var Hf=178.49; var Ta=180.95; var W=183.84; var Re=186.21; var Os=190.23; var Ir=192.22; var Pt=195.08; var Au=196.97; var Hg=200.59; var Tl=204.38; var Pb=207.2; var Bi=208.98; var Po=209; var At=210; var Rn=222; var Fr=223; var Ra=226; var Ac=227; var Th=232.04; var Pa=231.04; var U=238.03; var Np=237; var Pu=244; var Am=243; var Cm=247; var Bk=247; var Cf=251; var Es=252; var Fm=257; var Md=258; var No=259; var Lr=262; var Rf=267; var Db=268; var Sg=271; var Bh=272; var Hs=277; var Mt=276; var Ds=281; var Rg=280; for (var i=0; i<atom.length; i++) { mm = atom.charAt(i); mmup = atom.charAt(i+1); bigup = mm.toUpperCase(); mmdn = atom.charAt(i-1); if (mm == "[") {mm = "("} else if (mm == "]") {mm = ")"} else if (mm == ",") {mm = "."} if (slovo(mm)) {atominfo = true} if (matoperator(mm)) {atominfo = false; znak=""} if (atominfo) { if (matoperator(mmup)) {znak=")"} if (matoperator(mmdn)) {izraz += "(" + mm + znak} else if (mmdn=="(") {izraz += mm + znak} else if (mmdn=="[") {izraz += mm + znak} else if (slovo(mm)) {izraz += "+" + mm + znak} else if (BrojAtoma(mmdn)) {izraz += mm + znak} else if (BrojAtoma(mm)) {izraz += "*" + mm + znak} else {izraz += mm + znak} } else {izraz += mm} } odgovor = eval(izraz); return odgovor; } } function slovo(znak) { var slovo="(ABCDEFGHIKLMNOPRSTUVWXYZ"; for (var i=0; i<slovo.length; i++) if (znak == slovo.charAt(i)) {return true} {return false} } function velikoslovo(znak) { var slovo="ABCDEFGHIKLMNOPRSTUVWXYZ"; for (var i=0; i<slovo.length; i++) if (znak == slovo.charAt(i)) {return true} {return false} } function maloslovo(znak) { var slovo="abcdefghiklmnoprstuvwxyz"; for (var i=0; i<slovo.length; i++) if (znak == slovo.charAt(i)) {return true} {return false} } function matoperator(znak) { var matoperator="*/+-"; for (var i=0; i<matoperator.length; i++) if (znak == matoperator.charAt(i)) {return true} if (znak == "") {return true} if (znak == null) {return true} return false } function operator(znak) { var matoperator="^*/+-"; if (matoperator.indexOf(znak) >= 0) {return true} {return false} } function ubacirezultat(znak) { var ubacirezultat="^*/+"; for (var i=0; i<ubacirezultat.length; i++) if (znak == ubacirezultat.charAt(i)) {return true} return false } function BrojAtoma(znak) { var atom = "1234567890"; for (var i=0; i<atom.length; i++) if (znak == atom.charAt(i)) {return true} {return false} } function kemilimat(znak) { var atom = "rsu"; if (atom.indexOf(znak) == -1) {return true} {return false} } function numformat(x){ var kut = new Array("auto", "sci", "fix"); decimala = x; var broj = document.racunalo.oldrezultat.value; if (decimala < 13) { document.racunalo.notes.value += "[" + kut[asf] + decimala + "]"; } else { decimala = 14; document.racunalo.notes.value += "[" + kut[asf] + "]"; } if (broj != "0" && broj != "") { izgledbroja(broj) } else { document.racunalo.notes.value += enter; } document.racunalo.zadatak.focus(); } function scifix(x) { var kut = new Array("numauto", "numsci", "numfix"); document.getElementById(kut[asf]).style.color = '#ccc'; asf = x; var broj = document.racunalo.oldrezultat.value; switch(x) { case 1: document.getElementById('numsci').style.color = '#000'; if (decimala == 14) { document.racunalo.notes.value += "[sci]"; } else { document.racunalo.notes.value += "[sci" + decimala + "]"; } break; case 2: document.getElementById('numfix').style.color = '#000'; document.racunalo.izaZareza.options[2].selected = true; if (decimala == 14) { decimala = 2; document.racunalo.notes.value += "[fix2]"; } else { document.racunalo.notes.value += "[fix" + decimala + "]"; } break; default: document.getElementById('numauto').style.color = '#000'; document.racunalo.izaZareza.options[14].selected = true; document.racunalo.notes.value += "[auto]"; decimala = 14; } if (broj != "0" && broj != "") {izgledbroja(broj)} document.racunalo.zadatak.focus(); } function raddeg(x) { var kut = new Array("numrad", "numdeg", "numgrad"); document.getElementById(kut[rdg]).style.color = "#ccc"; rdg = x; document.getElementById(kut[x]).style.color = "#000"; document.racunalo.zadatak.focus(); } function seplk() { var broj = document.racunalo.oldrezultat.value; if (document.getElementById('seplk').checked) { document.getElementById('seplk').checked = false; sep1000 = 0; } else { document.getElementById('seplk').checked = true; sep1000 = 1; } if (broj.length > 3) {izgledbroja(broj)} } function izgledbroja(broj) { var nule = "000000000000000"; var minus = ""; if (broj.charAt(0) == "-") {minus = "-";} if (asf == 2) { if (Math.eval(broj+"*"+minus+"1-1e-"+decimala) < 0) {broj = "0"} } var eplace = broj.indexOf("e"); if (eplace > 0) { var x = broj.substring(0, eplace); var y = broj.substring(eplace); } else if (asf == 1) { var x = parseFloat(broj) * 1E50; broj = x.toString(); eplace = broj.indexOf("e"); x = broj.substring(0, eplace); var y = broj.substring(eplace+1); y = parseInt(y) - 50; y = "e" + y; } else { var x = broj; var y = ""; } var oplace = broj.indexOf("."); broj = parseInt(x); if (oplace == -1) {x = "0";} {x = "0" + x.substring(oplace);} x = parseFloat(x); with (Math) { x = round(x * pow(10,decimala)) / pow(10,decimala); broj = abs(broj) + x; } x = broj.toString(); oplace = x.indexOf("."); //document.racunalo.notes.value += enter + "oplace_1 = " + oplace; if (oplace == 0) { broj = "0" + x + nule.substring(0, decimala); } else if (oplace > 0) { x = x.concat(nule); broj = x.substring(0, oplace); broj += x.substring(oplace, oplace+decimala+1); } else { broj = x + "." + nule.substring(0, decimala); } if (decimala == 14) {broj = parseFloat(broj)} broj = minus.concat(broj, y); //PROBA POCETAK if (sep1000) { //document.racunalo.notes.value += enter + "separator_1 = " + broj; var rezultat = ""; var strexp = ""; oplace = broj.indexOf('.'); //if (oplace == -1) {oplace = 0;} eplace = broj.indexOf('e'); if (eplace == -1) {eplace = broj.length;} {strexp = broj.substring(eplace);} var tri = 0; for (var i=oplace+1; i<eplace; i++) { tri += 1; if (tri == 3) { rezultat += broj.charAt(i) + " "; tri = 0; } else { rezultat += broj.charAt(i); } } rezultat += strexp //document.racunalo.notes.value += enter + "separator_2 = " + rezultat; if (oplace > -1) { rezultat = "." + rezultat; tri = 0; for (var i=oplace-1; i>=0; i--) { if (tri == 3) { rezultat = broj.charAt(i) + " " + rezultat; tri = 0; } else { rezultat = broj.charAt(i) + rezultat; } tri += 1; } } rezultat = rezultat.replace("- ", "-"); broj = rezultat; //document.racunalo.notes.value += enter + "separator_3 = " + rezultat; } //PROBA KRAJ document.racunalo.rezultat.value = broj; document.racunalo.notes.value += " = " + broj + enter; return broj; } function zaokruzi_new(ebroj) { // max 16 decimala //var n=16; var x=ebroj.toExponential(decimala); document.racunalo.notes.value += enter + "toExponential = " + x + enter; var x=ebroj.toPrecision(decimala); document.racunalo.notes.value += "toPrecision = " + x + enter; var x=ebroj.toFixed(decimala); document.racunalo.notes.value += "toFixed = " + x + enter; document.racunalo.rezultat.value = x; document.racunalo.notes.value += " = " + x + enter; } function vidi(me) { //if (document.getElementById) { stanje = (document.getElementById(me).style.display == 'block') ? 'none' : 'block'; document.getElementById(me).style.display = stanje; //document.getElementById(me).style.visibility = stanje //} } //Eni Generalic, Split, Create: 1999/10/14; Update: 2008/03/01 // Copyright © 2008 by EniG. </script> HTML Code:
<div id="calc4chem"> <!-- /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ --> <!-- BEGIN calc4chem --> <form action="http://www.periodni.com" name="racunalo"> <input type="hidden" name="oldrezultat" value=""> <input type="hidden" name="memorija" value="Memory recall"> <div id="kalkulator"> <div class="displej"> <input type="text" name="numauto" value="AUTO" id="numauto" onfocus="ascifix[0].click()"> <input type="text" name="numsci" value="SCI" id="numsci" onfocus="ascifix[1].click()"> <input type="text" name="numfix" value="FIX" id="numfix" onfocus="ascifix[2].click()"> <input type="text" name="nummem" value="MEM" id="nummem" onfocus="MS.click()"> <input type="text" name="numrad" value="RAD" id="numrad" onfocus="stupnjevi[0].click()"> <input type="text" name="numdeg" value="DEG" id="numdeg" onfocus="stupnjevi[1].click()"> <input type="text" name="numgrad" value="GRAD" id="numgrad" onfocus="stupnjevi[2].click()"> <input type="text" name="upit" value="Problem" onClick="this.select()" class="upit"> <input type="text" name="rezultat" value="Solution" onClick="this.select()" class="rezultat"> </div> <div class="zadatak"> <input type="text" name="zadatak" value="" onKeyDown="if (event.keyCode==13) {enter.click()}" class="unos"> </div> <input type="button" name="cls" value="Cls" title="Clear" onClick="memory(3)" class="cls"> <div class="tipkovnica"> <input type="button" name="sqrt" value="√¯" title="Square root" onClick="izracunaj(3)" class="b11"> <input type="button" name="root" value="y√¯x" title="Root" onClick="izracunaj(22)" class="b12"> <input type="button" name="ln" value="ln" title="Natural logarithm" onClick="izracunaj(5)" class="b13"> <input type="button" name="log" value="log" title="Common logarithm" onClick="izracunaj(8)" class="b14"> <input type="button" name="tan" value="tan" title="Tangent" onClick="izracunaj(14)" class="b15"> <input type="button" name="atan" value="atan" title="Arc tangent" onClick="izracunaj(10)" class="b16"> <input type="button" name="kvadrat" value="x²" title="Square" onClick="izracunaj(2)" class="b21"> <input type="button" name="potencija" value="x^y" title="Power" onClick="izracunaj(21)" class="b22"> <input type="button" name="aln" value="e^x" title="Natural antilogarithm" onClick="izracunaj(6)" class="b23"> <input type="button" name="alog" value="10^x" title="Common antilogarithm" onClick="izracunaj(9)" class="b24"> <input type="button" name="cos" value="cos" title="Cosine" onClick="izracunaj(15)" class="b25"> <input type="button" name="acos" value="acos" title="Arc cosine" onClick="izracunaj(11)" class="b26"> <input type="button" name="sign" value="+/-" title="Sign change" onClick="izracunaj(4)" class="b31"> <input type="button" name="1/x" value="1/x" title="Reciprocal" onClick="izracunaj(7)" class="b32"> <input type="button" name="fact" value="x!" title="Factorial" onClick="izracunaj(20)" class="b33"> <input type="button" name="postotak" value="%" title="Percent" onClick="izracunaj(17)" class="b34"> <input type="button" name="sin" value="sin" title="Sine" onClick="izracunaj(16)" class="b35"> <input type="button" name="asin" value="asin" title="Arc sine" onClick="izracunaj(12)" class="b36"> <input type="button" name="7" value="7" title="Seven" onClick="dodajBroj(7)" class="b41"> <input type="button" name="8" value="8" title="Eight" onClick="dodajBroj(8)" class="b42"> <input type="button" name="9" value="9" title="Nine" onClick="dodajBroj(9)" class="b43"> <input type="button" name="djeljeno" value="÷" title="Division" onClick="dodajBroj('/')" class="b44"> <input type="button" name="MS" value="MS" title="Memory store" onClick="memory(1)" class="b45"> <input type="button" name="MR" value="MR" title="Memory recall" onClick="memory(2)" class="b46"> <input type="button" name="4" value="4" title="Four" onClick="dodajBroj(4)" class="b51"> <input type="button" name="5" value="5" title="Five" onClick="dodajBroj(5)" class="b52"> <input type="button" name="6" value="6" title="Six" onClick="dodajBroj(6)" class="b53"> <input type="button" name="puta" value="×" title="Multiplication" onClick="dodajBroj('*')" class="b54"> <input type="button" name="con" value="Constants" title="Physical Constants" onClick="vidi('konstante'); return false;" class="b55"> <input type="button" name="1" value="1" title="One" onClick="dodajBroj(1)" class="b61"> <input type="button" name="2" value="2" title="Two" onClick="dodajBroj(2)" class="b62"> <input type="button" name="3" value="3" title="Three" onClick="dodajBroj(3)" class="b63"> <input type="button" name="minus" value="-" title="Subtraction" onClick="dodajBroj('-')" class="b64"> <input type="button" name="lijevo" value="(" title="Parentheses" onClick="dodajBroj('(')" class="b65"> <input type="button" name="desno" value=")" title="Parentheses" onClick="dodajBroj(')')" class="b66"> <input type="button" name="0" value="0" title="Zero" onClick="dodajBroj(0)" class="b71"> <input type="button" name="." value="." title="Decimal point" onClick="dodajBroj('.')" class="b72"> <input type="button" name="exp" value="exp" title="Exponent" onClick="dodajBroj('e')" class="b73"> <input type="button" name="plus" value="+" title="Addition" onClick="dodajBroj('+')" class="b74"> <input type="button" name="enter" value="=" title="Calculate" onClick="izracunaj(1)" class="b75"> </div> <!-- END tipkovnica --> <div id="numformat"> <p class="formatnaslov">Number formats</p> <div class="formatbr"> <div class="automatik"> <input type="radio" name="ascifix" checked title="Automatic" onClick="scifix(0)"> <a href="javascript:document.racunalo.ascifix[0].click()" onMouseOver="self.status='Automatic'; return true">Auto</a> </div> <div class="scienc"> <input type="radio" name="ascifix" title="Scientific notation" onClick="scifix(1)"> <a href="javascript:document.racunalo.ascifix[1].click()" onMouseOver="self.status='Scientific notation'; return true">Sci</a> </div> <div class="fiksed"> <input type="radio" name="ascifix" title="Fixed number of decimal places" onClick="scifix(2)"> <a href="javascript:document.racunalo.ascifix[2].click()" onMouseOver="self.status='Fixed number of decimal places'; return true">Fix</a> </div> <div class="decnaslov">Decimals</div> <select name="izaZareza" SIZE="1" onChange="numformat(this.selectedIndex)" class="decimal"> <option value="0"> 0 </option> <option value="1"> 1 </option> <option value="2"> 2 </option> <option value="3"> 3 </option> <option value="4"> 4 </option> <option value="5"> 5 </option> <option value="6"> 6 </option> <option value="7"> 7 </option> <option value="8"> 8 </option> <option value="9"> 9 </option> <option value="10"> 10 </option> <option value="11"> 11 </option> <option value="12"> 12 </option> <option value="13"> ---- </option> <option value="14" selected> auto </option> </select> <div class="separator"> <a href="javascript:seplk()" onMouseOver="self.status='Separator tisu?ica'; return true">1000 separator </a> <input type="checkbox" id="seplk" onClick="seplk()"> </div> </div> <!-- END formatbr --> <div class="rad"> <input type="radio" name="stupnjevi" checked title="Radians" onClick="raddeg(0)"> <span class="deg"> <a href="javascript:document.racunalo.stupnjevi[0].click()" onMouseOver="self.status='Radians'; return true">Rad </a> </span> <input type="radio" name="stupnjevi" title="Degrees" onClick="raddeg(1)"> <span class="deg"> <a href="javascript:document.racunalo.stupnjevi[1].click()" onMouseOver="self.status='Degrees'; return true">Deg </a> </span> <input type="radio" name="stupnjevi" title="Grads" onClick="raddeg(2)"> <span class="deg"> <a href="javascript:document.racunalo.stupnjevi[2].click()" onMouseOver="self.status='Grads'; return true">Grad</a> </span> </div> <input type="button" name="close" value="Close" title="Close Form" onClick="memory(4)" class="n4"> <div class="n2copy">Copyright © 2008 by Eni Generalic</div> </div> <!-- END numformat --> </div> <!-- END racunalo --> <div id="biljeska"> <textarea name="notes" class="tekstarea"> Calc4Chem - www.periodni.com </textarea> <input type="button" name="mode" value="Mode" title="Number formats" onClick="memory(4)" class="n1"> <input type="button" name="select" value="Select All" title="Select All" onClick="document.racunalo.notes.select()" class="n2"> <input type="reset" name="clear" value="Clear" title="Clear All" onClick="memory(5)" class="n3"> </div> <!-- END biljeska --> <div id="konstante"> <div class="constnaslov"><b>PHYSICAL CONSTANTS</b></div> <div class="const" onClick="dodajConst(-273.15)"><a href="#">Absolute zero<br>-273.15 °C</a></div> <div class="const" onClick="dodajConst(9.80665)"><a href="#">Acceleration of free fall, standard<br>9.80665 m/s<sup>2</sup></a></div> <div class="const" onClick="dodajConst(1.6605402e-27)"><a href="#">Atomic mass unit<br>1.6605402×10<sup>-27</sup> kg</a></div> <div class="const" onClick="dodajConst(6.0221367e23)"><a href="#">Avogadro constant<br>6.0221367×10<sup>23</sup> 1/mol</a></div> <div class="const" onClick="dodajConst(2.718281828)"><a href="#">Base of natural logarithms <br>2.718281828</a></div> <div class="const" onClick="dodajConst(1.380658e-23)"><a href="#">Boltzmann constant<br>1.380658×10<sup>-23</sup> J/K</a></div> <div class="const" onClick="dodajConst(2.81794092e-15)"><a href="#">Classical electron radius<br>2.81794092×10<sup>-15</sup> m</a></div> <div class="const" onClick="dodajConst(9.1093897e-31)"><a href="#">Electron mass<br>9.1093897×10<sup>-31</sup> kg</a></div> <div class="const" onClick="dodajConst(5.44617013e-4)"><a href="#">Electron-proton mass ratio<br>5.44617013×10<sup>-4</sup></a></div> <div class="const" onClick="dodajConst(1.6021892e-19)"><a href="#">Electronvolt<br>1.6021892×10<sup>-19</sup> J</a></div> <div class="const" onClick="dodajConst(1.60217733e-19)"><a href="#">Elementary charge<br>1.60217733×10<sup>-19</sup> C</a></div> <div class="const" onClick="dodajConst(96485.309)"><a href="#">Faraday constant<br>96485.309 C/mol</a></div> <div class="const" onClick="dodajConst(3.7417749e-16)"><a href="#">First radiation constant<br>3.7417749×10<sup>-16</sup> W m<sup>2</sup></a></div> <div class="const" onClick="dodajConst(8.314510)"><a href="#">Molar gas constant<br>8.314510 J/mol K</a></div> <div class="const" onClick="dodajConst(0.02241410)"><a href="#">Molar volume<br>(Ideal gas, <i>T</i> = 273.15 K, <i>p</i> = 101.325 kPa)<br>0.02241410 m<sup>3</sup>/mol</a></div> <div class="const" onClick="dodajConst(6.67259e-11)"><a href="#">Newtonian constant of gravitation<br>6.67259×10<sup>-11</sup> N m<sup>2</sup>/kg<sup>2</sup></a></div> <div class="const" onClick="dodajConst(12.566370614e-7)"><a href="#">Permeability of vacuum<br>12.566370614×10<sup>-7</sup> N/A<sup>2</sup></a></div> <div class="const" onClick="dodajConst(8.854187817e-12)"><a href="#">Permittivity of vacuum<br>8.854187817×10<sup>-12</sup> F/m</a></div> <div class="const" onClick="dodajConst(3.1415926535897932)"><a href="#">PI<br>3.1415926535897932</a></div> <div class="const" onClick="dodajConst(6.6260755e-34)"><a href="#">Planck constants<br>6.6260755×10<sup>-34</sup> J s</a></div> <div class="const" onClick="dodajConst(0.01438769)"><a href="#">Second radiation constant<br>0.01438769 m K</a></div> <div class="const" onClick="dodajConst(1400)"><a href="#">Solar constant<br>1400 W/m<sup>2</sup></a></div> <div class="const" onClick="dodajConst(299792458)"><a href="#">Speed of light in vacuum<br>299792458 m/s</a></div> <div class="const" onClick="dodajConst(340)"><a href="#">Speed of sound in air at STP<br>340 m/s</a></div> <div class="const" onClick="dodajConst(101325)"><a href="#">Standard pressure<br>101325 Pa</a></div> </div> <!-- END konstante --> </form> <div class="crta"></div> </div> |
#184
|
|||
|
|||
So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled
This [Only Registered users can see links . Click Here To Register...] makes your [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: CSS below for styling thescript, place it into HEAD section CSS Code:
<style type="text/css"> /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ #so_oTickerContainer { width:700px; margin:auto; font:1.0em verdana,arial; background-color:lightyellow; border-top:1px solid yellow; border-bottom:1px solid yellow; } #so_oTickerContainer h1 { font:bold 0.9em verdana,arial; margin:0; padding:0; } .so_tickerContainer { position:relative; margin:auto; width:700px; background-color:lightyellow; border-top:1px solid yellow; border-bottom:1px solid yellow; } #so_tickerAnchor, #so_oTickerContainer a { text-decoration:none; color:black; font:bold 0.7em arial,verdana; border-right:1px solid #000; padding-right:2px; } #so_oTickerContainer a { border-style:none; } #so_oTickerContainer ul { margin-top:5px; } #so_tickerDiv { display:inline; margin-left:5px; } #so_tickerH1 { font:bold 1.0em arial,verdana; display:inline; } #so_tickerH1 a { text-decoration:none; color:#000; padding-right:2px; } #so_tickerH1 a img { border-style:none; } </style> JavaScript Code:
<script type="text/javascript"> // Created by: Steve Chipman | http://slayeroffice.com/ /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ /**************************** so_ticker version 1.0 last revision: 03.30.2006 steve@slayeroffice.com For implementation instructions, see: http://slayeroffice.com/code/so_ticker/ Should you improve upon or modify this code, please let me know so that I can update the version hosted at slayeroffice. Please leave this notice intact. ****************************/ so_ticker = new Object(); so_ticker = { current:0, currentLetter:0, zInterval:null, tObj: null, op:0.95, pause: false, tickerContent: [], LETTER_TICK:100, FADE: 10, NEXT_ITEM_TICK: 3000, init:function() { var d=document; var mObj = d.getElementById("so_oTickerContainer"); so_ticker.tObj = d.createElement("div"); so_ticker.tObj.setAttribute("id","so_tickerDiv"); var h = d.createElement("h1"); h.appendChild(d.createTextNode(so_ticker.getTextNodeValues(mObj.getElementsByTagName("h1")[0]))); h.setAttribute("id","so_tickerH1"); var ea = d.createElement("a"); ea.setAttribute("href","javascript:so_ticker.showContent();"); pImg = ea.appendChild(document.createElement("img")); pImg.setAttribute("src","plus.png"); pImg.setAttribute("alt","Click to View all News Items."); ea.setAttribute("title","Click to View all News Items."); h.insertBefore(ea,h.firstChild); anchors = mObj.getElementsByTagName("a"); var nObj = mObj.cloneNode(false); mObj.parentNode.insertBefore(nObj,mObj); mObj.style.display = "none"; nObj.className = "so_tickerContainer"; nObj.setAttribute("id","so_nTickerContainer"); nObj.appendChild(h); nObj.appendChild(so_ticker.tObj); so_ticker.getTickerContent(); so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK); }, showContent:function() { var d = document; d.getElementById("so_oTickerContainer").style.display = "block"; d.getElementById("so_nTickerContainer").style.display = "none"; d.getElementById("so_oTickerContainer").getElementsByTagName("a")[0].focus(); clearInterval(so_ticker.zInterval); }, getTickerContent:function() { for(var i=0;i<anchors.length;i++) so_ticker.tickerContent[i] = so_ticker.getTextNodeValues(anchors[i]); }, getTextNodeValues:function(obj) { if(obj.textContent) return obj.textContent; if (obj.nodeType == 3) return obj.data; var txt = [], i=0; while(obj.childNodes[i]) { txt[txt.length] = so_ticker.getTextNodeValues(obj.childNodes[i]); i++; } return txt.join(""); }, tick: function() { var d = document; if(so_ticker.pause) { try { so_ticker.clearContents(d.getElementById("so_tickerAnchor")); d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current])); so_ticker.currentLetter = so_ticker.tickerContent[so_ticker.current].length; } catch(err) { } return; } if(!d.getElementById("so_tickerAnchor")) { var aObj = so_ticker.tObj.appendChild(d.createElement("a")); aObj.setAttribute("id","so_tickerAnchor"); aObj.setAttribute("href",anchors[so_ticker.current].getAttribute("href")); aObj.onmouseover = function() { so_ticker.pause = true; } aObj.onmouseout = function() { so_ticker.pause = false; } aObj.onfocus = aObj.onmouseover; aObj.onblur = aObj.onmouseout; aObj.setAttribute("title",so_ticker.tickerContent[so_ticker.current]); } d.getElementById("so_tickerAnchor").appendChild(d.createTextNode(so_ticker.tickerContent[so_ticker.current].charAt(so_ticker.currentLetter))); so_ticker.currentLetter++; if(so_ticker.currentLetter > so_ticker.tickerContent[so_ticker.current].length) { clearInterval(so_ticker.zInterval); setTimeout(so_ticker.initNext,so_ticker.NEXT_ITEM_TICK); } }, fadeOut: function() { if(so_ticker.paused) return; so_ticker.setOpacity(so_ticker.op,so_ticker.tObj); so_ticker.op-=.10; if(so_ticker.op<0) { clearInterval(so_ticker.zInterval); so_ticker.clearContents(so_ticker.tObj); so_ticker.setOpacity(.95,so_ticker.tObj); so_ticker.op = .95; so_ticker.zInterval = setInterval(so_ticker.tick,so_ticker.LETTER_TICK); } }, initNext:function() { so_ticker.currentLetter = 0, d = document; so_ticker.current = so_ticker.tickerContent[so_ticker.current + 1]?so_ticker.current+1:0; d.getElementById("so_tickerAnchor").setAttribute("href",anchors[so_ticker.current].getAttribute("href")); d.getElementById("so_tickerAnchor").setAttribute("title",so_ticker.tickerContent[so_ticker.current]); so_ticker.zInterval = setInterval(so_ticker.fadeOut,so_ticker.FADE); }, setOpacity:function(opValue,obj) { obj.style.opacity = opValue; obj.style.MozOpacity = opValue; obj.style.filter = "alpha(opacity=" + (opValue*100) + ")"; }, clearContents:function(obj) { try { while(obj.firstChild) obj.removeChild(obj.firstChild); } catch(err) { } } } function page_init(){ so_ticker.init(); } window.addEventListener?window.addEventListener("load",page_init,false):window.attachEvent("onload",page_init); </script> HTML Code:
<!-- /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ --> <div id="so_oTickerContainer"> <h1>Latest News:</h1> <ul> <li><a href="http://slayeroffice.com" rel="nofollow">Cat reported to have secured a fiddle.</a></li> <li><a href="http://centricle.com" rel="nofollow">Cows: Able to leap orbiting satellites?</a></li> <li><a href="http://adactio.com" rel="nofollow">People alarmed to hear small dog laughing.</a></li> <li><a href="http://steve.ganz.name/blog/" rel="nofollow">Fork devastated as Spoon runs off with Dish.</a></li> </ul> </div> Files [Only Registered users can see links . Click Here To Register...] |
#185
|
|||
|
|||
Colours-on-Page Displaying with MooTools
When users click a specified button, this JavaScript code example will get colours of all HTML elements with the predefined color attributes then fill those colours into many tiny rectangles. The auth... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste CSS code below in your HEAD section CSS Code:
<style type="text/css"> /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ .dcolor { height:40px; } .dtext { } .dwrapper { width:100px; float:left; padding:10px; margin:0 20px 20px 0; border:1px solid #ccc; } </style> JavaScript Code:
<script type="text/javascript" src="/javascript/mootools.js"></script> <script type="text/javascript"> // Created by: David Walsh | http://eriwen.com/css/color-palette-with-css-and-moo/ // This script downloaded from www.JavaScriptBank.com //once the dom is ready window.addEvent('domready', function() { //do it! $('get-colors').addEvent('click', function() { //starting the colors array var colors = []; var disallows = ['transparent']; //for every element $$('*').each(function(el) { //record colors! colors.include(el.getStyle('color')); colors.include(el.getStyle('background-color')); el.getStyle('border-color').split(' ').each(function(c) { colors.include(c); }); }); //sort the colors colors.sort(); //empty wrapper $('colors-wrapper').empty(); //for every color... colors.each(function(val,i) { //if it's good if(!disallows.contains(val)) { //create wrapper div var wrapper = new Element('div', { 'class':'dwrapper' }); //create color div, inject var colorer = new Element('div', { 'class':'dcolor', 'style': 'background:' + val }); colorer.inject(wrapper); //alert(val); //create text div, inject var texter = new Element('div', { 'class':'dtext', 'text':val }); texter.inject(wrapper); //inject wrapper wrapper.inject($('colors-wrapper')); } }); }); }); </script> HTML Code:
<!-- /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ --> <input type="button" id="get-colors" value="Get Colors" class="button"> <br><br><br> <div id="colors-wrapper"></div> <br clear="all"> <div style="text-align: left; width: 70%;"> <p> Ma quande lingues coalesce. <span style="color: #279F37;">Li nov lingua franca va esser</span> plu simplic e regulari. Lorem ipsum dolor sit amet, <span style="color: #9F6827;">consectetuer adipiscing elit, sed diam nonummy</span> nibh euismod tincidunt ut <span style="color: #BFB00B;">laoreet dolore magna aliquam erat volutpat</span>.</p> </div> Files [Only Registered users can see links . Click Here To Register...] |
#186
|
|||
|
|||
Tick Tock: Amazing Analog Clock with CSS
This JavaScript code example will create a super beautiful analog clock with amazing layout on your web pages. However, this [url="http://www.javascriptbank.com/dhtml-analog-clock-ii.html"]JavaScri... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Copy & Paste CSS code below in your HEAD section CSS Code:
<style type="text/css"> #clockbase { width: 512px; height: 512px; position: relative; margin: 0 auto; background: url(clock_bg.jpg) no-repeat; } #minutes { width: 229px; height: 229px; position: absolute; top: 200px; left: 137px; background: url(minutes-arm.png) no-repeat; } #hours { width: 200px; height: 200px; position: absolute; top: 220px; left: 150px; background: url(hours-arm.png) no-repeat left bottom; } #seconds { width: 260px; height: 260px; position: absolute; top: 184px; left: 120px; background: url(SECS.gif) no-repeat; } #clockbase .min05 {background-position: left top;} #clockbase .min10 {background-position: left -229px;} #clockbase .min15 {background-position: left -458px;} #clockbase .min20 {background-position: left -687px;} #clockbase .min25 {background-position: left -916px;} #clockbase .min30 {background-position: left -1145px;} #clockbase .min35 {background-position: left -1374px;} #clockbase .min40 {background-position: left -1603px;} #clockbase .min45 {background-position: left -1832px;} #clockbase .min50 {background-position: left -2061px;} #clockbase .min55 {background-position: left -2290px;} #clockbase .min00 {background-position: left -2519px;} #clockbase .hr1 {background-position: left top;} #clockbase .hr2 {background-position: left -200px;} #clockbase .hr3 {background-position: left -400px;} #clockbase .hr4 {background-position: left -600px;} #clockbase .hr5 {background-position: left -800px;} #clockbase .hr6 {background-position: left -1000px;} #clockbase .hr7 {background-position: left -1200px;} #clockbase .hr8 {background-position: left -1400px;} #clockbase .hr9 {background-position: left -1600px;} #clockbase .hr10 {background-position: left -1800px;} #clockbase .hr11 {background-position: left -2000px;} #clockbase .hr12 {background-position: left -2200px;} *html #minutes { background: url(minutes-arm.gif) no-repeat; } *html #hours { background: url(hours-arm.gif) no-repeat left bottom; } </style> JavaScript Code:
<script type="text/javascript" language="javascript"> var g_nLastTime = null; function cssClock(hourElementId, minuteElementId) { // Check if we need to do an update var objDate = new Date(); if(!g_nLastTime || g_nLastTime.getHours() > objDate.getHours() || g_nLastTime.getMinutes() <= (objDate.getMinutes() - 5)) { // make sure parameters are valid if(!hourElementId || !minuteElementId) { return; } // get the element objects var objHour = document.getElementById(hourElementId); var objMinutes = document.getElementById(minuteElementId); if (!objHour || !objMinutes) { return; } // get the time var nHour = objDate.getHours(); if (nHour > 12) { nHour -= 12; } // switch from 24-hour to 12-hour system var nMinutes = objDate.getMinutes(); // round the time var nRound = 5; var nDiff = nMinutes % nRound; if(nDiff != 0) { if (nDiff < 3) { nMinutes -= nDiff; } // round down else { nMinutes += nRound - nDiff; } // round up } if(nMinutes > 59) { // handle increase the hour instead nHour++; nMinutes = 0; } // Update the on page elements objHour.className = 'hr' + nHour; objMinutes.className = 'min' + nMinutes; // Timer to update the clock every few minutes g_nLastTime = objDate; } // Set a timer to call this function again setTimeout(function() { cssClock(hourElementId, minuteElementId); }, 60000); // update the css clock every minute (or so) } </script> HTML Code:
<div id="clockbase"> <div class="hr10" id="hours"></div> <div class="min10" id="minutes"></div> <div id="seconds"></div> </div> <script type="text/javascript" language="javascript"> cssClock('hours', 'minutes'); </script> Files [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] |
#187
|
|||
|
|||
Simulate Awesome Flash Horizontal Navigation with MooTools
A very great [Only Registered users can see links . Click Here To Register...] to simulate Flash effects in this script: the users move mouse pointer to the edges of content div then all remaining ... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup |
#188
|
|||
|
|||
Creative HTML5 and JavaScript Asteroid Game
Today in this post, jsB@nk want to present to you a simple [Only Registered users can see links . Click Here To Register...] made by HTML5; name of this web-based JavaScript g... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Place CSS below in your HEAD section CSS Code:
<style type="text/css"> /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ * { -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ /* make transparent link selection, adjust last value opacity 0 to 1.0 */ -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ -webkit-tap-highlight-color: rgba(0,0,0,0); } body { margin: 0px; } canvas { display: block; background-color: #113; } </style> JavaScript Code:
<script type="text/javascript"> /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ var Vector2 = function (x,y) { this.x= x || 0; this.y = y || 0; }; Vector2.prototype = { reset: function ( x, y ) { this.x = x; this.y = y; return this; }, toString : function (decPlaces) { decPlaces = decPlaces || 3; var scalar = Math.pow(10,decPlaces); return "[" + Math.round (this.x * scalar) / scalar + ", " + Math.round (this.y * scalar) / scalar + "]"; }, clone : function () { return new Vector2(this.x, this.y); }, copyTo : function (v) { v.x = this.x; v.y = this.y; }, copyFrom : function (v) { this.x = v.x; this.y = v.y; }, magnitude : function () { return Math.sqrt((this.x*this.x)+(this.y*this.y)); }, magnitudeSquared : function () { return (this.x*this.x)+(this.y*this.y); }, normalise : function () { var m = this.magnitude(); this.x = this.x/m; this.y = this.y/m; return this; }, reverse : function () { this.x = -this.x; this.y = -this.y; return this; }, plusEq : function (v) { this.x+=v.x; this.y+=v.y; return this; }, plusNew : function (v) { return new Vector2(this.x+v.x, this.y+v.y); }, minusEq : function (v) { this.x-=v.x; this.y-=v.y; return this; }, minusNew : function (v) { return new Vector2(this.x-v.x, this.y-v.y); }, multiplyEq : function (scalar) { this.x*=scalar; this.y*=scalar; return this; }, multiplyNew : function (scalar) { var returnvec = this.clone(); return returnvec.multiplyEq(scalar); }, divideEq : function (scalar) { this.x/=scalar; this.y/=scalar; return this; }, divideNew : function (scalar) { var returnvec = this.clone(); return returnvec.divideEq(scalar); }, dot : function (v) { return (this.x * v.x) + (this.y * v.y) ; }, angle : function (useRadians) { return Math.atan2(this.y,this.x) * (useRadians ? 1 : Vector2Const.TO_DEGREES); }, rotate : function (angle, useRadians) { var cosRY = Math.cos(angle * (useRadians ? 1 : Vector2Const.TO_RADIANS)); var sinRY = Math.sin(angle * (useRadians ? 1 : Vector2Const.TO_RADIANS)); Vector2Const.temp.copyFrom(this); this.x= (Vector2Const.temp.x*cosRY)-(Vector2Const.temp.y*sinRY); this.y= (Vector2Const.temp.x*sinRY)+(Vector2Const.temp.y*cosRY); return this; }, equals : function (v) { return((this.x==v.x)&&(this.y==v.x)); }, isCloseTo : function (v, tolerance) { if(this.equals(v)) return true; Vector2Const.temp.copyFrom(this); Vector2Const.temp.minusEq(v); return(Vector2Const.temp.magnitudeSquared() < tolerance*tolerance); }, rotateAroundPoint : function (point, angle, useRadians) { Vector2Const.temp.copyFrom(this); //trace("rotate around point "+t+" "+point+" " +angle); Vector2Const.temp.minusEq(point); //trace("after subtract "+t); Vector2Const.temp.rotate(angle, useRadians); //trace("after rotate "+t); Vector2Const.temp.plusEq(point); //trace("after add "+t); this.copyFrom(Vector2Const.temp); }, isMagLessThan : function (distance) { return(this.magnitudeSquared()<distance*distance); }, isMagGreaterThan : function (distance) { return(this.magnitudeSquared()>distance*distance); } // still AS3 to convert : // public function projectOnto(v:Vector2) : Vector2 // { // var dp:Number = dot(v); // // var f:Number = dp / ( v.x*v.x + v.y*v.y ); // // return new Vector2( f*v.x , f*v.y); // } // // // public function convertToNormal():void // { // var tempx:Number = x; // x = -y; // y = tempx; // // // } // public function getNormal():Vector2 // { // // return new Vector2(-y,x); // // } // // // // public function getClosestPointOnLine ( vectorposition : Point, targetpoint : Point ) : Point // { // var m1 : Number = y / x ; // var m2 : Number = x / -y ; // // var b1 : Number = vectorposition.y - ( m1 * vectorposition.x ) ; // var b2 : Number = targetpoint.y - ( m2 * targetpoint.x ) ; // // var cx : Number = ( b2 - b1 ) / ( m1 - m2 ) ; // var cy : Number = m1 * cx + b1 ; // // return new Point ( cx, cy ) ; // } // }; Vector2Const = { TO_DEGREES : 180 / Math.PI, TO_RADIANS : Math.PI / 180, temp : new Vector2() }; (function () { var spareBullets = []; window.Bullet = function (ctx, x, y, angle) { // this is rather nasty - so I'm not sure why I'm doing it... if (this === window) { if (spareBullets.length) { var bullet = spareBullets.pop(); bullet.init(x, y, angle); bullet.fresh = false; return bullet; } else { return new Bullet(ctx, x, y, angle); } } this.ctx = ctx; // initialise this.init(x, y, angle); return this; }; Bullet.prototype = { init: function (x, y, angle) { this.fresh = true; this.pos = new Vector2(x,y); this.vel = new Vector2(Bullet.speed,0); this.vel.rotate(angle); this.enabled = true; // 15 is the length of the ship this.pos.plusEq(this.vel.clone().normalise().multiplyEq(15)); }, checkEnabled: function () { var ctx = this.ctx; if (this.enabled == false) { return; } if (this.pos.x < 0 || this.pos.x > ctx.canvas.width) this.enabled = false; if (this.pos.y < 0 || this.pos.y > ctx.canvas.height) this.enabled = false; if (this.enabled == false) { spareBullets.push(this); } }, update: function () { this.pos.plusEq(this.vel); this.checkEnabled(); return this; }, draw: function () { var ctx = this.ctx, pos = this.pos; ctx.save(); ctx.lineWidth = 2; ctx.strokeStyle = "#fff"; ctx.beginPath(); ctx.arc(pos.x, pos.y, 2, 0, Math.PI*2, true); ctx.stroke(); ctx.restore(); return this; } }; // static Bullet.speed = 5; })(); Asteroid = function (x,y,radius) { this.pos = new Vector2(x,y); this.vel = new Vector2(0,0); this.points; this.enabled = true; // temp vector to calculate distance from circle in hitTest this.diff = new Vector2(0,0); this.reset = function (radius) { this.points = []; this.radius = radius; var temp = new Vector2(radius, 0); for (var angle = 0; angle<360; angle+= random(0, 45)) { temp.reset(random(radius / 2, radius),0); temp.rotate(angle); this.points.push(temp.clone()); } }; this.reset(radius); this.update = function(canvas) { this.pos.plusEq(this.vel); if(this.pos.x+this.radius < 0) this.pos.x = canvas.width+this.radius; else if (this.pos.x-this.radius > canvas.width) this.pos.x = -this.radius; if(this.pos.y+this.radius < 0) this.pos.y = canvas.height+this.radius; else if (this.pos.y-this.radius > canvas.height) this.pos.y = -this.radius; }; this.draw = function(ctx) { ctx.save(); ctx.translate(this.pos.x, this.pos.y); ctx.strokeStyle = "#fff"; ctx.fillStyle = '#000'; ctx.lineWidth = 2; ctx.beginPath(); for(var i = 0; i<this.points.length; i++) { var p = this.points[i % this.points.length]; ctx.lineTo(p.x, p.y); } ctx.closePath(); ctx.fill(); ctx.stroke(); ctx.restore(); }; this.hitTest = function(x,y) { this.diff.copyFrom(this.pos); this.diff.x-=x; this.diff.y-=y; var distanceSq = (this.diff.x * this.diff.x) + (this.diff.y*this.diff.y); return distanceSq < (this.radius * this.radius); }; }; ShipMoving = function(x,y) { this.pos = new Vector2(x,y); this.angle = 0; this.vel = new Vector2(0,0); this.temp = new Vector2(0,0); this.thrustPower = 0.1; this.rotateSpeed = 5; this.thrusting = false; this.invulnerable = false; this.thrustAmount = 0; this.dead = []; this.update = function() { this.pos.plusEq(this.vel); }; this.thrust = function() { this.temp.reset(this.thrustPower,0); this.temp.rotate(this.angle); this.vel.plusEq(this.temp); }; this.rotateLeft = function() { this.angle -= this.rotateSpeed; }; this.rotateRight = function() { this.angle += this.rotateSpeed; }; this.hit = function () { var n = 20; while (n--) { this.dead.push(new Vector2(random(3, 6), 0)); this.dead[this.dead.length - 1].rotate(Math.random() * Math.PI * 2, true); } }; this.isdead = function () { return !!this.dead.length; }; this.draw = function(c) { c.save(); c.translate(this.pos.x, this.pos.y); c.rotate(this.angle * Vector2Const.TO_RADIANS); if (this.invulnerable == false && !this.isdead()) { c.lineWidth = 4; if (this.thrustAmount) { c.beginPath(); c.moveTo(-11, -3); c.lineTo(-11, 3); c.lineTo(-12 -this.thrustAmount, 0); c.closePath(); c.fillStyle = 'hsla(3, 100%, 50%, 0.9)'; c.fill(); c.strokeStyle = 'hsla(32, 100%, 50%, 0.7)'; c.stroke(); } c.lineWidth = 2; c.strokeStyle = "#fff"; c.beginPath(); c.moveTo(-10, -10); c.lineTo(-10, 10); c.lineTo(14, 0); c.closePath(); c.stroke(); } else if (this.dead.length) { var i = this.dead.length; c.lineWidth = 2; c.fillStyle = 'hsla(1, 100%, 50%, 0.75)'; while (i--) { this.dead[i].multiplyEq(1.05); c.beginPath(); c.arc(this.dead[i].x, this.dead[i].y, 2, 0, Math.PI * 2, true); c.closePath(); c.fill(); } } if (this.thrusting && this.thrustAmount < 10) { this.thrustAmount++; } else if (this.thrustAmount > 0) { this.thrustAmount--; } c.restore(); }; }; // canvas element and 2D context var canvas = document.createElement('canvas'), c = canvas.getContext('2d'), touch = 'createTouch' in document; canvas.width = window.innerWidth; canvas.height = window.innerHeight; document.body.appendChild(canvas); c.strokeStyle = "#ffffff"; var mouseX, mouseY, halfWidth = canvas.width/2, halfHeight = canvas.height/2, bullets = [], spareAsteroids = [], ship = new ShipMoving(halfWidth, halfHeight), thrusting = false, rotateLeft = false, rotateRight = false, grad = c.createLinearGradient(0, 0, 0, canvas.height), asteroids = [], trail = 0.85; grad.addColorStop(0, 'hsla(240,80%,2%,' + trail + ')'); grad.addColorStop(1, 'hsla(240,100%,15%,' + trail + ')'); timer = setInterval(draw, 1000/35); for (var i = 0; i < (touch ? 5 : 10); i++) { asteroids.push(new Asteroid(random(0, canvas.width), random(0, canvas.height), 50)); asteroids[i].vel.reset(1,0).rotate(random(0,360)); } function draw() { c.fillStyle = '#000'; //grad; c.fillRect(0,0,canvas.width, canvas.height); var bullet; for (var i=0; i<bullets.length; i++) { bullet = bullets[i]; if (bullet.enabled) { bullet.update(); bullet.draw(); } } for (i = 0; i < asteroids.length; i++) { var asteroid = asteroids[i], hit = false; if (!ship.invulnerable && !ship.isdead() && asteroid.hitTest(ship.pos.x, ship.pos.y)) { // you lose! ship.hit(); } if(!asteroid.enabled) continue; if (!ship.isdead()) { for (var j = 0; j < bullets.length; j++) { if (bullets[j].enabled) { hit = asteroid.hitTest(bullets[j].pos.x, bullets[j].pos.y); if (hit) { bullets[j].enabled = false; break; } } } } if (hit) { if (asteroid.radius < 15) { asteroid.enabled = false; } else { asteroid.reset(asteroid.radius/2); asteroid.vel.reset(random(-5,5),random(-5,5)); makeNewAsteroid(asteroid.pos.x, asteroid.pos.y, asteroid.radius).vel.reset(random(-5,5),random(-5,5)); makeNewAsteroid(asteroid.pos.x, asteroid.pos.y, asteroid.radius).vel.reset(random(-5,5),random(-5,5)); } } else { asteroid.update(canvas); asteroid.draw(c); } } if (ship.thrusting) ship.thrust(); if (rotateLeft) ship.rotateLeft(); if (rotateRight) ship.rotateRight(); ship.update(); if (ship.pos.x<0) ship.pos.x = canvas.width; else if (ship.pos.x>canvas.width) ship.pos.x = 0; if (ship.pos.y<0) ship.pos.y = canvas.height; else if (ship.pos.y>canvas.height) ship.pos.y = 0; ship.draw(c); } function makeNewAsteroid(x, y, radius) { var newasteroid; if (spareAsteroids.length > 0) { newasteroid = spareAsteroids.pop(); newasteroid.pos.set(x, y); newasteroid.radius = radius; } else { newasteroid = new Asteroid(x, y, radius); asteroids.push(newasteroid); } return newasteroid; } function fire() { if (ship.isdead()) { return; } // only allow n bullets var limit = 5, i = bullets.length; while (i--) { if (bullets[i].enabled) { limit--; } } if (limit !== 0) { var bullet = Bullet(c, ship.pos.x, ship.pos.y, ship.angle); if (bullet.fresh) bullets.push(bullet); } } canvas.addEventListener( 'mousemove', onMouseMove, false ); document.addEventListener( 'keydown', onKeyDown, false ); document.addEventListener( 'keyup', onKeyUp, false ); document.addEventListener( 'touchstart', onTouchStart, false ); document.addEventListener( 'touchmove', onTouchMove, false ); document.addEventListener( 'touchend', onTouchEnd, false ); var swipe = []; if (touch) { ship.thrustPower = 0.5; } function onTouchStart(e) { swipe = []; if (e.touches.length == 1) { // rotate & fire var v = new Vector2(e.touches[0].pageX-canvas.width/2, e.touches[0].pageY-canvas.height/2); ship.angle = v.angle(); fire(); } else if (e.touches.length == 2) { ship.thrusting = true; ship.thrust(); } else if (e.touches.length == 3) { ship.invulnerable = true; } } function onTouchMove(e) { e.preventDefault(); } // window.addEventListener('devicemotion', function(event) { // var v = new Vector2(event.accelerationIncludingGravity.x, event.accelerationIncludingGravity.y); // ship.angle += v.angle() * 0.05; // }, false); function onTouchEnd(e) { ship.thrusting = false; ship.invulnerable = false; } function onKeyDown(e) { if(e.keyCode == 38) ship.thrusting = true; else if (e.keyCode == 40) ship.invulnerable = true; else if(e.keyCode == 37) rotateLeft = true; else if (e.keyCode == 39) rotateRight = true; else if (e.which == 32) fire(); } function onKeyUp(e) { if (e.keyCode == 38) ship.thrusting = false; else if (e.keyCode == 40) ship.invulnerable = false; else if(e.keyCode == 37) rotateLeft = false; else if (e.keyCode == 39) rotateRight = false; } function onMouseMove(event) { mouseX = event.offsetX; mouseY = event.offsetY; } function random(v1, v2){ return ((Math.random()*(v2-v1))+v1); } setTimeout(function () { window.scrollTo(1, 0); }, 1000); </script> HTML Code:
<canvas height="609" width="1139"></canvas> Files [Only Registered users can see links . Click Here To Register...] |
#189
|
|||
|
|||
Simple JavaScript Slideshow in 2 code lines with jQuery
In this post, jsB@nk is happy to present to you a tiny JavaScript slideshow effect made by 2 code lines. It's so very simple and easy to implement but its JavaScript animations are so great to apply o... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Download files below Files [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] [Only Registered users can see links . Click Here To Register...] |
#190
|
|||
|
|||
Simple JavaScript RegEx to Parse Domain Name
There are many [Only Registered users can see links . Click Here To Register...] to parse an URL in JavaScript RegEx. And parsing the domain main is easy since there's a lot of trick. This is useful f... [Only Registered users can see links . Click Here To Register...] at [Only Registered users can see links . Click Here To Register...]
[Only Registered users can see links . Click Here To Register...] Demo: [Only Registered users can see links . Click Here To Register...] How to setup Step 1: Use JavaScript code below to setup the script JavaScript Code:
<script type="text/javascript"> // Copyright: ivanceras - http://www.ivanceras.com/ /* This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com */ /** * * USAGE: * UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment"); //= truste.com.ca * UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment"); //= google.com.ph * UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment"); //= google.com * */ var UriParser = { //parse the root domain, exclude the sub domain parseRootDomain : function(url) { var matches = url.match(/^((\w+):\/\/)?((\w+):?(\w+)?@)?([^\/\?:]+):?(\d+)?(\/?[^\?#]+)?\??([^#]+)?#?(\w*)/); //my additional code var theDomain = matches[6]; if(UriParser.isIp(theDomain)){//if it is an ip address return it as domain return theDomain; } var dots = theDomain.split('.'); var n = dots.length; if(n < 3){//google.com, 2 root words concatenate, 1 word as well i.e. localhost return dots.join("."); } else{//should be greater than or equal to 3 dot split ie. adsense.google.com var last = dots[n-1]; var second2l = dots[n-2]; var third2l = dots[n-3]; var ext; var root; if(second2l.length <= 3){//if google.com.ph, or bbc.co.uk ext = second2l +"."+ last; root = third2l; }else{// adsense.google.com ext = last; root = second2l; } var domain = ""+ root + "." + ext; return domain; } }, //private isNumber : function (o) { return !isNaN (o-0); }, //private /** * determines if the url is an ip address */ isIp: function(domain){ var exploded = domain.split('.'); for(var i = 0; i < exploded.length; i++){ if(!UriParser.isNumber(exploded[i])){ return false; } } return true; }, isSameDomain: function(url1, url2){ if(UriParser.parseRootDomain(url1) == UriParser.parseRootDomain(url2)){ return true; } return false; } } </script> HTML Code:
<h3>Usages:</h3> document.write(UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment"));<br /> document.write(UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment"));<br /> document.write(UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment"));<br /> document.write(UriParser.parseRootDomain("http://google.com/pathname?querystring&key=value#fragment"));<br /> document.write(UriParser.parseRootDomain("http://localhost/pathname?querystring&key=value#fragment"));<br /> document.write(UriParser.parseRootDomain("localhost"));<br /> document.write(UriParser.parseRootDomain("http://192.168.1.1/pathname?querystring&key=value#fragment"));<br /> document.write(UriParser.isSameDomain("http://www.google.com/pathname?querystring&key=value#fragment", "http://adsense.google.com/?x=123123")) document.write(UriParser.isSameDomain("http://www.blogger.com/navbar.g?targetBlogID=5856931630868336061&blogName=TeamPilipinas.info&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLACK&layoutType=LAYOUTS&searchRoot=http%3A%2F%2Fteampilipinas.info%2Fsearch&blogLocale=en_PH&homepageUrl=http%3A%2F%2Fteampilipinas.info%2F", "blogger.com"));<br /> <hr /> <h3>Results:</h3> <script type="text/javascript"> document.write(UriParser.parseRootDomain("http://user:password@www.truste.com.ca:80/pathname?querystring&key=value#fragment") + '<br />'); document.write(UriParser.parseRootDomain("http://google.com.ph/pathname?querystring&key=value#fragment") + '<br />'); document.write(UriParser.parseRootDomain("http://www.google.com/pathname?querystring&key=value#fragment") + '<br />'); document.write(UriParser.parseRootDomain("http://google.com/pathname?querystring&key=value#fragment") + '<br />'); document.write(UriParser.parseRootDomain("http://localhost/pathname?querystring&key=value#fragment") + '<br />'); document.write(UriParser.parseRootDomain("localhost") + '<br />'); document.write(UriParser.parseRootDomain("http://192.168.1.1/pathname?querystring&key=value#fragment") + '<br />'); document.write(UriParser.isSameDomain("http://www.google.com/pathname?querystring&key=value#fragment", "http://adsense.google.com/?x=123123")) document.write(UriParser.isSameDomain("http://www.blogger.com/navbar.g?targetBlogID=5856931630868336061&blogName=TeamPilipinas.info&publishMode=PUBLISH_MODE_HOSTED&navbarType=BLACK&layoutType=LAYOUTS&searchRoot=http%3A%2F%2Fteampilipinas.info%2Fsearch&blogLocale=en_PH&homepageUrl=http%3A%2F%2Fteampilipinas.info%2F", "blogger.com")); </script> |
Bookmarks |
|
|