2 qq 15290009 qq_15290009 于 2016.05.12 15:31 提问

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

我吧代码贴楼下了

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

4个回答

showbo
showbo   Ds   Rxr 2016.05.12 16:07
已采纳

面积数据没有补全,你注意自己不全,要不计算会得到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>
qq_15290009
qq_15290009 ????
一年多之前 回复
qq_15290009
qq_15290009 如果有括号怎么弄 比如说美固(美固)
一年多之前 回复
qq_15290009
qq_15290009 对了 还有就是 在添加一个体积 换算 是不是 defaultKey: { 长度换算: '英里', 面积换算: '平方米' }, 这里 添加上就可以了
一年多之前 回复
qq_15290009
qq_15290009 对了哥 如果是时区的换算呢 别如说 标准时间 utc 本地时间就是 utc+8 这怎么换算啊
一年多之前 回复
qq_15290009
qq_15290009 获取不到 因为这个页面里 有俩段代码 一个是时间的那个计算 我把那个计算 放在了下面就好使了 应该是结构变了
一年多之前 回复
showbo
showbo 回复无聊码农: html结构就是你这个,没有变。你不要改变是真的,改变了要改代码
一年多之前 回复
showbo
showbo 回复热呛: f12看浏览器报什么错误
一年多之前 回复
qq_15290009
qq_15290009 哥 showHide(btn) 这个是必须要的 我看写页面的那个写了44个 不光着一个页面再用 很多都在用 所以哥 你能保留我发的代码 写一个吗
一年多之前 回复
qq_15290009
qq_15290009 卧槽的 愁死我了 就是不好使 单独拿出来就好使
一年多之前 回复
qq_15290009
qq_15290009   2016.05.12 15:32

js

 function showHide1(){
                                                                                                            var t=document.getElementById("tex1");

                                                                                                            if(t.style.display==""||t.style.display=="block"){
                                                                                                                t.style.display="none";}
                                                                                                            else{
                                                                                                                t.style.display="block";
                                                                                                                }
                                                                                                            }
function showHide2(){
                                                                                                            var t=document.getElementById("tex2");

                                                                                                            if(t.style.display==""||t.style.display=="block"){
                                                                                                                t.style.display="none";}
                                                                                                            else{
                                                                                                                t.style.display="block";
                                                                                                                }
                                                                                                            }

html

  <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="showHide1()" >长度换算</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="showHide2()" >面积换算</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>
Lov_NinGx
Lov_NinGx   2016.05.12 16:03

是要用js把这些功能实现吗?

qq_15290009
qq_15290009 是啊
一年多之前 回复
Lov_NinGx
Lov_NinGx   2016.05.12 16:54

转换为米,平方米等公用单位之后,然后再算,这样逻辑更简单些

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!