Drukuj stronę - Kalkulatorek

PoniÂżej wprowadziÂłem kod (Java Script) kalkulatora. Kod zawiera funkcje w oddzielnym pliku oraz formatowanie css.

Plik Java script (dla MichaÂła na zielono)

<html>
<head>
<meta charset="UTF-8">
<link href="kalk1.css" type="text/css" rel="stylesheet">
</head>
<body>

<script type="text/javascript"SRC = "kalk1.js">
document.write("Nie moÂżna otworzyĂŚ pliku ze skryptem.")
</SCRIPT>

<form>
<legend>ADAM'S CODE SCHOOL</legend>
<div id="tlo" cellpadding=14>
<div class="po"><input class="kalk" id="okno" style="background-color:black;" "type="text">

<input class="p1" type="button" value=ON style="width: 100px; height: 45px" onclick="wlacz(this.value);"></div><br>

<div class="po">
<input class="p1" type="button" value=1 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value=2 style="width: 150px; height: 45px"onclick="czytaj(this.value);">
<input class="p1" type="button" value=3 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value='/' style="width: 150px; height: 45px" onclick="czytaj(this.value);">
</div>
<div class="po">
<input class="p1" type="button" value=4 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value=5 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value=6 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value='*' style="width: 150px; height: 45px" onclick="czytaj(this.value);"></div>

<div class="po"><input class="p1" type="button" value=7 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value=8 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value=9 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value='-' style="width: 150px; height: 45px" onclick="czytaj(this.value);"></div>

<div class="po"><input class="p1" type="button" value=0 style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value='.' style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value='C' style="width: 150px; height: 45px" onclick="czytaj(this.value);">
<input class="p1" type="button" value='+' style="width: 150px; height: 45px" onclick="czytaj(this.value);"></div>

<div class="po"><input class="px" type="button" value='=' style="width: 61%; height: 45px"onclick="oblicz(document.getElementById('okno').value);"></div>
</div>
</form>
</body>
</html>
------------------------------------------------------ teraz plik z kodem javy o nazwie kalk1.js ---------------------------------------------------------------

var x=1;
document.getElementById('okno').style.backgroundColor="black";
document.getElementById('okno').value = '';

function wlacz(przycisk){++x; x%=2;
if(x==0){document.getElementById('okno').style.backgroundColor="yellow";
document.getElementById('button').value="ON";}
else{document.getElementById('okno').style.backgroundColor="black";
document.getElementById('button').value="OFF";};

}

function czytaj(przycisk) {
if (przycisk == 'C') {
document.getElementById('okno').value = '';
}
else {
document.getElementById('okno').value += przycisk;
}
}
function oblicz(wartosc) {
var wynik = eval(wartosc);
document.getElementById('okno').value = wynik;
}

---------------------------------------- A teraz wklejam plik css o nazwie kalk1.css-----------------------------------------------------------------

.kalk {
width: 500px;
height:40px;
margin: 10px;

#tlo{
width: 600px;
height:800px;
background: #CCFFCC;
padding: 0px;
border:0px solid #000;
}
.po{
width:900px;
height:100px;
float:left;
right:10px;
bottom:250px;
background:coral;
}
.p1{
font: 8pt Arial; font-style: italic;
font-weight: bold; color:blue; background:coral;
width:100px;
height:100px;

}
.px{
width:450px;
height:50px;
float:right;
right:10px;
bottom:250px;

}

PoniÂżej kod obliczajÂący liczbĂŞ znakĂłw wprowadzonych do okienka edit (Input). Algorytm zlicza rĂłwnieÂż spacje.

Plik html
<html>
<head>
<meta charset="UTF-8">
<link href="dlugim.css" type="text/css" rel="stylesheet">
</head>
<body>

<script type="text/javascript"SRC = "dlugim.js">
document.write("Nie moÂżna otworzyĂŚ pliku ze skryptem.")
</SCRIPT>

<form>
<legend>ADAM'S CODE SCHOOL</legend>
<div id="tlo" cellpadding=14>
<div class="po"><input class="kalk" name="I" style="background-color:yellow;" "type="text"> </div>
<div class="po"><input class="kalk" name="O" style="background-color:yellow;" "type="text"> </div>
<div class="po"><input class="px" type="button" name='A' value='wciÂśnij' style="width: 61%; height: 45px" onclick="sprawdz(this.form)"></button></div>
<div class="po"><input class="px" type="button" name='B' value='Kasuj' style="width: 61%; height: 45px" onclick="kasuj(this.form)"></button></div>
</div>
</form>
</body>
</html>

----------------------------- Plik Java script o nazwie dlugim.js ----------------------------------------------------------------------------

function kasuj(x){

x.I.value="";
x.O.value='';
}

function sprawdz(x){
b=x.I.value;
a=b.length;
x.O.value="napis skÂłada siĂŞ z "+a+" liter";

}

-------------------------------------- plik css ----------------------------------------------------------------------------------------------

.kalk {
width: 500px;
height:40px;
margin: 10px;

#tlo{
width: 600px;
height:800px;
background: #CCFFCC;
padding: 0px;
border:0px solid #000;
}
.po{
width:900px;
height:100px;
float:left;
right:10px;
bottom:250px;
background:coral;
}
.p1{
font: 8pt Arial; font-style: italic;
font-weight: bold; color:blue; background:coral;
width:100px;
height:100px;

}
.px{
width:450px;
height:50px;
float:right;
right:10px;
bottom:250px;

}

PrzykÂład 3. Program wczytujÂący ciÂąg znakĂłw i obliczajÂący liczbĂŞ wprowadzonych znakĂłw ale bez doliczania spacji.

Kod HTML

<html>
<head>
<meta charset="UTF-8">
<link href="dlugim.css" type="text/css" rel="stylesheet">
</head>
<body>

<script type="text/javascript"SRC = "dlugimbs.js">
document.write("Nie moÂżna otworzyĂŚ pliku ze skryptem.")
</SCRIPT>

<form>
<legend>ADAM'S CODE SCHOOL</legend>
<div id="tlo" cellpadding=14>
<div class="po"><input class="kalk" name="I" style="background-color:yellow;" "type="text"> </div>
<div class="po"><input class="kalk" name="O" style="background-color:yellow;" "type="text"> </div>
<div class="po"><input class="px" type="button" name='A' value='wciÂśnij' style="width: 61%; height: 45px" onclick="sprawdz(this.form)"></button></div>
<div class="po"><input class="px" type="button" name='B' value='Kasuj' style="width: 61%; height: 45px" onclick="kasuj(this.form)"></button></div>
</div>
</form>
</body>
</html>

Kod Java script

function kasuj(x){

x.I.value="";
x.O.value='';
}

function sprawdz(x){
b=x.I.value;
a=b.length;u=0;
for(r=0;r<a;r++){

if(b[r]!=" "){u++};
}
x.O.value="napis skÂłada siĂŞ z "+u+" liter";

}

Darmowe Forum

E14 => Java Script => Wątek zaczęty przez: admin Listopad 04, 2016, 08:19:59