如何使用JQ或者JS如何计算超公里数

Question

提问，现在我想计算一个超公里数价格的插件，比如我设定超过10公里之后， 每超出1公里
就为超出公里数，那我如何自动计算出这个超出的一公里呢
下面例子
总路程15公里，现超出5公里
总路程8公里 (这是没超出公里数的情况)
总路程500米 (这是没超出公里数的情况)

这个问题写了几天 都没好方法实现 ，请问这个应该怎么实现

Answer 1

<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.7.1/jquery.min.js"></script>
<div id="g1">max=10公里<br />
    <input type="text" class="dist" value="15公里" /><br />
    <input type="text" class="dist" value="8公里" /><br />
    <input type="text" class="dist" value="500米" /><br />
</div>
<div id="g2">max=800米<br />
    <input type="text" class="dist" value="15公里" /><br />
    <input type="text" class="dist" value="2000米" /><br />
    <input type="text" class="dist" value="500米" /><br />
</div>
<script>
    $.fn.getDist = function (max) {
        var km,re=/^(\d+)(公里|米)$/;
        if (!(km = re.exec(max))) { alert('max参数错误，格式为为“10公里或者10000米”'); throw 'max参数错误，格式为为“10公里或者10000米”' }
        if (km[2] == '米') km = parseFloat(km[1] / 1000);//传入的为米转为公里单位
        else km = parseFloat(km[1]);
        function getExceed() {
            var m = re.exec(this.value);
            if (m) {//符合“数字公里/米”格式执行计算
                if (m[2] == '米') m = parseFloat(m[1] / 1000);//传入的为米转为公里单位
                else m = parseFloat(m[1]);console.log(m,km)
                var span = $(this).next('span');
                if (span.length == 0) $(this).after(span = $('<span></span>'));
                span.html(m > km ? '<span>现超出' + (m - km) + '公里</span>' : '');
            }
        }
        return this.each(getExceed).change(getExceed);
    }
    $('#g1 input.dist').getDist('10公里');
    $('#g2 input.dist').getDist('800米');
</script>