02.07.2021, 07:31
|
|
Интересующийся
|
|
Регистрация: 07.05.2021
Сообщений: 16
|
|
|
Реализуйте описанный калькулятор.
Давайте реализуем калькулятор. Он будет работать как обычный классический калькулятор: у вас будет инпут, а под ним кнопочки с цифрами и знаками операций. По нажатию на цифры они должны появляться в инпуте. По нажатию на знак операции число из инпута должно исчезать. После этого при вводе следующего числа в инпут и нажатия на знак равно в инпуте должен появится результат операции.
Реализуйте описанный калькулятор.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>focusout</title>
</head>
<body>
<! -- Задача 7.2>
<p></p>
<input type="text">
<table>
</table>
<script>
'use struck';
let p = document.querySelector('p');
let input =document.querySelector('input');
let table = document.querySelector('table');
let arr=['1', '2', '3', '4', '5', '6', '7', '8', '9', '0','-', '+', '*','='];
createTable();
addEvents();
function createTable() {
let k =0;
for (let i = 0; i ; i++) {
let tr=document.createElement('tr');
table.appendChild(tr);
for (let j = 0; j <5 ; j++) {
if (arr[k]!=undefined){
let td=document.createElement('td');
td.innerHTML=arr[k];
tr.appendChild(td);
}
k++;
}
}
}
function addEvents() {
let td = document.querySelectorAll('td');
for (let elem of td){
elem.addEventListener('click',function () {
if (elem.innerHTML!='='){
input.value=elem.innerHTML;
p.innerHTML+=elem.innerHTML;
}else{
let otw=eval(p.innerHTML);
p.innerHTML+=' = '+otw;
}
})
}
}
</script>
</body>
</html>
|
|
02.07.2021, 07:32
|
|
Интересующийся
|
|
Регистрация: 07.05.2021
Сообщений: 16
|
|
|
не работает
|
|
02.07.2021, 07:58
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
Клик нужно вешать на всю таблицу, а по содержимому определять что с этим кликом делать...  |
|
02.07.2021, 08:01
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
|
Сообщение от javascript888
|
|
не работает
|
|
Сообщение от javascript888
|
for (let i = 0; i ; i++)
|
Вот это что такое? |
|
02.07.2021, 08:03
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
javascript888, хватит генерить английские слова. 
Начинай писать осмысленный код и учись проверять его по шагам.
Иначе это не программирование. 
|
|
02.07.2021, 08:39
|
|
Интересующийся
|
|
Регистрация: 07.05.2021
Сообщений: 16
|
|
|
|
|
02.07.2021, 10:26
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,123
|
|
|
Сообщение от javascript888
|
|
как этому научиться?
|
Написал что-то проверь как это работает...
А ты пишешь якобы всю программу, а потом она у тебя не работает.
Ты начинаешь спрашивать - почему.
Хотя у тебя первый же цикл уже бессмысленный.
Какой смысл писать дальше?
Нужно отладить сам цикл, написать его правильно. Цикл так же можно проверить по шагам, если разместить внутрь вывод на экран (или консоль) неких данных... |
|
02.07.2021, 11:04
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
|
|
02.07.2021, 12:08
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,072
|
|
|
calculator калькулятор
javascript888,
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>calculator</title>
<style type="text/css">
table {
border-collapse: collapse;
margin: 5px;
}
td {
height: 40px;
width: 40px;
border: 1px solid rgba(0, 0, 0, 1);
text-align: center;
font-size: 32px;
}
</style>
</head>
<body>
<input type="text">
<table></table>
<script>
'use strict';
let input = document.querySelector('input');
let table = document.querySelector('table');
let arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '+', '*', '/', '='];
createTable(arr, 5, table);
function createTable(arr, columns, table) {
let html = document.createDocumentFragment(),
tr;
arr.forEach((v, i) => {
if (i % columns === 0) {
tr = document.createElement('tr');
html.append(tr)
};
let td = document.createElement('td');
td.innerHTML = v;
td.onclick = addEvents.bind(null, v);
tr.append(td);
})
table.append(html)
}
function addEvents(v) {
if (v == +v) {
if (input.dataset.end) {
input.value = v;
input.dataset.end = input.dataset.action = '';
} else input.value += v;
}
if (['-', '+', '*', '/'].includes(v)) {
input.dataset.a = input.value;
input.dataset.action = v;
input.value = input.dataset.end = '';
}
if (v == '=') {
if (!input.value || !input.dataset.action) return;
if (!input.dataset.end) input.dataset.b = input.value;
input.dataset.end = 1;
let a = +input.dataset.a;
let b = +input.dataset.b;
let action = input.dataset.action;
if (action === '+') input.dataset.a = input.value = (a + b).toFixed(2);
if (action === '-') input.dataset.a = input.value = (a - b).toFixed(2);
if (action === '*') input.dataset.a = input.value = (a * b).toFixed(2);
if (action === '/') input.dataset.a = input.value = (a / b).toFixed(2);
}
}
</script>
</body>
</html>
|
|
03.07.2021, 17:05
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
|
Сообщение от javascript888
|
|
как этому научиться?
|
Нужно консолью пользоваться, нажми F12, откроется Панель разработчика, смотри вкладку Консоль. Там выводятся ошибки и твои сообщения из скрипта через функцию console.log(). Функция расставляется в ключевых местах: начале функции, цикла, условия и тд. Сообщения можно сделать прямо на странице, если подключить скрипт наподобие console.js, как в примере.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Console</title>
</head>
<body>
<!-- console.js -->
<script>
// log() displays messages
(function() {
var parentElement = document.createElement('div');
parentElement.style.cssText =
'position: fixed; top: 5px; right: 5px; z-index: 100;' +
'min-width: 200px; max-height: 200px; padding: 5px; overflow-y: scroll;' +
'font: 12px/1.5 monospace; color: white; text-align: left;' +
'background: black; opacity: 0.5;';
parentElement.textContent = 'Console';
document.body.appendChild(parentElement);
var consoleLog = console.log;
window.log = console.log = function() {
var message = '>';
for (var i = 0; i < arguments.length; i++) message += ' ' + arguments[i];
var childElement = document.createElement('div');
childElement.style.cssText =
'border-bottom: 1px dotted gray';
childElement.textContent = message;
parentElement.appendChild(childElement);
parentElement.scrollTop = parentElement.scrollHeight - parentElement.clientHeight;
consoleLog.apply(console, arguments);
};
})();
// time() returns HH:MM:SS.mmm
(function() {
var format = {
hour: '2-digit', minute: '2-digit', second: '2-digit',
fractionalSecondDigits: 3, hour12: false
};
window.time = function(date) {
return (date || new Date).toLocaleTimeString('en', format);
};
})();
// index() returns increment
(function() {
var indexes = {};
window.index = function(name) {
return indexes[name] = (name in indexes) ? indexes[name] + 1 : 0;
};
})();
</script>
<!-- main.js -->
<script>
log('SCRIPT start=', time());
f1();
f2();
function f1() {
log('FUNC f1');
let k = 0;
for (let i = 0; i < 2; i++) {
log('- FOR i=', i);
for (let j = 0; j < 4; j++) {
log('-- FOR j=', j);
if (k % 2) {
log('--- IF k=', k);
} else {
log('--- ELSE k=', k);
}
k++;
}
}
}
function f2() {
console.log('FUNC f2');
}
log('SCRIPT end=', time());
</script>
</body>
</html>
|
|
|
|
