用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}};
});
});
});
想一这种形式写出来
<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>
| 英里[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}};
});
});
});
你这种布局不是很好
换了一下
<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>