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 对象的解释
Nov 24 Javascript
javascript &amp;&amp;和||运算法的另类使用技巧
Nov 28 Javascript
深入理解JavaScript系列(46):代码复用模式(推荐篇)详解
Mar 04 Javascript
js阻止浏览器默认行为触发的通用方法(推荐)
May 15 Javascript
功能强大的Bootstrap效果展示(二)
Aug 03 Javascript
BootStrap实现带关闭按钮功能
Feb 15 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
JavaScript获取URL参数的方法之一
Mar 24 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
webpack dll打包重复问题优化的解决
Oct 10 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 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
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
Discuz 6.0+ 批量注册用户名
2009/09/13 PHP
php中关于codeigniter的xmlrpc的类在进行数据交换时的类型问题
2011/07/03 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
php获取qq用户昵称和在线状态(实例分析)
2013/10/27 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
9个javascript语法高亮插件 推荐
2009/07/18 Javascript
jquery 问答知识整理
2010/02/11 Javascript
JavaScript 布尔操作符解析  &amp;&amp; || !
2012/08/10 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
vuex的简单使用教程
2018/02/02 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
python操作CouchDB的方法
2014/10/08 Python
浅谈scrapy 的基本命令介绍
2017/06/13 Python
Python基于pandas实现json格式转换成dataframe的方法
2018/06/22 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
在python中利用dict转json按输入顺序输出内容方式
2020/02/27 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
日本必酷网络直营店:Biccamera
2019/03/23 全球购物
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
蓝颜请假条
2014/04/11 职场文书
会计人员演讲稿
2014/09/11 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
婚礼答谢礼品
2015/01/20 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
干货:如何写好工作计划!
2019/05/17 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
NGINX 权限控制文件预览和下载的实现原理
2022/01/18 Servers