mdimai666/calc.html

## calc.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa", crossorigin="anonymous"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel="stylesheet", integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN", crossorigin="anonymous">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

    <style>
        .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
            padding: 0 10px;
        }

        table {
            font-size: 8pt;
            width: unset !important;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-8">
                    <h1>Расчет</h1>
                    .
                    <div class="panel panel-primary">
                          <div class="panel-heading">
                                <h3 class="panel-title">Введите значения</h3>
                          </div>
                          <div class="panel-body">
                                <form class="form-inline">
                                        <div class="row">
                                            <div class="col-xs-6 text-right">
                                                Начальная сумма:
                                                <input type="text" name="" id="start" class="form-control form-sm" value="1937.4"><br>
                                                процент:
                                                <input type="text" name="" id="percent" class="form-control form-sm" value="0.15"><br>
                                                дней:
                                                <input type="text" name="" id="days" class="form-control form-sm" value="31"><br>
                                                <p></p>
                                                <a id="calcbtn1" class="btn btn-primary btn-sm">Вычислить</a>
                                            </div>

                                            <div class="col-xs-6 text-right">
                                                    Градусов отклонения ночью:
                                                    <input type="text" name="" id="t_night_wasDiff" class="form-control form-sm" value="4"><br>
                                                    Градусов отклонения днем:
                                                <input type="text" name="" id="t_day_wasDiff" class="form-control form-sm" value="7"><br>
                                            </div>
                                        </div>
                                    </form>
                          </div>
                    </div>


                    <div class="panel panel-info">
                          <div class="panel-heading">
                                <h3 class="panel-title">Результат</h3>
                          </div>
                          <div class="panel-body">
                                <div id="div1"></div>
                          </div>
                    </div>


            </div>
        </div>
    </div>
    <script>

    function math(){
        // var start = 1797.56;
        var start = $('#start').val()*1;
        var percent = $('#percent').val()*1;
        var days = $('#days').val()*1;
        var hours = days * 24;

        var t_day_wasDiff = $('#t_day_wasDiff').val()*1;;
        var t_night_wasDiff = $('#t_night_wasDiff').val()*1;
        var h_day = 19;
        var h_night = 5;

        var a = [{
            sum: start, p: percent*start/100, isNight: true,
        }];
        for(var i = 0; i<hours; i++){
            var e = a[a.length-1];

            var j = i / 24 |0;
            var curH = (i-(j*24));
            var isNight = curH<h_night;
            // console.log(curH);


            var p, sum , currenPercent;

            if(isNight){
                currenPercent = t_night_wasDiff * percent;
            } else {
                currenPercent = t_day_wasDiff * percent;
            }
            p = e.sum*currenPercent/100;
            sum = e.sum-p;


            var el = {
                sum: sum, p: p, isNight: isNight,
            }
            a.push(el);
            // console.log(el);
        }

        var str = '='.repeat(50)+'<br>';

        str+= `Начальная сумма = ${start}  процент= ${percent} дней=${days} часов=${hours} <br>`;

        str+= '='.repeat(50)+'<br>';

        var totalPercetSum = a.slice(1).reduce(function(sum,c){return sum+c.p;},0)


        str+=` <b>Итого сумма процентов = ${totalPercetSum.toFixed(2)} </b><br>`;

        str+= '='.repeat(50)+'<br>';
        str+=`<table class="table">`;
            a.slice(1).map((s,i)=>{str+=`<tr>
                    <td> час:</td>
                    <td>    ${i+1}  </td>
                    <td> сумма: </td>
                    <td>    ${s.sum.toFixed(2)}, </td>
                    <td> сумма процента: </td>
                    <td>    ${s.p.toFixed(2)} </td>
                    <td> ${s.isNight?'Ночь':'День'} </td>
                    </tr>`});
        str+=`</table>`;


        console.log('totalPercetSum=' + totalPercetSum.toFixed(2));

        return str;
    }

    $(function(){
        $('#calcbtn1').click(function(){
            $('#div1').html(math());
        });

    })

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css", rel="stylesheet", integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u", crossorigin="anonymous">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa", crossorigin="anonymous"></script>
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css", rel="stylesheet", integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN", crossorigin="anonymous">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>

	<style>
	.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	padding: 0 10px;
	}

	table {
	font-size: 8pt;
	width: unset !important;
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="row">
	<div class="col-xs-8">
	<h1>Расчет</h1>
	.
	<div class="panel panel-primary">
	<div class="panel-heading">
	<h3 class="panel-title">Введите значения</h3>
	</div>
	<div class="panel-body">
	<form class="form-inline">
	<div class="row">
	<div class="col-xs-6 text-right">
	Начальная сумма:
	<input type="text" name="" id="start" class="form-control form-sm" value="1937.4"><br>
	процент:
	<input type="text" name="" id="percent" class="form-control form-sm" value="0.15"><br>
	дней:
	<input type="text" name="" id="days" class="form-control form-sm" value="31"><br>
	<p></p>
	<a id="calcbtn1" class="btn btn-primary btn-sm">Вычислить</a>
	</div>

	<div class="col-xs-6 text-right">
	Градусов отклонения ночью:
	<input type="text" name="" id="t_night_wasDiff" class="form-control form-sm" value="4"><br>
	Градусов отклонения днем:
	<input type="text" name="" id="t_day_wasDiff" class="form-control form-sm" value="7"><br>
	</div>
	</div>
	</form>
	</div>
	</div>


	<div class="panel panel-info">
	<div class="panel-heading">
	<h3 class="panel-title">Результат</h3>
	</div>
	<div class="panel-body">
	<div id="div1"></div>
	</div>
	</div>


	</div>
	</div>
	</div>
	<script>

	function math(){
	// var start = 1797.56;
	var start = $('#start').val()*1;
	var percent = $('#percent').val()*1;
	var days = $('#days').val()*1;
	var hours = days * 24;

	var t_day_wasDiff = $('#t_day_wasDiff').val()*1;;
	var t_night_wasDiff = $('#t_night_wasDiff').val()*1;
	var h_day = 19;
	var h_night = 5;

	var a = [{
	sum: start, p: percent*start/100, isNight: true,
	}];
	for(var i = 0; i<hours; i++){
	var e = a[a.length-1];

	var j = i / 24 \|0;
	var curH = (i-(j*24));
	var isNight = curH<h_night;
	// console.log(curH);


	var p, sum , currenPercent;

	if(isNight){
	currenPercent = t_night_wasDiff * percent;
	} else {
	currenPercent = t_day_wasDiff * percent;
	}
	p = e.sum*currenPercent/100;
	sum = e.sum-p;


	var el = {
	sum: sum, p: p, isNight: isNight,
	}
	a.push(el);
	// console.log(el);
	}

	var str = '='.repeat(50)+'<br>';

	str+= `Начальная сумма = ${start} процент= ${percent} дней=${days} часов=${hours} <br>`;

	str+= '='.repeat(50)+'<br>';

	var totalPercetSum = a.slice(1).reduce(function(sum,c){return sum+c.p;},0)


	str+=` <b>Итого сумма процентов = ${totalPercetSum.toFixed(2)} </b><br>`;

	str+= '='.repeat(50)+'<br>';
	str+=`<table class="table">`;
	a.slice(1).map((s,i)=>{str+=`<tr>
	<td> час:</td>
	<td> ${i+1} </td>
	<td> сумма: </td>
	<td> ${s.sum.toFixed(2)}, </td>
	<td> сумма процента: </td>
	<td> ${s.p.toFixed(2)} </td>
	<td> ${s.isNight?'Ночь':'День'} </td>
	</tr>`});
	str+=`</table>`;




	console.log('totalPercetSum=' + totalPercetSum.toFixed(2));

	return str;
	}

	$(function(){
	$('#calcbtn1').click(function(){
	$('#div1').html(math());
	});

	})

	</script>
	</body>
	</html>