<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript實(shí)現(xiàn)的平方米、畝、公頃單位換算小程序</title>
</head>

<body>

<select onchange="selectChange(this)" id="sel">
<option value="公頃">公頃</option>
<option value="畝">畝</option>
<option value="平方米">平方米</option>
</select>
這個(gè)input的值可能是3公頃、3畝、3平方米
<input type="text" value="3" id="input0"/>
<script type="text/javascript">
     var a = parseInt('0'); /////這里改為你動(dòng)態(tài)接受到的值，0代表單位為平方米，1為畝，2為公頃
     var sel = document.getElementById('sel');
     sel.selectedIndex = 2 - a; /////設(shè)置單位下拉
     var lastUnit = document.getElementById('sel').value; //記錄當(dāng)前單位
     var input = document.getElementById("input0");
     //10000平米 = 15畝 = 1公頃
     var fRate = {//換算率
       公頃: { 畝: 15, 平方米: 10000 },
       畝: { 平方米: 10000 / 15, 公頃: 1 / 15 },
       平方米: { 畝: 15 / 10000, 公頃: 1 / 10000}
     };
     function selectChange(obj) {//單位改變，執(zhí)行換算
       var v = parseFloat(input.value);//得到原來的值
       //執(zhí)行換算，注意fRate的取值，得到上一次的單位節(jié)點(diǎn)，再取當(dāng)前單位的換算率
       var rst = (v * fRate[lastUnit][sel.value]).toFixed(4);//保留4位小數(shù)
       input.value = rst;
       lastUnit = sel.value;//更新當(dāng)前單位變量
     }
</script>

</body>
</html>

您可能感興趣的文章:

相關(guān)文章

JS模板實(shí)現(xiàn)方法
我們?cè)谑褂肑S渲染DOM時(shí)，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動(dòng)態(tài)易變的，那需要在函數(shù)中寫大量邏輯。如果在控件實(shí)現(xiàn)過程中，這帶來的問題更為嚴(yán)重。
2013-04-04
35個(gè)JS中實(shí)用工具函數(shù)的代碼分享
身為后臺(tái)開發(fā)的各位鐵鐵，實(shí)際開發(fā)不管是公司要求或是自身發(fā)展，學(xué)前端已經(jīng)是我們內(nèi)卷路上必定碰到的，那今天小編就給大家總結(jié)下那些我們工作中可能遇到的一些實(shí)用Js函數(shù)
2022-06-06
JavaScript中關(guān)鍵字?var、let、const的區(qū)別詳解
在JavaScript中,var、let和const是用于聲明變量的關(guān)鍵字,它們之間存在一些區(qū)別,這篇文章就給大家詳細(xì)介紹一下它們之間的區(qū)別,文章通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
DOM 腳本編程中的兄弟節(jié)點(diǎn)
兄弟節(jié)點(diǎn)之間可以通過 previousSibling 和 nextSibling 屬性訪問同一級(jí)別上的不同子節(jié)點(diǎn)。這個(gè)兄弟節(jié)點(diǎn)是元素還是文本節(jié)點(diǎn)在現(xiàn)代瀏覽器上運(yùn)行是怎么樣的呢？
2009-10-10
Javascript操作表單實(shí)例講解（下）
這篇文章主要介紹了Javascript操作表單實(shí)例講解（下）的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06
TS?中?never,void,unknown類型詳解
這篇文章主要介紹了TS?中?never,void,unknown類型詳解,never?類型是 TypeScript 中的底層類型，unknown是TypeScript中比較特殊的一種類型，它用于描述類型不確定的變量，本文給大家介紹的非常詳細(xì)，需要的朋友可以參考下
2023-05-05
typescript在node.js下使用別名(paths)無效的問題詳解
這篇文章主要給大家介紹了關(guān)于typescript在node.js下使用別名(paths)無效問題的相關(guān)資料,文中通過圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2022-07-07
獲取dom元素那些討厭的位置封裝代碼
你還在為offset,scroll,inner,client,screen,mouse發(fā)愁嗎? 頭都大了。而且各個(gè)瀏覽器方法還不太一樣。所以往往很浪費(fèi)我們的時(shí)間。于是我產(chǎn)生了寫一個(gè)方法用戶專門獲取這樣的數(shù)據(jù)。
2010-06-06
不唐突的JavaScript的七條準(zhǔn)則整理收集
在開始設(shè)計(jì)你的腳本之前，要考慮的第一件事情就是檢查一下你要為其編寫腳本的HTML代碼，看看有什么東西可以幫助你達(dá)到目的。
2008-10-10
javascript刪除Table中的一行的腳本代碼
用js實(shí)現(xiàn)的刪除table中一行數(shù)據(jù)的代碼
2008-06-06