Доработка калькулятора

@med-75 · Регистрация: 26.09.2021

Студворк — интернет-сервис помощи студентам

Сам код:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<html xmlns="http://www.w3.org/TR/REC-html40">
 
<p>Оценки</p>
<br>
<input id="num1"/>
<br>
<input id="num2"/>
<br>
<input id="num3"/>
<br>
<input id="num4"/>
<br>
<input id="num5"/>
<br>
<input id="num6"/>
<br>
<input id="num7"/>
<br>
<input id="num8"/>
<br>
<input id="num9"/>
<br>
<input id="num10"/>
<br>
<br>
<button onclick="func()">Рейтинг</button>
<br>
<br>
<p id="result"></p>
 
<script>
function func(){
var num1 = Number(document.getElementById("num1").value);
var num2 = Number(document.getElementById("num2").value);
var num3 = Number(document.getElementById("num3").value);
var num4 = Number(document.getElementById("num4").value);
var num5 = Number(document.getElementById("num5").value);
var num6 = Number(document.getElementById("num6").value);
var num7 = Number(document.getElementById("num7").value);
var num8 = Number(document.getElementById("num8").value);
var num9 = Number(document.getElementById("num9").value);
var num10 = Number(document.getElementById("num10").value);
var result = ((num1*10)+(num2*9)+(num3*8)+(num4*7)+(num5*6)+(num6*5)+(num7*4)+(num8*3)+(num9*2)+(num10*1))/55;
 
document.getElementById("result").innerHTML = result;
}
</script>
 
</html>

Необходимо сделать так, чтобы в каждой ячейке по умолчанию уже стояли пятёрки, но, в то же время, чтобы их можно было менять на другие оценки вручную.

Так же хотелось бы подсократить массивы...

KingdaKa · 26.09.2021, 13:48

HTML5
1
<input id="num1" placeholder="5"/>

- это образец числа

HTML5
1
<input id="num2" value="5"/>

- уже введенное число

Сами выбирайте что нравится.

А где вы тут видите массивы, которые надо сократить?

@med-75 · 26.09.2021, 14:28 **[ТС]**

Сообщение от KingdaKa

- уже введенное число

Спасибо за подсказку.

Вроде простое решение, а сам сразу не догадался (точнее, подзабыл некоторые азы скрипта).

Сообщение от KingdaKa

А где вы тут видите массивы, которые надо сократить?

Ну, например, в самом скрипте сейчас всего 10 строк, а в идеале должно быть 150. Вот и думаю, как это сжать...

@CyberGeniuz · 26.09.2021, 14:42

Сообщение от med-75

Ну, например, в самом скрипте сейчас всего 10 строк, а в идеале должно быть 150. Вот и думаю, как это сжать...

Я понял, что Вы хотите. Могу помочь, только мне 1 момент не понятен.

Что за формула тут ?

JavaScript
1
var result = ((num1*10)+(num2*9)+(num3*8)+(num4*7)+(num5*6)+(num6*5)+(num7*4)+(num8*3)+(num9*2)+(num10*1))/55;

Помимо этого все понятно, можно в несколько строк сделать код, который будет выводить любое кол-во заданных строк

@amr-now · 26.09.2021, 14:42

med-75, а почему такая странная система подсчета рейтинга?
Самая первая оценка самая значимая?

Обычно же считают среднюю арифметическую.

@med-75 · 26.09.2021, 14:50 **[ТС]**

Сообщение от CyberGeniuz

Что за формула тут ?

Это формула средневзвешенного подсчёта оценок.

В упрощённом варианте выглядит так: (X*Y#2)+(X*Y#1)/(Y#2+Y#1), где X - это оценка, а Y# - это номер оценки.

Сообщение от amr-now

Самая первая оценка самая значимая?

Всё верно. Чем свежее оценка, тем больше её вес. И наоборот.

@CyberGeniuz · 26.09.2021, 15:21

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html xmlns="http://www.w3.org/TR/REC-html40">
 
<p>Оценки</p>
<br>
<div id="fields">
 
</div>
 
<br>
<br>
<button onclick="func()">Рейтинг</button>
<br>
<br>
<p id="result"></p>
 
 
 
</html>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
 
    var fields_count = 10; // кол-во полей
    var default_value = 5; // Значение по умолчанию в полях
    var fields_div = document.getElementById("fields"); // родительский элемент полей
    for (i = 0; i < fields_count; i++) { // создадим поля
        var field = "<div style='margin-top: 5px'><input type='number' value='" + default_value + "' id='num_" + i + "'></div>";
        fields_div.innerHTML += field; // Добавим поле     
    }
 
    function func() {
        var result = 0;
        var x = 0;
        for (i = 0; i < fields_count; i++) { // Переберем все поля
            var num = Number(document.getElementById("num_" + i).value); // Получим значение числа
            var z = (fields_count - i) == 0 ? 1 : (fields_count - i);
            result += num * z;
            x += i + 1;
        }
 
        result = result / x;
        document.getElementById("result").innerHTML = result;
    }
</script>

Добавлено через 12 минут
Не могу редактировать пост, добавлю снизу.
16 строка лишней получилась в JS.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
 
    var fields_count = 10; // кол-во полей
    var default_value = 5; // Значение по умолчанию в полях
    var fields_div = document.getElementById("fields"); // родительский элемент полей
    for (i = 0; i < fields_count; i++) { // создадим поля
        var field = "<div style='margin-top: 5px'><input type='number' value='" + default_value + "' id='num_" + i + "'></div>";
        fields_div.innerHTML += field; // Добавим поле     
    }
 
    function func() {
        var result = 0;
        var x = 0;
        for (i = 0; i < fields_count; i++) { // Переберем все поля
            var num = Number(document.getElementById("num_" + i).value); // Получим значение числа
            var z = fields_count - i;
            result += num * z;
            x += i + 1;
        }
        result = result / x;
        document.getElementById("result").innerHTML = result;
    }
</script>

@amr-now · 26.09.2021, 16:04

Вариант, когда значения из полей ввода продублированы в массив чисел.
Соответственно, массив чисел можно загружать с сервера и отправлять на сервер.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<html>
 
<head>
    <meta charset="utf-8">
</head>
 
<body>
    <p>Оценки</p>
    <div id="container"></div>
    <button type="button" id="btn">Рейтинг</button>
    <br>
    <br>
    <p id="result"></p>
    <script>
        let list = document.querySelector("#container");
        let btn = document.querySelector("#btn");
        let result = document.querySelector("#result");
        let nums; // Будет массив оценок
 
        document.addEventListener('DOMContentLoaded', document_loaded); // Назначен обработчик при загрузке страницы
        btn.onclick = btn_click; // Назначен обработчик при нажатии на кнопку
 
        function document_loaded() { // При загрузке страницы
            // Каким-то образом получили список, который мы заполняли ранее
            nums = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5];
 
            nums.forEach((e, i) => { appendList(e, i) }); // Отобразить оценки, которые были ранее
        }
        function appendList(num, index) { // Функция отображения в начале списка одной оценки
            list.insertAdjacentHTML(
                "afterbegin", // Последнюю оценку ставим первой
                `<input type="number" data-index="${index}" value="${num}"><br>` // Добавим поле ввода с <br>
            );
            list.firstElementChild.oninput = inp_input; // Назначен обработчик при изменении поля ввода
        }
 
        function inp_input() { // обработчик при изменении поля ввода 
            let i = +this.dataset.index; // индекс соответствующего элемента массива
            nums[i] = +this.value; // Сохранить соответствующий элемент массива
        }
        function btn_click() { // обработчик при нажатии на кнопкку
            let sum = 0;
            for (let i = nums.length - 1; i >= 0; i--) {
                sum += nums[i] * (i + 1);
            }
            result.textContent = sum / ((1 + nums.length) * nums.length / 2);
 
            console.log(sum); // Тестирование
            console.log((1 + nums.length) * nums.length / 2);
                        
            // Далее массив nums и результат можно отправить на сервер
            console.log(nums);
        }
    </script>
</body>
 
</html>

@med-75 · 26.09.2021, 20:54 **[ТС]**

Огромное спасибо!

Вставил, проверил - всё работает.

И даже эту хитровыдуманную формулу как-то закодировали!..

Сам до такого точно не додумался бы, ибо... всего лишь любитель...

Осталось облагородить результат - чисто стилистически...

@med-75 · 27.09.2021, 10:11 **[ТС]**

Сообщение от med-75

Осталось облагородить результат

В ходе облагораживания возникло ещё несколько вопросов:

1. Возможно ли как-то пронумеровать поля (по подобию Microsoft Excel)?
2. Каким образом результат отобразить в отдельном поле?
3. Как изменить размер полей и оцентровать оценки в них?

@CyberGeniuz · 27.09.2021, 13:02

Сообщение от med-75

Возможно ли как-то пронумеровать поля (по подобию Microsoft Excel)?

Можете показать пример того, что Вы хотите ?

Сообщение от med-75

Каким образом результат отобразить в отдельном поле?

Достаточно создать поле с ID="result" и в самом конце скрипта заменить

JavaScript
1
document.getElementById("result").innerHTML = result;

на

JavaScript
1
 document.getElementById("result").value = result;

Сообщение от med-75

Как изменить размер полей и оцентровать оценки в них?

С помощью css

CSS
1
2
3
4
5
  #fields input[type="number"] {
        text-align: center;   /* Значения в полях по центру */
        width: 200px; /* Ширина поля */
        height: 30px;  /* Высота поля */
    }

KingdaKa · 27.09.2021, 13:08

Сообщение от CyberGeniuz

Можете показать пример того, что Вы хотите ?

Вместо

HTML5
1
<br>

заключить поля в список

HTML5
1
<ol>

, видимо, либо просто перед каждым ставить номер (так хуже).

HTML5
1
2
3
4
5
<ol>
<li><input id="num1"/></li>
<li><input id="num2"/></li>
...
</ol>

@med-75 · 27.09.2021, 16:21 **[ТС]**

Сообщение от CyberGeniuz

Достаточно создать поле с ID="result" и в самом конце скрипта заменить...

Это получилось.

Сообщение от CyberGeniuz

#fields input[type="number"] {
text-align: center; /* Значения в полях по центру */
width: 200px; /* Ширина поля */
height: 30px; /* Высота поля */
}

А здесь пока нет результата. Пытался вставлять эту конструкцию и в html, и в скрипт - не работает.

Сообщение от CyberGeniuz

Можете показать пример того, что Вы хотите ?

Перед каждым полем слева (вплотную к нему) должен быть его порядковый номер.

Сообщение от KingdaKa

Нумерация появилась (хоть и не вплотную к полям), но почему-то исчезли оценки в самих полях...

Добавлено через 11 минут

Сообщение от med-75

Перед каждым полем слева (вплотную к нему) должен быть его порядковый номер.

Это в идеале. Но возможны варианты: например, полупрозрачный номер в самом поле...

@CyberGeniuz · 27.09.2021, 16:46

Сообщение от med-75

А здесь пока нет результата. Пытался вставлять эту конструкцию и в html, и в скрипт - не работает.

Ее необходимо вставить в файл CSS, либо в html через тэг

CSS
1
2
3
4
5
6
7
<style>
      #fields input[type="number"] {
        text-align: center;   /* Значения в полях по центру */
        width: 200px; /* Ширина поля */
        height: 30px;  /* Высота поля */
    }
</style>

@med-75 · 27.09.2021, 16:55 **[ТС]**

Сообщение от med-75

А здесь пока нет результата. Пытался вставлять эту конструкцию и в html, и в скрипт - не работает.

Всё, разобрался. Оказывается, не хватало тегов <style>.

@CyberGeniuz · 27.09.2021, 16:57

med-75, Отправляю новое решение:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<html xmlns="http://www.w3.org/TR/REC-html40">
 
<p>Оценки</p>
<br>
<ul id="fields">
 
</ul>
 
<br>
<br>
<button onclick="func()">Рейтинг</button>
<br>
<br>
<input type="text" id="result">
 
<script>
 
    var fields_count = 10; // кол-во полей
    var default_value = 5; // Значение по умолчанию в полях
    var fields_div = document.getElementById("fields"); // родительский элемент полей
    for (i = 0; i < fields_count; i++) { // создадим поля
        var field = "<li><input type='number' value='" + default_value + "' id='num_" + i + "'></li>";
        fields_div.innerHTML += field; // Добавим поле     
    }
 
 
    function func() {
        var result = 0;
        var x = 0;
        for (i = 0; i < fields_count; i++) { // Переберем все поля
            var num = Number(document.getElementById("num_" + i).value); // Получим значение числа
            var z = fields_count - i;
            result += num * z;
            x += i + 1;
        }
        result = result / x;
        document.getElementById("result").value = result;
    }
</script>
 
 
<style>
    #fields input[type="number"] {
        text-align: center;
        /* Значения в полях по центру */
        width: 200px;
        /* Ширина поля */
        height: 30px;
        /* Высота поля */
    }
 
    #fields li {
        margin-top: 5px;
        list-style-type: decimal;
    }
 
 
</style>
 
</html>

@med-75 · 30.09.2021, 19:11 **[ТС]**

Коллеги, большое спасибо за помощь. Наконец, дошли руки до допиливания окончательного варианта:

http://med-75.narod.ru/40/341.html

Ваши усилия были не напрасны. Надеюсь, они принесут реальную пользу пользователям Яндекс-Такси...

PS: данный проект не является коммерческим, а носит чисто просветительскую функцию.

@CyberGeniuz · 30.09.2021, 19:22

Вы, конечно, молодец. Это похвально, что Вы создаете свой проект и т.д.
Но как Вы считаете, сколько людей будут готовы сидеть и заполнять 150 полей, чтобы узнать средний рейтинг пользователей такси ?) Это ведь в какой-то степени мини-пытка

@med-75 · 30.09.2021, 19:39 **[ТС]**

Сообщение от CyberGeniuz

Но как Вы считаете, сколько людей будут готовы сидеть и заполнять 150 полей, чтобы узнать средний рейтинг пользователей такси ?) Это ведь в какой-то степени мини-пытка

По крайней мере, у большинства водителей Яндекс.Такси с обновлённым приложением сейчас доступен график рейтинга в виде зелёной полоски (= пятёрок) с вкраплениями чёрточек иных цветов (красные - единицы/двойки; жёлтые - тройки/четвёрки), на основе которых можно произвести определённые расчёты по данному калькулятору - достаточно внести лишь несколько изменений.

@Eva Rosalene · 01.10.2021, 00:34

Такое было бы гораздо удобнее заполнять в одном textarea с разделителем в виде пробельных символов...

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@amr-now 6496 / 3907 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	26.09.2021, 14:42
	med-75, а почему такая странная система подсчета рейтинга? Самая первая оценка самая значимая? Обычно же считают среднюю арифметическую. 0

@med-75 0 / 0 / 0 Регистрация: 26.09.2021 Сообщений: 9
	26.09.2021, 20:54 [ТС]
	Огромное спасибо! Вставил, проверил - всё работает. И даже эту хитровыдуманную формулу как-то закодировали!.. Сам до такого точно не додумался бы, ибо... всего лишь любитель... Осталось облагородить результат - чисто стилистически... 0

@med-75 0 / 0 / 0 Регистрация: 26.09.2021 Сообщений: 9
	30.09.2021, 19:11 [ТС]
	Коллеги, большое спасибо за помощь. Наконец, дошли руки до допиливания окончательного варианта: http://med-75.narod.ru/40/341.html Ваши усилия были не напрасны. Надеюсь, они принесут реальную пользу пользователям Яндекс-Такси... PS: данный проект не является коммерческим, а носит чисто просветительскую функцию. 0

@CyberGeniuz 74 / 63 / 24 Регистрация: 13.02.2015 Сообщений: 164
	30.09.2021, 19:22
	Вы, конечно, молодец. Это похвально, что Вы создаете свой проект и т.д. Но как Вы считаете, сколько людей будут готовы сидеть и заполнять 150 полей, чтобы узнать средний рейтинг пользователей такси ?) Это ведь в какой-то степени мини-пытка 1

@Eva Rosalene Модератор 5241 / 2115 / 416 Регистрация: 06.01.2013 Сообщений: 4,846
	01.10.2021, 00:34
	Такое было бы гораздо удобнее заполнять в одном textarea с разделителем в виде пробельных символов... 0