2 qq 15290009 qq_15290009 于 2016.05.12 13:08 提问

用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个回答

showbo
showbo   Ds   Rxr 2016.05.12 13:40
已采纳
 <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_15290009
qq_15290009 感谢了
一年多之前 回复
qq_15290009
qq_15290009 我的c都给你了
一年多之前 回复
qq_15290009
qq_15290009 我重开一贴吧 http://ask.csdn.net/questions/255875
一年多之前 回复
showbo
showbo 回复热呛: 可以,独立处理的js代码一定要放到jquery框架后面
一年多之前 回复
showbo
showbo 回复热呛: 这种多种计算的结构大概这样。 var ExRates = { 长度: { 英里: { 英里: 1, 化浪: 8, 链: 80 /*....*/} }, 面积: { 平方米: {平方米:1,平方分米:100/*..更多1平方米换算成其他的配置..*/}} //...更多 },然后根据是那种计算通过ExRates得到默认一种的换算,更新下KMExRate变量为你记录的其中一种单位为其他的换算记录。如长度,那么KMExRate=ExRates.长度.英里,面积就是KMExRate=ExRates.面积.平方米,compute修改 ExRate = ExRates[unit]这里和缓存数据 ExRates[unit] = ExRate;这里为ExRate = ExRates['当前计算的类型,如面积,长度'][unit] ExRates['当前计算的类型,如面积,长度'][unit] = ExRate;
一年多之前 回复
qq_15290009
qq_15290009 可以单独拿出来js吧 单独拿出来放在那个1.4.2下面吗
一年多之前 回复
qq_15290009
qq_15290009 额 是我搞错了 对了 这个是长度计算 如果我在增加别的什么的呢 { 英里: {} 面积:{}} 完了 KMExRate = ExRates['英里','面积 '] ; 其他用改变吗 你看我上面的图片 我又更新了一个 是点击那个按钮 出现那个换算 像我刚才说的那样 可以吗
一年多之前 回复
showbo
showbo 回复热呛: 那你代码肯定是搞错了,我贴这个没有问题的。你就只需要将js代码放到你的table标签后面就行了,原来的代码去掉,注意jquery在代码前导入
一年多之前 回复
qq_15290009
qq_15290009 我知道 结构不一样 我都是按照你的粘贴的 重新弄得网页
一年多之前 回复
showbo
showbo 变量名也不一样
一年多之前 回复
showbo
showbo 回复热呛: 用的这个代码,不要用你的那个,看清楚结构,和你的不一样
一年多之前 回复
qq_15290009
qq_15290009 并不好使 计算不出来啊
一年多之前 回复
danielinbiti
danielinbiti   Ds   Rxr 2016.05.12 13: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>
qq_15290009
qq_15290009 额 不要这种布局 就得图片上的那种布局
一年多之前 回复
qq_34096926
qq_34096926   2016.05.12 13: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}};

    });
});

});

caozhy
caozhy 请管理员注意封杀这个胡乱灌水的
一年多之前 回复
qq_15290009
qq_15290009 ????????
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!