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 相关文章推荐
js的参数有长度限制吗?发现不能超过2083个字符
Apr 20 Javascript
jquery中使用循环下拉菜单示例代码
Sep 24 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
May 12 Javascript
JS 根据子网掩码,网关计算出所有IP地址范围示例
Apr 23 Javascript
详解js树形控件—zTree使用总结
Dec 28 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
Angular2实现的秒表及改良版示例
May 10 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
使用uni-app开发微信小程序的实现
Dec 13 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 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 短链接算法收集与分析
2011/12/30 PHP
PHP魔术引号所带来的安全问题分析
2014/07/15 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
prototype 1.5相关知识及他人笔记
2006/12/16 Javascript
又一个图片自动缩小的JS代码
2007/03/10 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
js取两个数组的交集|差集|并集|补集|去重示例代码
2013/08/07 Javascript
JavaScript prototype 使用介绍
2013/08/29 Javascript
不同编码的页面表单数据乱码问题解决方法
2015/02/15 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
微信小程序 Tab页切换更新数据
2017/01/05 Javascript
微信小程序 小程序制作及动画(animation样式)详解
2017/01/06 Javascript
Vue.js实现一个SPA登录页面的过程【推荐】
2017/04/29 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
Angular.js中window.onload(),$(document).ready()的写法浅析
2017/09/28 Javascript
vue中子组件调用兄弟组件方法
2018/07/06 Javascript
利用angular自动编译andriod APK的绕坑经历分享
2019/03/08 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
关于在LayUI中使用AJAX提交巨坑记录
2019/10/25 Javascript
微信小程序仿抖音短视频切换效果的实例代码
2020/06/24 Javascript
Python不规范的日期字符串处理类
2014/06/10 Python
简单的抓取淘宝图片的Python爬虫
2014/12/25 Python
Python中最常用的操作列表的几种方法归纳
2015/04/24 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
python实现决策树
2017/12/21 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
django主动抛出403异常的方法详解
2019/01/04 Python
python实现共轭梯度法
2019/07/03 Python
python不到50行代码完成了多张excel合并的实现示例
2020/05/28 Python
网页美工求职信
2014/02/15 职场文书
主持词开场白
2014/03/17 职场文书
物业管理工作方案
2014/05/10 职场文书
校园活动策划方案
2014/06/13 职场文书