Как создать калькулятор следующего вида?
Помогите с кодом для калькулятора. Для вас это простота а я уже второй день мучаюсь :(
https://4.downloader.disk.yandex.ru/...&size=1249x539 Только начинаю изучать js. Сколько не бился - не получается хоть ты тресни( Помогите кто может. Нужно чтоб код html был примерно таким. <span id="x1"></span>*<input type="text" id="vvod1"/>=<span id="y1"></span> <span id="x2"></span>*<input type="text" id="vvod2"/>=<span id="y2"></span> <span id="x3"></span>*<input type="text" id="vvod3"/>=<span id="y3"></span> <span id="summa_vseh_y"></span> |
blogivan,
ссылка нерабочая. Пости код сюда, или на jsfiddle, думаешь кому то нравиться скачивать и распоковывать чужое дерьмо? |
Число1 * Инпут1 = произведение1
Число2 * Инпут2 = произведение2 Число3 * Инпут3 = произведение3 Итого: произведение1 + произведение2 + произведение3 |
|
Цитата:
|
К примеру:
В коде хтмл прописали спан с конкретным числом (ценой). Например цена чего нить там равна 100. После спана пишем инпут в который пользователь вводит количество товара. Далее пишем спан в который должно вывестись произведение вышеупомянутых. В кратце вот: Число1 * Инпут1 = произведение1 Блоков несколько для нескольких товаров. После всех блоков нужно в спан вывести сумму всех товаров. |
Все мне некогда. Если никто не ответит, отвечу примерно через час
|
И на том спасибо!:yes:
|
вот простой вариант без проверки полей
<html>
<head>
<meta charset="utf-8">
<style>
.goods{display: block}
</style>
</head>
<span class="goods" price="10">введите количество товара<input><span>
<span class="goods" price="20">введите количество товара<input><span>
<span class="goods" price="30">введите количество товара<input><span>
<button id="b">посчитать</button>
<div id="out"></div>
<script>
goods=[].map.call(document.querySelectorAll(".goods"), function(x){return x})
prices=goods.map(function(x){return +x.getAttribute("price")})
count=function(arr1, arr2){
var arr=[]
for(var i=0; i<arr1.length; i++) arr.push(arr1[i]*arr2[i])
return arr.reduce(function(x, y){return x + y})
}
b.onclick=function(){
var numbers=goods.map(function(x){return +x.querySelector("input").value})
out.innerHTML=count(numbers, prices)
}
</script>
</html>
|
Цитата:
|
kostyanet,
Во всяком случае, поудобней, чем в похапе или жабе. ООП в JS растет из смоллтока. Он заточен под модульность и масштабирование, только для этого его знать надо. |
Ну например надо добавить сумму после каждого инпута по keyup.
|
Цитата:
<html>
<head>
<meta charset="utf-8">
<style>
.goods{display: block}
</style>
</head>
<span class="goods" price="10">введите количество товара<input><span class="out"></span><span>
<span class="goods" price="20">введите количество товара<input><span class="out"></span><span>
<span class="goods" price="30">введите количество товара<input><span class="out"></span><span>
<br>
<button id="b">посчитать</button>
<div id="out"></div>
<script>
goods=[].map.call(document.querySelectorAll(".goods"), function(x){return x})
prices=goods.map(function(x){return +x.getAttribute("price")})
count=function(arr1, arr2){
var arr=[]
for(var i=0; i<arr1.length; i++) arr.push(arr1[i]*arr2[i])
return arr.reduce(function(x, y){return x + y})
}
inputs=goods.map(function(x){return x.querySelector("input")})
outs=goods.map(function(x){return x.querySelector(".out")})
inputs.forEach(function(x, i){x.onkeyup=function(){outs[i].innerHTML=+this.value*prices[i]}})
b.onclick=function(){
var numbers=inputs.map(function(x){return +x.value})
out.innerHTML=count(numbers, prices)
}
</script>
</html>
Ты в следующий раз, когда че-нибудь критиковать начнешь, рожу попроще делай. |
калькулятор товаров с общей суммой
:write:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
.goods{display:block}
.goods *{margin:0 4px}
#out{margin-left:13em}
</style>
</head>
<span class="goods" data-price="10"><input><span></span></span>
<span class="goods" data-price="20"><input><span></span></span>
<span class="goods" data-price="30"><input><span></span></span>
<div id="out"></div>
<script>
var goods, fn = function() {
out.innerHTML = goods.reduce(function(a, b) {
return a + b()
}, 0)
};
goods = [].map.call(document.querySelectorAll(".goods"), function(a) {
var b = a.dataset.price,
c = a.querySelector("input"),
d = a.querySelector("span");
a.insertBefore(document.createTextNode(b + " * "), c);
a.insertBefore(document.createTextNode(" = "), d);
c.oninput = fn;
return function() {
return d.innerHTML = b * c.value || 0
}
});
</script>
</html>
|
Цитата:
Вы освоили технологию баден-баден очевидно сочтя что жиквери слишком унылое гэ для целей самовыражения. Ну то есть поняли что выпендриться с жикверей не получится, ибо тотально все ламеры освоили эту либу и ее культуру, которая и сквозит в ваших кодах. Не будут они работать. Оно функциклирует в паре-тройке строк и для простой задачи. Когда задача начнет расти и эволюционировать, вы не по 22 раза будете все идентифицировать и считать, а по 22222 раза, ибо паттерн такой, ламеричный. Еще был один подвох в задании про киап: если киап уже нашел ценник и проверил и посчитал, то за членом все остальное? Само собой ответ - не за членом: уже все посчитано. Короче, предлагаю прекращать самовыражовываться. Или мы что, все еще недостаточно тупые и требуется друг друга еще и еще отуплять? Оставьте это занятие журналистам, они по долгу службы, за деньги этим занимаются. А мы друг друга должны из ж доставать, информировать и прояснять все. Иначе нам конец. |
Касательно калькуляторов всяких. Мы с жабой в браузере и с юзером, а значит мы делаем event driven приложение, а не нажал кнопку - собери грибочки.
Что такое event driven - это значит любые действия юзера используются. Тыкнул юзер в чек-бокс - какое-то число запислось куда надо. Тыкнул еще раз - другое. Нажал кнопку на клаве - по той же схеме. Все довольно просто, за исключением природной угребищности хтмльных controls, а сооружать свои на том же глюкавом html и css обозначает экспоненциальный рост геморроя. Само собой условия задачи применительно к случаю надо поломать, ибо зачем гадить самому себе, если можно сделать по-другому, а сделать по-другому само собой можно и это очень легко и просто. Во-первых цена в интерфейсе это рендер числа, которое должно храниться отдельно, как число. Вы легко побежали считать эту цену, потому что ТС ее нарисовал как число, а в реальности это может быть слово: 124 руб 30 коп. Заказчик постановит и все. Конеш, знатоки рег поскачут парсить текст, а чо такова... Грамотные же люди выведут в хтмл цену как число для скрипта, и цену в заказанном формате для юзера. Даже если оно сейчас совпадает - вообще не факт что в будущем так и останется. Это надо понимать. Значит все что касается оформления нас не касается, а ценник прописан прямо в input'е, в любом атрибуте типа data-p, или просто p="132.45" <input type=number min=1 max=1000 step=1 value="" p="132.45"> Контроль за действиями юзера ведется через события падающие с контролсов на форму <form id='calc'> <input type=number min=1 max=1000 step=1 value="" p="132.45"> Теперь пишем контроллер для document.getElementById('calc'). |
Цитата:
При чем тут текст в цитате? При том что нет контроля за общей картиной. Например при достижении суммы заказа в Х включается скидки в Игрек. Вопрос: в каком месте последовательной обработки вы посчитаете, сравните, вычислите и примените скидку? То есть такого места сейчас нет, его надо будет расчищать особо, и довольно заборов которые вы городите поломать. Самое прикольное что вроде бы те же люди не забывают рассказывать о пресловутом делегировании при случае. |
Короче, так не делается, а если так делается то называется оно - колхоз. Чтобы сделать индустриальное расширяемое приложение, надо вспоминать как устроено нормальное программирование.
|
Пришёл к следующему:
<html> <head> <style> table{ background: #FFF7BF; border-spacing: 0px; border: 1px solid #f00; } table td{ padding: 10px; border: 1px solid #f00; } </style> </head> <body> <table> <!--Шапка таблицы************************************ **************************--> <tr> <td>Наименование работ</td> <td>Цена за кг.</td> <td>Колличество кг.</td> <td>Сумма</td> </tr> <!--Шапка таблицы************************************ **************************--> <tr> <script> function ChangeOnFly() { var kg = document.getElementById('input_kg').value; var tarif = document.getElementById('tarif_obl').value; document.getElementById('dostavka').firstChild.nod eValue = kg*tarif; } </script> <td>Картофель</td> <td>50<input type="hidden" id="tarif_obl" value="50"></td> <td><input id="input_kg" type="text" onFocus="this.select();" onKeyUp="ChangeOnFly();" name=kg></td> <td><span id="dostavka">0</span></td> </tr> <!--************************************************** *************************--> </table> </body> </html> Теперь собственно сам вопрос. Нужно сделать много полей с разными овощами. Не могу врубиться каким образом ( Кто чем может :) |
Можно сделать так.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
table{
background: #FFF7BF;
border-spacing: 0px;
border: 1px solid #f00;
}
table td, table th{
padding: 10px;
border: 1px solid #f00;
}
</style>
</head>
<body>
<form action="/" method="post">
<table id="myTable"></table>
</form>
<div>Итого <span id="total">0</span></div>
<script>
(function(){
var addEvent = function(el, type, callback){
if (document.addEventListener){
el.addEventListener(type, callback, false);
} else if (document.attachEvent){
el.attachEvent('on' + type, function(event){
callback.call(el, event);
})
}
};
var data = [{
name: 'Картофель',
key: 'potato',
price: 50
},{
name: 'Капуста',
key: 'cabbage',
price: 150
},{
name: 'Лук',
key: 'bow',
price: 350
},{
name: 'Морковь',
key: 'carrot',
price: 30
},{
name: 'Свекла',
key: 'beet',
price: 92
},{
name: 'Редька',
key: 'radish',
price: 20
},{
name: 'Редис',
key: 'radishes',
price: 120
}];
var table = document.getElementById('myTable');
var totalElement = document.getElementById('total');
var html = [], item, total = 0;
html.push('<tr>');
html.push('<th>Наименование работ</th>');
html.push('<th>Цена за кг.</th>');
html.push('<th>Колличество кг.</th>');
html.push('<th>Сумма</th>');
html.push('</tr>');
for (var i = 0, len = data.length; i < len; i+=1){
item = data[i];
html.push('<tr>');
html.push('<td>'+ item.name +'</td>');
html.push('<td>'+ item.price +'</td>');
html.push('<td><input data-key="'+ item.key +'" data-price="'+ item.price +'" type="text" name="count_'+ item.key +'" value="0"></td>');
html.push('<td><span id="count_'+ item.key +'">0</span><input data-total="1" type="hidden" id="'+ item.key +'" name="price_'+ item.key +'"></td>');
html.push('</tr>');
}
table.innerHTML = html.join('');
var inTotal = function(){
var number = 0;
var total = Array.prototype.slice.call(table.getElementsByTagName('input'));
var item, price, value;
for (var i = 0, len = total.length; i < len; i+=1){
item = total[i];
price = +item.getAttribute('data-total');
if (price){
value = +item.value;
number += value;
}
}
return number;
};
var inputEvent = function(e){
var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'input'){
var name = target.getAttribute('name');
var key = target.getAttribute('data-key');
var price = +target.getAttribute('data-price');
var value = +target.value;
var result = price * value;
var summa = document.getElementById(name);
var hiddenInput = document.getElementById(key);
summa.innerHTML = result;
hiddenInput.value = result;
totalElement.innerHTML = inTotal();
}
};
addEvent(table, 'change', inputEvent);
addEvent(table, 'keyup', inputEvent);
})();
</script>
</body>
</html>
|
Цитата:
Цитата:
|
Что господа, так и будем поклоняться национальной тупизне?
Цитата:
|
Ну ладно, кто из ламеров хотел бы реабилитироваться? Ответьте что значит event-driven application?
|
| Часовой пояс GMT +3, время: 20:46. |