快捷導(dǎo)航

javascript實(shí)現(xiàn)的平方米、畝、公頃單位換算小程序

更新時(shí)間：2014年08月11日 10:19:05 投稿：junjie

這篇文章主要介紹了javascript實(shí)現(xiàn)的平方米、畝、公頃單位換算小程序,此代碼通過URL傳參的方式使用,也可以根據(jù)自己的需求做些改動(dòng),需要的朋友可以參考下

javascript實(shí)現(xiàn)平方米，畝，公頃單位換算，可以通過url傳遞參數(shù)指定輸入框的值為任何中單位的值。

源代碼如下:

<!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)文章

ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程
這篇文章主要介紹了ElementUI 的 Tree 組件的基本使用實(shí)戰(zhàn)教程,本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-12-12
js實(shí)例入門(簡單展開或關(guān)閉)
簡直的展開或關(guān)閉
2008-11-11
JS樹形結(jié)構(gòu)根據(jù)id獲取父級(jí)節(jié)點(diǎn)元素的示例代碼
這篇文章主要介紹了JS樹形結(jié)構(gòu)根據(jù)id獲取父級(jí)節(jié)點(diǎn)元素,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
JavaScript父子窗體間的調(diào)用方法
這篇文章主要介紹了JavaScript父子窗體間的調(diào)用方法,涉及javascript調(diào)用窗體的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-03-03
微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-07-07
關(guān)于javascript document.createDocumentFragment()
documentFragment 是一個(gè)無父對(duì)象的document對(duì)象.
2009-04-04
js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)跟隨運(yùn)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-09-09
用原生JS實(shí)現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實(shí)例
這篇文章主要介紹了用原生JS實(shí)現(xiàn)愛奇藝首頁導(dǎo)航欄代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
微信小程序組件生命周期的踩坑記錄
這篇文章主要給大家介紹了關(guān)于微信小程序組件生命周期的踩坑記錄，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
Validform表單驗(yàn)證總結(jié)篇
這篇文章主要介紹了Validform表單驗(yàn)證，包括通用表單驗(yàn)證方法的知識(shí)，本文給大家介紹的非常詳細(xì)具有參考借鑒價(jià)值,需要的朋友可以參考下
2016-10-10