SOURCE

console 命令行工具 X clear

                    
>
console
/** plem.cn */
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>