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 相关文章推荐
JavaScript面向对象之静态与非静态类
Feb 03 Javascript
防止页面被iframe(兼容IE,Firefox火狐)
Jul 04 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
javascript输出AscII码扩展集中的字符方法
Dec 26 Javascript
jQuery实现全选、反选和不选功能的方法详解
Dec 04 jQuery
微信小程序修改数组长度的问题的解决
Dec 17 Javascript
Vue获取页面元素的相对位置的方法示例
Feb 05 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 Javascript
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
PHP管理依赖(dependency)关系工具 Composer 安装与使用
2014/08/18 PHP
PHP连接MySQL数据的操作要点
2015/03/20 PHP
ThinkPHP安装和设置
2015/07/27 PHP
php防止用户重复提交表单
2015/11/02 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
PHP两个n位的二进制整数相加问题的解决
2018/08/26 PHP
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
JS跨域解决方案之使用CORS实现跨域
2016/04/14 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JS数组去掉重复数据只保留一条的实现代码
2016/08/11 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
2017/02/13 Javascript
angularjs中$http异步上传Excel文件方法
2018/02/23 Javascript
微信小程序云开发实现增删改查功能
2019/05/17 Javascript
JavaScript React如何修改默认端口号方法详解
2020/07/28 Javascript
python 多线程应用介绍
2012/12/19 Python
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
python使用Matplotlib绘制分段函数
2018/09/25 Python
Python 实现微信防撤回功能
2019/04/29 Python
python命令行工具Click快速掌握
2019/07/04 Python
python logging模块书写日志以及日志分割详解
2019/07/22 Python
Python-numpy实现灰度图像的分块和合并方式
2020/01/09 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
解决pycharm中导入自己写的.py函数出错问题
2020/02/12 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
css3实现书本翻页效果的示例代码
2021/03/08 HTML / CSS
HTML5实现多张图片上传功能
2016/03/11 HTML / CSS
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
html5 div布局与table布局详解
2016/11/16 HTML / CSS
金属材料工程个人求职的自我评价
2013/12/04 职场文书
物流专业大学的自我评价
2014/01/11 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
公司2015年终工作总结
2015/05/26 职场文书
小平小道观后感
2015/06/09 职场文书
高中同学会致辞
2015/08/01 职场文书