javascript实现的平方米、亩、公顷单位换算小程序


Posted in Javascript onAugust 11, 2014

javascript实现平方米,亩,公顷单位换算,可以通过url传递参数指定输入框的值为任何中单位的值。

源代码如下:

<!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实现的平方米、亩、公顷单位换算小程序</title>
</head>

<body>

<select onchange="selectChange(this)" id="sel">
<option value="公顷">公顷</option>
<option value="亩">亩</option>
<option value="平方米">平方米</option>
</select>
这个input的值可能是3公顷、3亩、3平方米
<input type="text" value="3" id="input0"/>
<script type="text/javascript">
     var a = parseInt('0'); /////这里改为你动态接受到的值,0代表单位为平方米,1为亩,2为公顷
     var sel = document.getElementById('sel');
     sel.selectedIndex = 2 - a; /////设置单位下拉
     var lastUnit = document.getElementById('sel').value; //记录当前单位
     var input = document.getElementById("input0");
     //10000平米 = 15亩 = 1公顷
     var fRate = {//换算率
       公顷: { 亩: 15, 平方米: 10000 },
       亩: { 平方米: 10000 / 15, 公顷: 1 / 15 },
       平方米: { 亩: 15 / 10000, 公顷: 1 / 10000}
     };
     function selectChange(obj) {//单位改变,执行换算
       var v = parseFloat(input.value);//得到原来的值
       //执行换算,注意fRate的取值,得到上一次的单位节点,再取当前单位的换算率
       var rst = (v * fRate[lastUnit][sel.value]).toFixed(4);//保留4位小数
       input.value = rst;
       lastUnit = sel.value;//更新当前单位变量
     }
</script>

</body>
</html>
Javascript 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
密码强度检测效果实现原理与代码
Jan 04 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 Javascript
JS立即执行函数功能与用法分析
Jan 15 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
Jquery+javascript实现支付网页数字键盘
Dec 21 jQuery
jquery访问ashx文件示例代码
Aug 11 #Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 #Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 #Javascript
网页运行时提示对象不支持abigimage属性或方法
Aug 10 #Javascript
js中直接声明一个对象的方法
Aug 10 #Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 #Javascript
js中window.open打开一个新的页面
Aug 10 #Javascript
You might like
域名查询代码公布
2006/10/09 PHP
PHP中的日期及时间
2006/11/23 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
Node.js中使用socket创建私聊和公聊聊天室
2015/11/19 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
2016/01/26 Javascript
jQuery遍历DOM元素与节点方法详解
2016/04/14 Javascript
JS去掉字符串前后空格、阻止表单提交的实现代码
2017/06/08 Javascript
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
JS如何在不同平台实现多语言方式
2020/07/16 Javascript
对python:threading.Thread类的使用方法详解
2019/01/31 Python
Python匿名函数及应用示例
2019/04/09 Python
python简单验证码识别的实现方法
2019/05/10 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
简单了解python协程的相关知识
2019/08/31 Python
python opencv pytesseract 验证码识别的实现
2020/08/28 Python
python不同版本的_new_不同点总结
2020/12/09 Python
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
上海期货面试题
2014/01/31 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?
2014/07/27 面试题
工业自动化专业毕业生推荐信
2013/11/18 职场文书
毕业生的自我评价
2013/12/30 职场文书
大四学生思想汇报
2014/01/13 职场文书
母婴店促销方案
2014/03/05 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
2014年财务个人工作总结
2014/12/08 职场文书
装修公司管理制度
2015/08/05 职场文书
孩子满月酒答谢词
2015/09/30 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang
解决Pytorch中关于model.eval的问题
2021/05/22 Python
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js