单位换算器 老问题大神这里来

Question

我吧代码贴楼下了

我贴出来的是必须有的 不能更改的 就这点c币了

Answer 1

面积数据没有补全，你注意自己不全，要不计算会得到NaN，没补全时注意只能点击平方米的计算按钮，其他的都会是NaN，补全了哪种单位的计算都可以了

 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<div class="cols3 column">
    <div class="portlet ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
        <div class="portlet-header">常用计算类</div>
        <div class="portlet-c" id="body4">
            <span id="sp1">*为必填项</span>
            <hr class="hi">
            <div class="com" id="t1">
                <button id="1" onclick="showHide(this)">长度换算</button>
                <div class="yz" id="tex1" style="display: none;margin-bottom:20px;">
                    <span id="sp1">英制：</span>
                    <table cellpadding="0" cellspacing="1">
                        <tr>
                            <td>英里[mi]</td>
                            <td><input type="text" id="a1" class="cc3" /> </td>
                            <td><button type="button" id="jisuan">计算</button></td>

                        </tr>
                        <tr>
                            <td>化浪[fur]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>
                        <tr>
                            <td>链[chain]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>杆[rod]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>
                        <tr>
                            <td>码[yd]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>
                        <tr>
                            <td>英尺[tf]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>英寸[in]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>

                    </table>
                    <hr class="hi" />
                    <span id="sp1">公制：</span>
                    <table>
                        <tr>
                            <td>千米[km]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>米[m]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>
                        <tr>
                            <td>分米[dm]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>厘米[cm]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>
                        <tr>
                            <td>毫米[mm]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>
                        <tr>
                            <td>微米[um]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>纳米[nm]</td>
                            <td><input type="text" class="cc3" /></td>
                            <td><button type="button">计算</button></td>
                        </tr>

                    </table>

                </div>
                <button onclick="showHide(this)">面积换算</button>
                <div class="yz" id="tex2" style="display: none;margin-bottom:20px;">
                    <span id="sp1">英制：</span>
                    <table>
                        <tr>
                            <td>平方英里[mi<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>英亩[ac]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方杆[rd<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方码[yd<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方英尺[mi<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方英寸[mi<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                    </table>

                    <hr class="hi" />
                    <span id="sp1">公制：</span>
                    <table>
                        <tr>
                            <td>平方千米[km<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>公顷[ha]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>公亩[a]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方米[m<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方分米[dm<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方里米[cm<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>
                        <tr>
                            <td>平方毫米[mm<sup>2</sup>]</td>
                            <td><input type="text" class="cc3" /> </td>
                            <td><button type="button">计算</button></td>

                        </tr>

                    </table>

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


</div>
<script>
    //只需要一个showHide就行了，div计算面板紧靠button通过关系获取，搞这么多个showHide浪费代码
    function showHide(btn) {
        var div = $(btn).next()
        $(btn).parent().find('div').not(div).hide();//如果你不想展开对应div隐藏其他已经展开的div去掉这句
        div.toggle();
        key = btn.value || btn.innerHTML;//那种计算
        KMExRate = ExRates[key][ExRates.defaultKey[key]];//////更新此类计算的默认参考值
    }
    var ExRates =
       {
           //这个用来存储默认参考的键值的，因为参考值你可能和这个数据一样，如面积换算如果你是以平方千米来做参考就修改这里的默认键值
           defaultKey: { 长度换算: '英里', 面积换算: '平方米' },
           //=============参考数据=================
           长度换算: {
               英里: {
                   英里: 1, 化浪: 8, 链: 80, 杆: 320, 码: 1760, 英尺: 5280, 英寸: 63360, 千米: 1.609344, 米: 1609.34, 分米: 16093.44, 厘米: 160934.4, 毫米: 1609344, 微米: 1609344000,
                   纳米: 1609344000000, 里: 0.4098151262, 町: 14.7524429427, 丈: 531.14, 间: 885.23, 勺: 5311.37, 市里: 3.2186880012, 市丈: 482.8, 市尺: 4828.03, 市寸: 48280.32,
                   市分: 482803.2, 海里: 0.8689762422, 天文单位: 0.0000000108
               }
           },
           面积换算: {
               平方米: { 平方米: 1, 平方分米: 100, 平方千米: 0.000001,平方里米:10000 }//其他的自己补上，通过1平方米和其他单位的转换率
           }
           //更多的计算类型，注意没添加一种需要给defaultKey里面增加默认的参考计算单位名称
       },
       key,//用来存储那种计算
       KMExRate;//存储此类计算(key)默认参考数据

    //计算按钮事件绑定，注意结构和样式不要变，变了需要修改选择器
    $(function () {
        $('#t1').find('div.yz').find(':button').click(function () { compute(this); })
    });

    function compute(btn) {//注意表格的dom结构不要变，变了也要修改代码，第一列名称，第二列input，第三列button
        btn = $(btn);
        var unit = $(btn).parent().prev().prev().html().replace(/\[[^\]]+\]/, ''),//注意去掉td单元格内容中的[]扩起的英文内容，因为数据键没有包含英文和[]
            value = parseInt(btn.parent().prev().find('input').val()) || 0
            , tunit, ExRate = ExRates[key][unit];

        if (value == 0) { alert('请输入大于0的数字！'); return false }
        if (!ExRate) {//此单位转换率没生成，依据KMExRage生成此单位对应其他单位的转换率
            ExRate = {};
            var rate = KMExRate[unit];
            for (var attr in KMExRate) {
                if (attr == unit) ExRate[attr] = 1;
                else {
                    ExRate[attr] = KMExRate[attr] * 1 / rate;
                }
            }
            ExRates[key][unit] = ExRate;//更新数据节点，这样就不需要每次再计算一次
        }

        var inputs = $(btn).closest('div.yz').find(':text');////
        inputs.each(function () {
            tunit = $(this).parent().prev().html().replace(/\[[^\]]+\]/, '');//目标单位
            this.value = value * ExRate[tunit];
        });
    }
</script>