问题描述
- 单位换算器 老问题大神这里来
-
我吧代码贴楼下了我贴出来的是必须有的 不能更改的 就这点c币了
解决方案
面积数据没有补全，你注意自己不全，要不计算会得到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>
解决方案二：
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>
解决方案三：
是要用js把这些功能实现吗？
解决方案四：
转换为米，平方米等公用单位之后，然后再算，这样逻辑更简单些
时间： 2024-08-03 22:00:02