Darmowe Forum
Grudzieñ 22, 2024, 08:25:53 *
Witamy, Go¶æ. Zaloguj siê lub zarejestruj.
Czy dotar³ do Ciebie email aktywacyjny?

Zaloguj siê podaj±c nazwê u¿ytkownika, has³o i d³ugo¶æ sesji
Aktualno¶ci: Forum zosta³o uruchomione!
 
   Strona g³ówna   Pomoc Zaloguj siê Rejestracja  
Darmowe Forum > E14 > Java Script > Kalkulatorek
Strony: [1]
« poprzedni nastêpny »
  Drukuj  
Autor W±tek: Kalkulatorek  (Przeczytany 1555 razy)
admin
Administrator
Ekspert
*****
Wiadomo¶ci: 821


Email
« : Listopad 04, 2016, 08:19:59 »
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;

}
Zapisane
admin
Administrator
Ekspert
*****
Wiadomo¶ci: 821


Email
« Odpowiedz #1 : Listopad 04, 2016, 12:10:41 »
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;

}
Zapisane
admin
Administrator
Ekspert
*****
Wiadomo¶ci: 821


Email
« Odpowiedz #2 : Listopad 04, 2016, 12:52:24 »
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";

}
Zapisane
Strony: [1]
  Drukuj  
« poprzedni nastêpny »
 
Skocz do:  

Powered by SMF 1.1.11 | SMF © 2006-2008, Simple Machines LLC | Sitemap

Polityka cookies
Darmowe Fora | Darmowe Forum

blackmoon moikrewni shaggydogss articz zlotasiodemka