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 相关文章推荐
jQuery 学习入门篇附实例代码
Mar 16 Javascript
jQuery实现用方向键控制层的上下左右移动
Jan 13 Javascript
javascript自启动函数的问题探讨
Oct 05 Javascript
js实现select下拉框菜单
Dec 08 Javascript
javascript数组常用方法汇总
Sep 10 Javascript
详解如何将angular-ui的图片轮播组件封装成一个指令
May 09 Javascript
BootStrap表单控件之文本域textarea
May 23 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
详解Angular中实现自定义组件的双向绑定的两种方法
Nov 23 Javascript
vue+iview动态渲染表格详解
Mar 19 Javascript
JS数组索引检测中的数据类型问题详解
Jan 11 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
解析百度搜索结果link?url=参数分析 (全)
2012/10/09 PHP
php中文乱码怎么办如何让浏览器自动识别utf-8
2014/01/15 PHP
php数据库备份还原类分享
2014/03/20 PHP
Thinkphp中volist标签mod控制一定记录的换行BUG解决方法
2014/11/04 PHP
jquery 选项卡效果 新手代码
2011/07/08 Javascript
JS中判断JSON数据是否存在某字段的方法
2014/03/07 Javascript
javascript中不提供sleep功能如何实现这个功能
2014/05/27 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
javascript删除html标签函数cIsHTML
2017/01/09 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
微信小程序使用npm支持踩坑
2018/11/07 Javascript
JS/jQuery实现获取时间的方法及常用类完整示例
2019/03/07 jQuery
javascript获取元素的计算样式
2019/05/24 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
kafka调试中遇到Connection to node -1 could not be established. Broker may not be available.
2019/09/17 Javascript
layui 数据表格复选框实现单选功能的例子
2019/09/19 Javascript
基于JavaScript或jQuery实现网站夜间/高亮模式
2020/05/30 jQuery
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
vue+elementUI 实现内容区域高度自适应的示例
2020/09/26 Javascript
[01:51]2014DOTA2国际邀请赛 这个赛场没有失败者VGTi5再见
2014/07/23 DOTA
python类定义的讲解
2013/11/01 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
python已协程方式处理任务实现过程
2019/12/27 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
在阿尔卑斯山或希腊度过快乐假期:Alpine Elements
2019/12/28 全球购物
关于赌博的检讨书
2014/01/24 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
初中教师个人总结
2015/02/10 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书