|
|
14.05.2023, 03:55
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
Математика в JS
Есть вот такая верстка
<style>
body {
font-family: monospace;
font-size: .8rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
section{
max-width: 480px;
margin: 0px auto 0px;
}
.total_all {
margin: 40px 0px 40px 0px;
font-size: 2rem;
}
.summa__1 {
margin: 40px 0px 0px 0px;
font-size: 1.2rem;
}
.number_1 {
padding: 0px 0px 0px 20px;
}
.summa__2 {
margin: 40px 0px 0px 0px;
font-size: 1.2rem;
}
.number_2 {
padding: 0px 0px 0px 20px;
}
.summa__3 {
margin: 40px 0px 0px 0px;
font-size: 1.2rem;
}
.number_3 {
padding: 0px 0px 0px 20px;
}
.summa__4 {
margin: 40px 0px 0px 0px;
font-size: 1.2rem;
}
.number_4 {
padding: 0px 0px 0px 20px;
}
</style>
<body>
<section>
<div class="total_all">32 000</div>
<div class="summa__1">
<label class="container">8 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_1">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_1">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_1">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_1">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="summa__2">
<label class="container">8 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_2">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_2">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_2">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_2">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="summa__3">
<label class="container">8 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_3">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_3">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_3">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_3">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="summa__4">
<label class="container">8 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_4">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_4">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_4">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number_4">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</section>
<script>
const num = parseInt(document.querySelector('.total_all').innerHTML.replace(/\s/g, ''));
const summa__1 = parseInt(document.querySelector('.summa__1>.container').innerHTML.replace(/\s/g, ''));
const number_1 = parseInt(document.querySelector('.number_1>.container').innerHTML.replace(/\s/g, ''));
</script>
</body>
|
|
14.05.2023, 04:00
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
То есть у меня цифры из блока должны плюсоваться или минусоваться в зависимости от того в каком состоянии чекбокс, если он выбран то его плюсуют если не выбран то он минусуется
К примеру есть четыре блока по 2 000 в сумме 8 000 если убрать у кого то чекбокс то будет минус 2 000
И есть четыре блока по 8 000 в сумме 32 000 если убрать чекбок у блока где 8 000 то и от 32 000 сминусуется.
|
|
14.05.2023, 11:12
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,118
|
|
|
суммирование выбранного
Сергей Ракипов,
если ещё изменить разметку, то код можно будет сократить.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
</head>
<body>
<style>
body {
font-family: monospace;
font-size: .8rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
section {
max-width: 480px;
margin: 0px auto 0px;
}
.total_all {
margin: 40px 0px 40px 0px;
font-size: 2rem;
}
.summa {
margin: 40px 0px 0px 0px;
font-size: 1.2rem;
}
.number {
padding: 0px 0px 0px 20px;
}
.summa>.container {
margin-left: 20px;
}
.summa>.container input {
margin-left: 15px;
}
</style>
<body>
<section>
<div class="total_all"></div>
<div class="summa">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="summa">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="summa">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</div>
<div class="summa">
<label class="container">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
<div class="number">
<label class="container">2 000
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
</div>
</div>
</section>
<script>
const section = document.querySelector('section');
const total = document.querySelector('.total_all');
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
section.addEventListener('change', function() {
let num = 0;
for (const div of document.querySelectorAll('.summa')) {
const checked = div.querySelector('input:first-child').checked;
let n = [...div.querySelectorAll('.number :checked')].reduce((n, {
previousSibling
}) => n + +previousSibling.data.replace(/\s/g, ''), 0)
for (const el of div.querySelector(':first-child').childNodes)
if (el.nodeType === 3) el.remove()
div.querySelector(':first-child').prepend(digits(n));
if (checked) num += n
}
total.textContent = digits(num);
})
let event = new Event("change");
section.dispatchEvent(event);
</script>
</body>
</body>
</html>
|
|
14.05.2023, 22:29
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
Спасибо! От всего сердце спасибо.
|
Сообщение от рони
|
|
если ещё изменить разметку, то код можно будет сократить.
|
вот это я не понял как понять изменить разметку? |
|
14.05.2023, 23:37
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,118
|
|
|
Сообщение от Сергей Ракипов
|
|
как понять изменить разметку?
|
добавить элементы для показа чисел
<span class="num">2000...8000</span>
|
|
14.05.2023, 23:47
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
А как сделать что бы когда я 8 000 убираю чекбокс что бы и у нижних 2 000 тоже убирались. А то выглядит так что 8 000 убрал а внизу чекбоксы остались
|
|
15.05.2023, 01:16
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,118
|
|
|
Сообщение от Сергей Ракипов
|
|
8 000 убираю чекбокс что бы и у нижних 2 000 тоже убирались
|
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style>
body {
font-family: monospace;
font-size: .8rem;
}
main {
max-width: 720px;
margin: 0 auto;
}
section {
max-width: 480px;
margin: 0px auto 0px;
}
.total_all {
margin: 40px 0px 40px 0px;
font-size: 2rem;
}
.sum label {
display: block;
width: 150px;
text-align: right;
}
.sum {
font-size: 1.2rem;
display: flex;
flex-direction: column;
justify-content: center;
}
.all .num {
color: red;
}
</style>
</head>
<body>
<section>
<div class="total_all"></div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
<div class="sum">
<label class="all">
<span class="num"></span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
<label class="number">
<span class="num">2 000</span>
<input type="checkbox" checked="checked">
</label>
</div>
</section>
<script>
const section = document.querySelector('section');
const total = document.querySelector('.total_all');
const digits = n => n.toString().replace(/\B(?=(\d{3})+(?!\d))/g, " ")
section.addEventListener('change', function({
target
}) {
let input = target.closest('input');
if (input) {
let all = target.closest('.all input');
if (all) target.closest('.sum').querySelectorAll('.number input').forEach(input => (input.checked = all.checked))
else if (target.checked) target.closest('.sum').querySelector('.all input').checked = true;
else target.closest('.sum').querySelector('.all input').checked = target.closest('.sum').querySelector('.number :checked')
}
let num = 0;
for (const div of document.querySelectorAll('.sum')) {
const checked = div.querySelector('.all input').checked;
let n = [...div.querySelectorAll('.number')].reduce((n, label) => {
let input = label.querySelector('input');
let up = +label.querySelector('.num').textContent.replace(/\s/g, '');
return input.checked ? n + up : n
}
, 0)
div.querySelector('.all .num').textContent = digits(n);
if (checked) num += n
}
total.textContent = digits(num);
})
let event = new Event("change");
section.dispatchEvent(event);
</script>
</body>
</html>
|
|
15.05.2023, 02:19
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
Красота!!!
|
|
15.05.2023, 03:22
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
А получается что если мне нужно два section на одной странице оно не будет работать, можно как то сделать что если я два section использую на оной странице они работают не зависимо. можно не section а какой то класс то есть если у них общий класс то это и будут границы работы этого скрипта
|
|
15.05.2023, 03:38
|
|
Профессор
|
|
Регистрация: 01.06.2010
Сообщений: 668
|
|
|
рони,
То есть я могу сделать это, но код просто в два раза увеличится, так как я просто поменяю название переменных и классов.
|
|
|
|
