Форум

[ANTI]CheateR · #1 (**permalink**) 17.09.2010, 19:46

Всем привет! Ребят, помогите оптимизировать код... написал небольшой скрипт - кредитный калькулятор, правда, не до конца... хочу чтоб вы покритиковали код, подсказали, как изящнее решать проблемы итд итп...

скрипт рабочий, кстати))

буду очень признателен за толковые советы...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Кредитный калькулятор. Разработка</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<link type="text/css" href="../../themes/base/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="../../jquery-1.4.2.js"></script>
	<script type="text/javascript" src="../../ui/jquery-ui-1.8.4.custom.min.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="../../ui/jquery.ui.slider.js"></script>
	<link type="text/css" href="../demos.css" rel="stylesheet" />
	<style>
		dl{
			clear:both
		}
	
		dt{
			float:left;
			width:150px
		}
	
		dd input,dd div{
			float:left
		}
		
		.slider{
			width:300px;
			position:relative;
			left:30px;
			top:6px
		}
		
		.slider span{
			position:absolute
		}
		
		p#max{
			font-size:70px
		}
		
	</style>
	
	<script type="text/javascript">
	
	$(function() {
		
		//Слайдеры - объявление и получение значения в инпут
		
		$("#slider0").slider({
			animate:true,
			min: 8000,
			max: 500000,
			value: 20000,
			slide: function(event, ui) {
				$("#income").val(ui.value);
				income = $("input#income").val() * 6;
				paying = (income * insurance * time/(1 + percent/100)).toFixed(2);
				$("p#max").text(paying);
			}
		});
		$("#income").val($("#slider0").slider("value"));
		
		$("#slider1").slider({
			animate:true,
			min: 1,
			max: 60,
			value: 6,
			slide: function(event, ui) {
				$("#time").val(ui.value);
				time = $("input#time").val();
				if($("input#insurance").is(":checked")){
					if($("input#time").val() <= 12){
						percent = 17;
					} else if($("input#time").val() <= 24) {
						percent = 18;
					} else {
						percent = 19;
					}
				} else {
					if($("input#time").val() <= 12){
						percent = 18;
					} else if($("input#time").val() <= 24) {
						percent = 19;
					} else {
						percent = 20;
					}
				};
				
				paying = (income * insurance * time/(1 + percent/100)).toFixed(2);
				$("p#max").text(paying+" | "+insurance+" | "+percent);
			}
		});
		$("#time").val($("#slider1").slider("value"));
		
		$("#slider2").slider({
			animate:true,
			range: "min",
			min: 30000,
			max: 1000000,
			value: 30000,
			slide: function(event, ui) {
				$("#sum").val(ui.value);
				
			}
		});
		$("#sum").val($("#slider2").slider("value"));
		
		//Определение переменных при загрузке страницы
		insurance = $("input#insurance").is(":checked") ? (0.6) : (0.5);
		income = $("input#income").val() * 6;
		time = $("input#time").val();
		percent = $("input#insurance").is(":checked") ? 17 : 18;
		paying = (income * insurance * time/(1 + percent/100)).toFixed(2);
		$("#sum").val(paying);
		$("#slider2").slider({value: paying});
		$("p#max").text(paying);
		
		//Слайдеры - изменение положения ползунка при наборе цифр в инпуте
		
		$("dd input").not("#time").keyup(function(){
			$(this).next("div").slider({value: $(this).val()});
			income = $("input#income").val() * 6;
			paying = (income * insurance * time/(1 + percent/100)).toFixed(2);
			$("p#max").text(paying);
		});
		
		//Слайдер срок кредитования - изменение процентной ставки на значение инпута
		
		$("dd input#time").keyup(function(){
			$(this).next("div").slider({value: $(this).val()});
			time = $("input#time").val();
			if($("input#insurance").is(":checked")){
				if($(this).val() <= 12){
					percent = 17;
				} else if($(this).val() <= 24) {
					percent = 18;
				} else {
					percent = 19;
				}
			} else {
				if($(this).val() <= 12){
					percent = 18;
				} else if($(this).val() <= 24) {
					percent = 19;
				} else {
					percent = 20;
				}
			};
			paying = (income * insurance * time/(1 + percent/100)).toFixed(2);
			$("p#max").text(paying+" | "+insurance+" | "+percent);
		});
		
		//Наличие страхования
		$("input#insurance").click(function(){
			insurance = $("input#insurance").is(":checked") ? 0.6 : 0.5;
			paying = (income * insurance * time/(1 + percent/100)).toFixed(2);
			$("p#max").text(paying);
		});
		
	});

	</script>
	
</head>
<body>
	<form id="calculator">
		<dl id="row_income">
			<dt>Ежемесячный доход, руб.</dt>
			<dd>
				<input id="income" type="text"> 
				<div id="slider0" class="slider">
					<span style="left:-1px;top:-17px">8 000</span>
					<span style="left:254px;top:-17px">500 000</span>	
				</div>
			</dd>	
		</dl>
		<dl id="row_time">
			<dt>Срок кредитования, мес.</dt>
			<dd>
				<input id="time" type="text"> 
				<div id="slider1" class="slider"></div>
			</dd>	
		</dl>
		<dl id="row_sum">
			<dt>Сумма кредита, руб.</dt>
			<dd>
				<input id="sum" type="text"> 
				<div id="slider2" class="slider"><div class="ui-slider-range ui-slider-range-min ui-widget-header" style="width: 39.6744%; display: block;"></div></div>
			</dd>	
		</dl>
		<dl id="row_insurance">
			<dt>Страхование жизни</dt>
			<dd>
				<input id="insurance" type="checkbox"> 
			</dd>	
		</dl>		
		<br /><br />
		
		
		
		Максимальная сумма кредита: <p id="max"></p>
		
		Ежемесячный платеж <p id="monthly"></p>
		
	</form>
</body>
</html>

B@rmaley.e><e · #2 (**permalink**) 18.09.2010, 08:41

Не используйте глобальные переменные.

Форум

Справочник

Discord чат

Курсы javascript