-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (107 loc) · 6.21 KB
/
index.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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body onload="credit_calculation()">
<center>
<p><h1>Взять ипотеку или продолжать снимать?</h1></p>
<div style="width: 1000px;">
<div style="float: left; width: 650px;" align="left">
<h2>Исходные данные</h2>
<form name="credit_input">
<p>Стоимость недвижимости:<div class="input-symbol" style="margin-top: -10px;"><input type="text" name="credit_amount" maxlength="10" value="6 000 000"><span>руб.</span></div></p>
<div class="slider_track"></div>
<div class="slider_track_progress" id="progress_credit_amount" style="width: 120px;"></div>
<div class="range"><input type="range" name="range_credit_amount" min="0" max="300" value="60" step="1"></div>
<p>Первоначальный взнос:<div class="input-symbol" style="margin-top: -10px;"><input type="text" name="start_payment" maxlength="10" value="2 000 000"><span>руб.</span></div></p>
<div class="slider_track"></div>
<div class="slider_track_progress" id="progress_start_payment" style="width: 40px;"></div>
<div class="range"><input type="range" name="range_start_payment" min="0" max="300" value="20" step="1"></div>
<p>Срок:<div class="input-symbol" style="margin-top: -10px;"><input type="text" name="credit_time" maxlength="3" value="120"><span>мес.</span></div></p>
<div class="slider_track"></div>
<div class="slider_track_progress" id="progress_credit_time" style="width: 120px;"></div>
<div class="range"><input type="range" name="range_credit_time" min="0" max="600" value="120" step="1"></div>
<p>Процентная ставка:<div class="input-symbol" style="margin-top: -10px;"><input type="text" name="credit_percent" maxlength="5" value="14"><span>% </span></div></p>
<div class="slider_track"></div>
<div class="slider_track_progress" id="progress_credit_percent" style="width: 84px;"></div>
<div class="range"><input type="range" name="range_credit_percent" min="0" max="100" value="14" step="0.25"></div>
<p>Текущая арендная плата:<div class="input-symbol" style="margin-top: -10px;"><input type="text" name="current_rent" maxlength="6" value="45 000"><span>руб.</span></div></p>
<div class="slider_track"></div>
<div class="slider_track_progress" id="progress_current_rent" style="width: 273px;"></div>
<div class="range"><input type="range" name="range_current_rent" min="0" max="99" value="45" step="1"></div>
</form>
</div>
<div style="float: left; width: 350px;" align="left">
<div style="float: left; width: 100%;">
<h2>График</h2>
<canvas id="graph_001" width="350" height="300"></canvas>
</div>
<div style="float: left; width: 100%;">
<h2>Расчеты</h2>
<p class="list-item"><span class="item">Сумма кредита: </span><span class="values" id="real_credit_amount"></span></p>
<p class="list-item"><span class="item">Ежемесячный платеж: </span><span class="values" id="mounthly_payment"></span></p>
<p class="list-item"><span class="item">Сумма переплаты: </span><span class="values" id="overdraft"></span></p>
<p class="list-item"><span class="item">Переплата ежемесячно: </span><span class="values" id="overdraft_mounthly"></span></p>
</div>
</div>
</div>
<div style="clear: left;"></div>
<div style="margin-top: 100px; margin-bottom: 100px; width: 1000px;">
<h2><div id="conclusion" class="fadein"></div></h2>
</div>
</center>
<script src="js/Calculations.js"></script>
<script src="js/Validation.js"></script>
<script src="js/Chart.js"></script>
<script src="js/Slider.js"></script>
<script type="application/javascript">
var form = document.forms.credit_input;
var canvas, ctx, global_animation_id = [];
var canvas_width = 350;
var canvas_height = 300;
var y1Old = 0;
var y2Old = 0;
var summ1Old = 0;
var summ2Old = 0;
var list_real_credit_amount = document.getElementById('real_credit_amount');
var list_mounthly_payment = document.getElementById('mounthly_payment');
var list_overdraft = document.getElementById('overdraft');
var list_overdraft_mounthly = document.getElementById('overdraft_mounthly');
var fade_flag = 0;
var animationFrameId;
canvas_init();
// проверка на ввод чисел
form.credit_amount.addEventListener("keypress", input_validate_number);
form.start_payment.addEventListener("keypress", input_validate_number);
form.credit_time.addEventListener("keypress", input_validate_number);
form.credit_percent.addEventListener("keypress", input_validate_number);
form.current_rent.addEventListener("keypress", input_validate_number);
// проверка на вставку через буфер обмена
form.addEventListener("paste", input_validate_paste_number);
// проверка на вставку через буфер обмена
form.addEventListener("drop", input_validate_drop_number);
// форматирование цирф в инпутах
form.addEventListener("blur", input_format, true);
// сбрасываем форматировние в инпутах
form.addEventListener("focus", input_unformat, true);
// пересчет результатов при измении входных данных
form.addEventListener("input", credit_calculation);
// пересчет результатов при измении входных данных для IE
form.addEventListener("change", credit_calculation);
// слайдер
form.range_credit_amount.addEventListener("input", slider);
form.range_start_payment.addEventListener("input", slider);
form.range_credit_time.addEventListener("input", slider);
form.range_credit_percent.addEventListener("input", slider);
form.range_current_rent.addEventListener("input", slider);
// слайдер для IE
form.range_credit_amount.addEventListener("change", slider);
form.range_start_payment.addEventListener("change", slider);
form.range_credit_time.addEventListener("change", slider);
form.range_credit_percent.addEventListener("change", slider);
form.range_current_rent.addEventListener("change", slider);
</script>
</body>
</html>