JavaScript Image Rotation script with CANVAS in HTML5
Rotating images is not new type of JavaScript effects because they were ever showed on jsB@nk through many JavaScript code examples:
- detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use JavaScript code below to setup the script
JavaScript
Code:
<script type="text/javascript">
// Created by: Benoit Asselin | http://www.ab-d.fr
// This script downloaded from www.JavaScriptBank.com
function rotate(p_deg) {
if(document.getElementById('canvas')) {
/*
Ok!: Firefox 2, Safari 3, Opera 9.5b2
No: Opera 9.27
*/
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
var canvasContext = canvas.getContext('2d');
switch(p_deg) {
default :
case 0 :
canvas.setAttribute('width', image.width);
canvas.setAttribute('height', image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, 0);
break;
case 90 :
canvas.setAttribute('width', image.height);
canvas.setAttribute('height', image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, 0, -image.height);
break;
case 180 :
canvas.setAttribute('width', image.width);
canvas.setAttribute('height', image.height);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, -image.height);
break;
case 270 :
case -90 :
canvas.setAttribute('width', image.height);
canvas.setAttribute('height', image.width);
canvasContext.rotate(p_deg * Math.PI / 180);
canvasContext.drawImage(image, -image.width, 0);
break;
};
} else {
/*
Ok!: MSIE 6 et 7
*/
var image = document.getElementById('image');
switch(p_deg) {
default :
case 0 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
break;
case 90 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
break;
case 180 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
break;
case 270 :
case -90 :
image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
break;
};
};
};
// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
if(canvas.getContext) {
image.style.visibility = 'hidden';
image.style.position = 'absolute';
} else {
canvas.parentNode.removeChild(canvas);
};
rotate(0);
});
</script>
Step 2: Place HTML below in your BODY section
HTML
Code:
<!--
/*
This script downloaded from www.JavaScriptBank.com
Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
*/
-->
<p>
rotate:
<input type="button" value="0°" onclick="rotate(0);">
<input type="button" value="90°" onclick="rotate(90);">
<input type="button" value="180°" onclick="rotate(180);">
<input type="button" value="-90°" onclick="rotate(-90);">
</p>
<p>
<img id="image" src="http://www.javascriptbank.com/templates/jsb.V8/images/logo_jsbank.jpg" alt="">
<canvas id="canvas"></canvas>
</p>
Nice AJAX Effects for Messages Box using MooTools
This is very simple JavaScript code example but it can create an amazing message box effect with AJAX operations, bases on ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: CSS below for styling thescript, place it into HEAD section
CSS
Code:
<style type="text/css">
body{font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif; font-size:12px;}
#box {
margin-bottom:10px;
width: auto;
padding:4px;
border:solid 1px #DEDEDE;
background: #FFFFCC;
display:none;
}
</style>
Step 2: Copy & Paste JavaScript code below in your HEAD section
JavaScript
Code:
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript">
// Created by Antonio Lupetti | http://woork.blogspot.com
// This script downloaded from www.JavaScriptBank.com
window.addEvent('domready', function(){
var box = $('box');
var fx = box.effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
$('save_button').addEvent('click', function() {
box.style.display="block";
box.setHTML('Save in progress...');
/* AJAX Request here... */
fx.start({
}).chain(function() {
box.setHTML('Saved!');
this.start.delay(1000, this, {'opacity': 0});
}).chain(function() {
box.style.display="none";
this.start.delay(0001, this, {'opacity': 1});
});
});
});
</script>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
Press "Save"</p>
<div id="box"></div>
<input name="" type="text" /><input id="save_button" name="save_button" type="button" value="save"/>
Step 4: Download files below
Files
mootools.js
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... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Copy & Paste CSS code below in your HEAD section
CSS
Code:
<link rel="stylesheet" type="text/css" href="style.css" />
Step 2: Use JavaScript code below to setup the script
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>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<div id="countdown"></div>
Step 4: must download files below
Files
countdown1.png
countdown2.png
jquery.countdown.packed.js
style.css
Calc4Chem: Awesome Scientific Calculator with Physical and Chemical constants
This is an amazing JavaScript calculator script that can be used as a common scientific calculator (with functions of sin, cos, log, ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use CSS code below for styling the script
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>
Step 2: Use JavaScript code below to setup the script
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>
Step 3: Copy & Paste HTML code below in your BODY section
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>
So-Ticker: OOP JavaScript Dynamic Ticker with Typing-Styled
This JavaScript code example makes your detail at JavaScriptBank.com - 2.000+ free JavaScript codes
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>
Step 2: Copy & Paste JavaScript code below in your HEAD section
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>
Step 3: Place HTML below in your BODY section
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>
Step 4: must download files below
Files
plus.png
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... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
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
*/
.dcolor {
height:40px;
}
.dtext {
}
.dwrapper {
width:100px;
float:left;
padding:10px;
margin:0 20px 20px 0;
border:1px solid #ccc;
}
</style>
Step 2: Place JavaScript below in your HEAD section
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>
Step 3: Place HTML below in your BODY section
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>
Step 4: downloads
Files
mootools.js
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... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Place CSS 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>
Step 2: Use JavaScript code below to setup the script
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>
Step 3: Copy & Paste HTML code below in your BODY section
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>
Step 4: downloads
Files
clock_bg.jpg
hours-arm.gif
hours-arm.png
minutes-arm.gif
minutes-arm.png
SECS.gif
Simulate Awesome Flash Horizontal Navigation with MooTools
A very great JavaScript code example to simulate Flash effects in this script: the users move mouse pointer to the edges of content div then all remaining ... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Creative HTML5 and JavaScript Asteroid Game
Today in this post, jsB@nk want to present to you a simple JavaScript application made by HTML5; name of this web-based JavaScript g... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: Use CSS code below for styling the script
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>
Step 2: Copy & Paste JavaScript code below in your HEAD section
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>
Step 3: Copy & Paste HTML code below in your BODY section
HTML
Code:
<canvas height="609" width="1139"></canvas>
Step 4: Download files below
Files
demo.html
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... detail at JavaScriptBank.com - 2.000+ free JavaScript codes
How to setup
Step 1: must download files below
Files
1.html
2.html
3.html
jquery-1.4.3.js
