сначала создадим три текстовых файла с помощью программы Блокнот в Виндовс ХР или другой Виндовс,
затем переименовываем
первый файл в calc.html - файл с формой калькулятора,
второй файл в main.css - стили шрифтов и цвета,
третий файл в script.js - файл с описанием функций калькулятора,
затем, пройдите по всем пунктам ниже и вставьте коды листингов в соответствующие файлы, сам проверил - калькулятор работает.
создаём первый текстовый файл с именем, например calc.html в него вставьте следующий листинг:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Калькулятор HTML&JavaScript</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div id="mainDiv" align="center" >
<p>Калькулятор</p>
<form>
<table >
<tr>
<td colspan="3"><input type="text" id="textField" readonly /></td>
<td><input type="submit" id="submitButton" value="="/></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="addToField(1)"/></td>
<td><input type="button" value="2" onclick="addToField(2)"/></td>
<td><input type="button" value="3" onclick="addToField(3)"/></td>
<td><input type="button" value="-" onclick="addToField('-')"/></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="addToField(4)"/></td>
<td><input type="button" value="5" onclick="addToField(5)"/></td>
<td><input type="button" value="6" onclick="addToField(6)"/></td>
<td><input type="button" value="+" onclick="addToField('+')"/></td>
</tr>
<tr>
<td><input type="button" value="7" onclick="addToField(7)"/></td>
<td><input type="button" value="8" onclick="addToField(8)"/></td>
<td><input type="button" value="9" onclick="addToField(9)"/></td>
<td><input type="button" value="/" onclick="addToField('/')"/></td>
</tr>
<tr>
<td><input type="button" value="." onclick="addToField('.')"/></td>
<td><input type="button" value="0" onclick="addToField(0)"/></td>
<td><input type="button" value="Пи" onclick="addToField(3.14159265359)"/></td>
<td><input type="button" value="*" onclick="addToField('*')"/></td>
</tr>
<tr>
<td><input type="button" value="x^2" onclick="power(2)"/></td>
<td><input type="button" value="x^3" onclick="power(3)"/></td>
<td><input type="button" value="10^x" onclick="powten()"/></td>
<td><input type="reset" value="C" id="resetButton"/></td>
</tr>
</table>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
- этот файл-форма calc.html содержит основные графические компоненты калькулятора.
далее создаем файл main.css - стили шрифтов и цвет формы задаются в этом файле, вот его код:
p{
font: 20px tahoma;
}
<h1>mainDiv{</h1>
background: skyblue;
width:350px;
margin:20px auto;
box-shadow:10px 10px 150px grey;
padding-top: 5px;
padding-bottom: 20px;
}
input[type="submit"]{
width:50px;
height:30px;
opacity:0.8;
border:0px;
}
input[type="button"], input[type="reset"]{
width:50px;
height:50px;
opacity:0.8;
border:0px;
}
input[type="text"]{
border:0px;
outline: none;
opacity:0.8;
height:27px;
width:159px;
}
input:hover{
opacity:1;
}
и наконец, функционал записываем в специальный файл script.js, вот его листинг:
var textField = document.getElementById('textField');
textField.focus();
var submit = document.getElementById('submitButton');
submit.addEventListener('click', buttonClicked, false);
function buttonClicked(e) {
e.preventDefault();
x = textField.value;
try {
x = eval(x);
textField.value = x;
} catch (ex) {
alert('Неверный формат');
}
}
function addToField(n) {
textField.value += n;
textField.focus();
}
function power(y) {
x = textField.value;
x = Math.pow(x, y);
textField.value = x;
textField.focus();
}
function powten() {
x = textField.value;
x = Math.pow(10, x);
textField.value = x;
textField.focus();
}