-
Notifications
You must be signed in to change notification settings - Fork 0
/
tarif.html
151 lines (126 loc) · 6.06 KB
/
tarif.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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Цены</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
max-width: 260px;
}
.question {
margin-bottom: 20px;
}
.result {
font-weight: bold;
margin-top: 15px;
}
</style>
</head>
<body>
<div class="question">
<label>Выберите тариф:</label><br>
<input type="radio" name="tariff" value="850" id="tariff1" data-discount="6" data-discount2="50" checked>
<label for="tariff1">1: 650 мин, 30 Гб, 100 SMS</label><br>
<input type="radio" name="tariff" value="850" id="tariff2" data-discount="12" data-discount2="20">
<label for="tariff2">2: 500 мин, 35 Гб, 100 SMS</label><br>
<input type="radio" name="tariff" value="600" id="tariff3" data-discount="0" data-discount2="0">
<label for="tariff3">3: 0 мин, 1 раз 30 Гб, 0 SMS</label><br>
<input type="radio" name="tariff" value="1150" id="tariff4" data-discount="12" data-discount2="26.08">
<label for="tariff4">4: 1200 мин, 50 Гб, 50 SMS</label><br>
<input type="radio" name="tariff" value="990" id="tariff7" data-discount="0" data-discount2="0">
<label for="tariff7">7: 1200 мин, 50 Гб, 50 SMS</label>
</div>
<div class="question">
<label>Аренда роутера <small>(99 / 150 для 3)</small></label><br>
<input type="radio" name="router" value="99" data-tariff3="150" id="routerYes">
<label for="routerYes">Да</label>
<input type="radio" name="router" value="0" data-tariff3="0" id="routerNo" checked>
<label for="routerNo">Нет</label>
</div>
<div class="question">
<label>Покупка роутера <small>(2200)</small></label><br>
<input type="radio" name="buyRouter" value="2200" id="buyRouterYes">
<label for="buyRouterYes">Да</label>
<input type="radio" name="buyRouter" value="0" id="buyRouterNo" checked>
<label for="buyRouterNo">Нет</label>
</div>
<div class="question">
<label>Приставки:</label>
<input type="radio" name="setTopBox" value="0" data-tariff2="0" id="setTopBoxNo" checked>
<label for="setTopBoxNo">Нет</label><br>
<input type="radio" name="setTopBox" value="99" data-tariff2="0" id="setTopBox1">
<label for="setTopBox1">1 приставка <small>(99 / 0 для 2)</small></label><br>
<input type="radio" name="setTopBox" value="198" data-tariff2="99" id="setTopBox2">
<label for="setTopBox2">2 приставки <small>(198 / 99 для 2)</small></label><br>
<input type="radio" name="setTopBox" value="297" data-tariff2="198" id="setTopBox3">
<label for="setTopBox3">3 приставки <small>(297 / 198 для 2)</small></label><br>
<input type="radio" name="setTopBox" value="396" data-tariff2="297" id="setTopBox4">
<label for="setTopBox4">4 приставки <small>(396 / 297 для 2)</small></label><br>
</div>
<div class='result'>
<hr>
<h3>1 месяц: <span id='OneFinalPrice'>0</span> руб</h3>
<h3>в месяц: <span id='finalPrice'>0</span> руб</h3>
<h3>конец скидки: <span id='totalPrice'>0</span></h3>
<h4>окончание скидки: <span id='discountEndDate'></span></h4>
</div>
<script>
function calculateTotal() {
const tariff = parseFloat(document.querySelector('input[name=tariff]:checked')?.value) || 0;
const router = parseFloat(document.querySelector('input[name=router]:checked')?.value) || 0;
const buyRouter = parseFloat(document.querySelector('input[name=buyRouter]:checked')?.value) || 0;
const setTopBox = parseFloat(document.querySelector('input[name=setTopBox]:checked')?.value) || 0;
const dataTariff3 = parseFloat(document.querySelector('input[name=router]:checked')?.getAttribute('data-tariff3')) || 0;
const dataTariff2 = parseFloat(document.querySelector('input[name=setTopBox]:checked')?.getAttribute('data-tariff2')) || 0;
const selectedTariff = document.querySelector('input[name=tariff]:checked');
if (!selectedTariff) {
document.getElementById('totalPrice').innerText = "нет";
return;
}
const data_discount = parseInt(selectedTariff.getAttribute('data-discount')) || 0;
const data_discount2 = parseFloat(selectedTariff.getAttribute('data-discount2')) || 0;
const discountTarif = tariff * (1 - (data_discount2 / 100));
let OneFinalPrice, totalPrice, finalPrice;
if (selectedTariff.id === 'tariff3') {
OneFinalPrice = discountTarif + dataTariff3 + buyRouter + 150;
totalPrice = tariff + dataTariff3;
finalPrice = discountTarif + dataTariff3;
} else if (selectedTariff.id === 'tariff2') {
OneFinalPrice = discountTarif + router + buyRouter + dataTariff2 + 150;
totalPrice = tariff + router + dataTariff2;
finalPrice = discountTarif + router + dataTariff2;
} else {
OneFinalPrice = discountTarif + router + buyRouter + setTopBox + 150;
totalPrice = tariff + router + setTopBox;
finalPrice = discountTarif + router + setTopBox;
}
document.getElementById('OneFinalPrice').innerText = OneFinalPrice.toFixed(0);
document.getElementById('finalPrice').innerText = finalPrice.toFixed(0);
if (totalPrice === finalPrice) {
document.getElementById('totalPrice').innerText = "нет";
} else {
document.getElementById('totalPrice').innerText = totalPrice.toFixed(0) + " руб";
}
const discountEndDateElement = document.getElementById('discountEndDate');
if (data_discount === 0) {
discountEndDateElement.innerText = "нет"; //
} else {
const discountEndDate = new Date();
discountEndDate.setMonth(discountEndDate.getMonth() + data_discount);
discountEndDateElement.innerText = discountEndDate.toLocaleDateString();
}
}
const radioButtons = document.querySelectorAll('input[type=radio]');
radioButtons.forEach(radio => {
radio.addEventListener('change', calculateTotal);
});
calculateTotal();
</script>
</body>
</html>