Ámeliy bólim
Kalkulyator programmasin jaratıw:
Bunıń ushin bizler kompyuterimizdiń Z katalogina ótip, ol katalogtan home papkasına kiremiz hám sol jerge ozimiz jaratpaqshı bolǵan saytımız atın kiritemiz. Meniń mısalımda bul kalkulyator.uz atın berdim. Endi bul papkaniń ishine www papkasın ashamiz hám onıń ishine index.html fayılın jaratamiz:
z:\home\kalkulyator.uz\www\
Index.html ishine tómendegi koddı kiritemiz:
<head>
<meta charset="utf-8">
<title>Калькулятор на php</title>
<body>
<form method="get" action="calk.php">
<label for="username">birinshi san<br></label><input type="text" name="count1"><br>
<label for="username">ekinshi san<br></label><input type="text" name="count2"><br>
<select name="count3">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select><br><br>
<input type="submit" value="esaplaw">
</form>
</body>
</html>
Ekranımızda tómendegishe ayna payda boladı:
Men bul jaratıp atırǵan kalkulyatorimda GET metodınan paydalandım.
Endi calk.php faylin jaratıp alamız, onıda tap spl papkaǵa saqlaymız.
Calk.php faylınıń ishine bolsa tómendegi koddı jazamız:
<?php
$count1 = $_GET['count1'];
$count2 = $_GET['count2'];
$count3 = $_GET['count3'];
echo $count1 . $count3 . $count2 . '=';
switch ($count3) {
case '+':
echo $count1 + $count2;
break;
case '-':
echo $count1 - $count2;
break;
case '*':
echo $count1 * $count2;
break;
case '/':
if($count2==0){
echo "sandi nólge bólip bolmaydi";
}else
echo $count1 / $count2;
break;
}
?>
Endi bir mısal islep kóremiz:
Natiyje calk.php aynasında járiyalanadı:
Jáne bir mısal:
Natiyje:
Bul eń ápiwayı kalkulyator jaratıw algoritimi edi.
Endi birqansha quramalıraq kalkulyator jratıwdı kórip shıǵamız.
Buniń ushın joqarıda aytıp ótkenimizdey izbe-izlikte taza fayl jaratamız.
Calkulyator.html fayl:
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" id="favicon" href="favicon.ico">
<meta charset="UTF-8">
<title>Calc Final</title>
</head>
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="navstyle.css" rel="stylesheet" type="text/css" />
<button title="Переключить вид" id="test" class="slidemain"onclick="showhide('siń);showhide('cos');showhide('tań);showhide('x2');
showhide('lń);showhide('loǵ);showhide('sqrt') ;
showhide('exp');showhide('pı);showhide('n1');showhide('x4');
showhide('x5');showhide('hr');showhide('and1');showhide('and2');
showhide('and3'); showhide('pró);
showhide('and4');showhide('and5');showhide('and6');showhide('and7');
heigth_plus('123');test1();shtorka()"></button>
<body onLoad="test();ClearEntry();">
<div class="calc" id="123" style="height: 300px"><div id="shtorka"></div>
<form name="Keypad" >
<input name="ReadOut" class="pole" id="pole" value="0">
<br>
<br>
<!--Стандартный вид калькулятора-->
<input class="btn stan" type="button" value="7" onClick="NumPressed(7)">
<input class="btn stan" type="button" value="8" onClick="NumPressed(8)">
<input class="btn stan" type="button" value="9" onClick="NumPressed(9)">
<input class="btn blue" type="button" value="-" onClick="Operation('-')">
<br>
<input class="btn stan" type="button" value="4" onClick="NumPressed(4)">
<input class="btn stan" type="button" value="5" onClick="NumPressed(5)">
<input class="btn stan" type="button" value="6" onClick="NumPressed(6)">
<input class="btn blue" type="button" value="+" onClick="Operation('+')">
<br>
<input class="btn stan" type="button" value="1" onClick="NumPressed(1)">
<input class="btn stan" type="button" value="2" onClick="NumPressed(2)">
<input class="btn stan" type="button" value="3" onClick="NumPressed(3)">
<input class="btn blue" type="button" value="*" onClick="Operation('*')">
<br>
<input class="btn stan" type="button" value="." onClick="Decimal()">
<input class="btn stan" type="button" value="0" onClick="NumPressed(0)">
<input class="btn stan" type="button" value="+/-" onClick="Neg()" >
<input class="btn blue" type="button" value="/" onClick="Operation('/')">
<br>
<input class="btn s red" type="button" value="CE" onClick="ClearEntry()">
<input class="btn red" type="button" value="←"onclick="Clear(this.form.ReadOut)">
<input class="btn ravno" type="button" value="=" onClick="Operation('=')">
<br>
<hr id="hr" class="hidden">
<!--расширенный вид калькулятора-->
<input class="btn hidden stan" id="sin" type="button" value="sin"onClick="sinn()">
<input class="btn hidden stan" id="cos" type="button" value="cos"onclick="coss()">
<input class="btn hidden stan" id="tan" type="button" value="tan"onClick="tann()">
<input class="btn hidden stan" id="x2" type="button" value="x^2"onClick="Pow2()">
<br>
<input class="btn hidden stan" id="ln" type="button" value="ln"onclick="Ln()">
<input class="btn hidden stan" id="log" type="button" value="log"onclick="Log()" >
<input class="btn hidden stan" id="sqrt" type="button" value="√x"onclick="Sqrt()">
<input class="btn hidden stan" id="x4" type="button" value="e^x"onClick="ExpPowX()">
<br>
<input class="btn hidden stan" id="exp" type="button" value="exp"onClick="Exp()">
<input class="btn hidden stan" id="pi" type="button" value="pi" onClick="Pi()">
<input class="btn hidden stan" id="n1" type="button" value="n!"onclick="fac()">
<input class="btn hidden stan" id="x5" type="button" value="1/x"onClick="oneDx()">
<br>
<input class="btn hidden stan" id="pro" type="button" value="%"onClick="Percent()">
<input class="btn hidden stan" id="and1" type="button" value="10^x"onClick="tenx()">
<input class="btn hidden stan" id="and2" type="button" value="3√x"onClick="sqrt3()">
<input class="btn hidden stan" id="and3" type="button" value="x^3"onClick="Pow3()">
<br>
<input class="btn hidden stan" id="and4" type="button" value="asin"onclick="asinn()">
<input class="btn hidden stan" id="and5" type="button" value="acos"onclick="acoss()">
<input class="btn hidden stan" id="and6" type="button" value="atan"onclick="atann()">
<input class="btn hidden stan" id="and7" type="button" value="x^4"onClick="Pow4()"></div>
</form>
</div>
</body>
</html>
Style.css fayli:
body {
font-family: Georgia;
overflow-y:hidden;
margin: 0;
padding: 0;
height: 100%;
background-color: #336666 ;
background-image: url(img/bgto.png);
color:#bbbbbb;
}
.calc {
position: absolute;
top: 12%;
left: 20%;
z-index: 2;
width: 255px;
border-top:1px solid #333;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #333;
border-radius:5px;
background-color: #161616;
color:#fff;
font-family: helvetica;
transition: 0.2s linear;
}
.btn {
margin: 3px;
width: 50px;
height: 40px;
border-top:1px solid #333;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #333;
border-radius:5px;
background:#161616;
color:#fff;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.blue:active{
border-top:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #000;
text-shadow: 0px 0px, 1px 1px #000000;
}
.red:active{
border-top:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #000;
text-shadow: 0px 0px, 1px 1px #000000;
}
.stan:active{
border-top:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #000;
background:#161616;
text-shadow: 0px 0px, 1px 1px #000000;
}
.s{
margin-left: 11px;
}
.ravno{
width: 110px;
}
.ravno:active{
border-top:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #000;
text-shadow: 0px 0px, 1px 1px #000000;
}
.stan{ }
.blue{
background:#0D034E;
}
.red{
background:#6A0000;
}
hr{
height:1px;
border:0px none;
background-color: #000;
}
.slidemain{
position: absolute;
top: 8%;
left: 20%;
width: 161px;
height: auto;
border-top:1px solid #333;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #333;
border-radius:5px;
background:#161616;
cursor: pointer;
}
.slidemain a{
padding: 10px;
color: white;
text-align: center;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.slidemain:active{
border-top:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #000;
}
.pole {
margin-top: 10px;
margin-right:20px;
margin-left: 10px;
padding-right: 5px;
width: 225px;
height: 30px;
border: solid 1px #000000;
border-top:1px solid #000;
border-right:1px solid #333;
border-bottom:1px solid #333;
border-left:1px solid #000;
border-radius:5px;
background:#2A2A2A;
color:#fff;
text-align: right;
font-size: 20px;
cursor: default;
}
.hidden {
opacity: 0;
}
h2{
margin-top: 20px;
color: #272727;
text-align: center;
text-shadow: 0px 0px, 1px 1px #939393;
}
p{
text-align: center;
}
.ava{
margin-top: 15px;
margin-left: 20px;
width: 80px;
height: 80px;
border-radius: 50%;
}
.icons{
margin-top: 2px;
margin-left: 60px;
width: 15px;
height: 15px;
}
a{
color: #ff001b;
}
a:visited{
color: #ff001b;
}
#parent_popup {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 50;
display: none;
width: 100%;
height: 100%;
background: #000;
opacity: .98;
}
#popup {
position: fixed;
top: 20%;
right: 37%;
bottom: 20%;
left: 37%;
width: 350px;
height: 300px;
border-radius: 20px;
background : url(img/bgto.png) ;
box-shadow: 0 0 0 1px #4e4e4e, 0 0 13px #ffffff;
color: #000000;
text-align: center;
word-wrap: break-word;
font-size: 16px;
cursor: default;
}
#popup a{
margin-left: 180px;
font-size: 12px;
}
#poslovica{
position: absolute;
top: 0;
right: 20%;
left: 20%;
z-index: 51;
display: none;
width: auto;
height: auto;
background-color: none;
color: gray;
opacity: 0;
cursor: default;
transition: 1s;
}
#poslovica:hover{
opacity: 1;
}
.close{
position: absolute;
top: -40px;
right: -50px;
z-index: 150;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: none;
background-image: url("img/close.png");
background-repeat: no-repeat;
opacity: .6;
cursor: pointer;
transition: 0.5s ;
}
.close:hover{
right: -60px;
width: 40px;
height: 40px;
opacity: 1;
}
#doc{
position: absolute;
top: 0;
right: 20%;
bottom: 0;
left: 20%;
z-index: 20;
display: none;
width: 40%;
height: 100%;
background-color: black;
}
#back{
position: absolute;
top: 0;
bottom: 0;
z-index: 22;
display: none;
width: 100%;
height: 100%;
background-color: black;
opacity: .98;
}
#closedoc{
position: absolute;
top: 2%;
right: -60%;
z-index: 25;
width: 30px;
height: 30px;
border-radius: 15px;
background-color: none;
background-image: url("img/close.png");
background-repeat: no-repeat;
opacity: .6;
cursor: pointer;
transition: 0.5s linear;
}
#closedoc:hover{
right: -62%;
width: 40px;
height: 40px;
opacity: 1;
}
#shtorka{
display: block;
background-color: black;
opacity: 0;
height: 250px;
position: absolute;
bottom: 0;
top: 300px;
z-index: 2;
width: 255px;
}
Natiyjede tómendegishe kalkulyator payda boladı.
