console
var r = new Array("5|6|7|8|9|10,260-600", "11|12|1|2|3|4,200-400");
var p = new Array(0.58886875, 0.63886875, 0.88886875);
var d = document.querySelector("#d");
var m = document.querySelector("#m");
m.addEventListener("change", function (e) {
var g = r[0].split(",");
if (g[0].split("|").filter(function (i) {
return i == m.value
}).length == 0) {
g = r[1].split(",")[1].split("-");
} else {
g = r[0].split(",")[1].split("-");
}
document.querySelector("#j").setAttribute("data-g", g);
document.querySelector("#j>tbody").innerHTML = standard(g, p);
});
c.addEventListener("click", function (e) {
var g = document.querySelector("#j").getAttribute("data-g").split(",");
var t = total(g, p, eval(d.value));
document.querySelector("#t").innerText = t;
document.querySelector("#g").innerHTML = tbody(tiered(g, d.value), p);
});
function total(g, p, d) {
var t = 0;
var l = 0;
for (var i = 0; i < g.length; i++) {
if (d > g[i]) {
t += (g[i] - l) * p[i];
} else {
break;
}
l = g[i];
}
if (d > l) {
t += (d - l) * p[i];
}
return t.toFixed(2);
}
function tiered(g, d) {
var a = d.split("+");
var t = new Array();
for (var i = 0; i < a.length; i++) {
t[i] = new Array();
}
var l = 0;
for (var i = 0; i < g.length; i++) {
var c = g[i] - l;
l = g[i];
var f = a.filter(function (n) {
return n > 0;
}).sort(function (b, e) {
return b - e;
});
var s = f.length;
var b = c / s;
for (var j = 0; j < f.length; j++) {
if (b > f[j]) {
c -= f[j];
s--;
b = c / s;
}
}
for (var k = 0; k < a.length; k++) {
if (a[k] == 0) {
continue;
}
if (a[k] < b) {
t[k].push(Number(a[k]));
a[k] = 0;
} else {
t[k].push(b);
a[k] -= b;
}
}
}
for (var i = 0; i < a.length; i++) {
if (a[i] != 0) {
t[i].push(a[i]);
}
}
return t;
}
function tbody(t, p) {
var a = new Array();
for (var i = 0; i < t.length; i++) {
a[i] = new Array();
a[i][0] = 0;
for (var j = 0; j < t[i].length; j++) {
a[i][0] += t[i][j] * p[j];
a[i].push(t[i][j]);
}
}
return a.map(tr => {
var td = tr.map(td => `<td>${td.toFixed(2)}</td>`).join('');
return `<tr>${td}</tr>`
}).join('');
}
function standard(g, p) {
var a = new Array();
for (var i = 0; i < p.length; i++) {
a[i] = new Array();
a[i].push(i + 1);
}
for (var i = 0; i < g.length; i++) {
a[i].push("<" + g[i]);
}
a[i].push(">" + g[i - 1]);
for (var i = 0; i < p.length; i++) {
a[i].push(p[i]);
}
return a.map(tr => {
var td = tr.map(td => `<td>${td}</td>`).join('');
return `<tr>${td}</tr>`
}).join('');
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0" />
<style>
</style>
<title>阶梯价</title>
</head>
<body>
<select id="m">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<input type="text" value="300+50+240" id="d" />
<button id="c">=</button><span id="t"></span>
<table id="j" data-g="200,400">
<thead>
<tr>
<th>阶梯</th>
<th>电量</th>
<th>电价</th>
</tr>
</thead>
<tbody></tbody>
</table>
<hr />
<table id="g"></table>
</body>
</html>