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学习点滴 call、apply的区别
Oct 22 Javascript
Bootstrap 填充Json数据的实例代码
Jan 11 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
解读ES6中class关键字
Nov 20 Javascript
详解Vue单元测试case写法
May 24 Javascript
通过jquery.cookie.js实现记住用户名、密码登录功能
Jun 20 jQuery
Vue组件创建和传值的方法
Aug 17 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
Feb 26 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
如何区分vue中的v-show 与 v-if
Sep 08 Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php浏览历史记录的方法
2015/03/10 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
php使用pthreads v3多线程实现抓取新浪新闻信息操作示例
2020/02/21 PHP
JavaScript 继承详解 第一篇
2009/08/30 Javascript
JavaScript 对话框和状态栏使用说明
2009/10/25 Javascript
JavaScript的eval JSON object问题
2009/11/15 Javascript
ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
2012/01/13 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
jquery实现图片滚动效果的简单实例
2013/11/23 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
JavaScript中自带的 reduce()方法使用示例详解
2016/08/10 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
JavaScript门面模式详解
2017/10/19 Javascript
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
JavaScript中的&quot;=、==、===&quot;区别讲解
2019/01/22 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
如何在微信小程序中使用骨架屏的步骤
2020/06/12 Javascript
[04:03]DOTA2肉山黑名单梦之声 风暴之灵中文配音鉴赏
2013/07/03 DOTA
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
python fabric实现远程操作和部署示例
2014/03/25 Python
Django admin美化插件suit使用示例
2017/12/12 Python
对python:循环定义多个变量的实例详解
2019/01/20 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
加拿大高尔夫超市:Golf Town
2018/01/12 全球购物
俞敏洪励志演讲稿
2014/04/29 职场文书
新闻编辑求职信
2014/07/13 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
个人工作年终总结
2015/03/09 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle