热呛
2016-05-12 05:08
采纳率: 100%
浏览 1.8k
已采纳

用jquery写出单位换算器

图片说明

问题如题 该怎么写呢

html

  <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>

js

 $(document).ready(function() {
    $("#a1").change(function() {
        $("#jisuan").click(function(){
            var rate = {英里:{英里: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}};


        });
    });
});

想一这种形式写出来

图片说明

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • 已采纳
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <table cellpadding="0" cellspacing="1" id="tb">
        <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>
    <script>
        var ExRates =
            {
                英里: {
                    英里: 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
                }
            }, KMExRate = ExRates['英里'];
    
        $('#tb').find(':button').click(function () { compute(this)});
        function compute(btn) {
            btn = $(btn);
            var unit = $(btn).parent().prev().prev().html().replace(/\[[^\]]+\]/, ''), value = parseInt(btn.parent().prev().find('input').val()) || 0
                , tunit, ExRate = ExRates[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[unit] = ExRate;
            }
    
            var inputs = $(btn).closest('table').find(':text');
            inputs.each(function () {
                tunit = $(this).parent().prev().html().replace(/\[[^\]]+\]/, '');//目标单位
                this.value = value * ExRate[tunit];
            });
        }
    </script>
    
    点赞 打赏 评论
  • qq_34096926 2016-05-12 05:29
    英里[mi] 计算
    化浪[fur] 计算
    链[chain] 计算
    杆[rod] 计算
    码[yd] 计算
    英尺[tf] 计算
    英寸[in] 计算

    js
    $(document).ready(function() {
    $("#a1").change(function() {
    $("#jisuan").click(function(){
    var rate = {英里:{英里: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}};

        });
    });
    

    });

    点赞 打赏 评论
  • danielinbiti 2016-05-12 05:53
     你这种布局不是很好
     换了一下
     <script>
    var rate = {英里: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};
    $(document).ready(function(){
       initdpselect();
       inittodpselect();
    });
    function initdpselect(){
       initDP('dpselect');
       $('#dpselect').prepend("<option value='-1'>无</option>"); 
    }
    function inittodpselect(){
       initDP('todpselect');
       $('#todpselect').prepend("<option value='-1'>全部</option>"); 
    }
    function initDP(selectid){
       $('#'+selectid).empty();
       for(var key in rate){      
           $('#'+selectid).append("<option value='"+rate[key]+"'>"+key+"</option>"); 
       }
    }
    function change(){
       if(!$('#num').val()){
          alert('输入要转换的值');
          return;
       }
       if($('#dpselect').val()==-1){
          alert('没有选择单位');
          return;
       }
       var dp = $("#dpselect").find("option:selected").text();
       var dpnum = $('#dpselect').val();
       calToResult(dp,$('#num').val(),dpnum);
    }
    function calToResult(dp,realnum,dpnum){
       var num = rate[dp];
       var obj={};
       var selVal = $('#todpselect').val();
       var selText = $("#todpselect").find("option:selected").text();
       if(selVal ==-1){//全部
          for(var key in rate){    
             obj[key]=Number(realnum)/Number(dpnum)*Number(rate[1]);
          }
       }else{     
          obj[selText] = Number(realnum)/Number(dpnum)*Number(selVal);
       }
       showResult(obj);
    }
    function showResult(obj){
       var html = '';
       for(var key in obj){
         html = html + key+":    " + obj[key] + "</br>";
       }
       $('#showresult').html(html);
    }
    </script>
    </head>
    <body>
    <input type='text' id='num' placeHolder="请输入数值">
    <select id='dpselect'>
    </select>
    <input type='button' value='转换' onclick='change()'>
    <select id='todpselect'>
    </select>
    <div id='showresult'></div>
    </body>
    
    点赞 打赏 评论

相关推荐 更多相似问题