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 Cookie读写删除操作的函数
Mar 02 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解
Mar 12 Javascript
javascript学习笔记之函数定义
Jun 25 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Chrome不支持showModalDialog模态对话框和无法返回returnValue问题的解决方法
Oct 30 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
Apr 08 Javascript
JS实现音量控制拖动
Jan 15 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 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最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
Javascript 面向对象特性
2009/12/28 Javascript
基于socket.io和node.js搭建即时通信系统
2014/07/30 Javascript
使用jQuery.wechat构建微信WEB应用
2014/10/09 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
JavaScript随机生成信用卡卡号的方法
2015/04/07 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
jQuery中serializeArray()与serialize()的区别实例分析
2015/12/09 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
vue,angular,avalon这三种MVVM框架优缺点
2016/04/27 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
JS面试题大坑之隐式类型转换实例代码
2018/10/14 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
vue实现百度下拉列表交互操作示例
2019/03/12 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
javascript的this关键字详解
2019/05/20 Javascript
ZK中使用JS读取客户端txt文件内容问题
2019/11/07 Javascript
jquery实现弹窗(系统提示框)效果
2019/12/10 jQuery
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
2020/04/11 Javascript
RxJS在TypeScript中的简单使用详解
2020/04/13 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python合并多个装饰器小技巧
2015/04/28 Python
Android分包MultiDex策略详解
2017/10/30 Python
python八皇后问题的解决方法
2018/09/27 Python
python中将正则过滤的内容输出写入到文件中的实例
2018/10/21 Python
Python 3.6 中使用pdfminer解析pdf文件的实现
2019/09/25 Python
python 发送json数据操作实例分析
2019/10/15 Python
wxPython色环电阻计算器
2019/11/18 Python
python实现图像拼接
2020/03/05 Python
Django QuerySet查询集原理及代码实例
2020/06/13 Python
物流专业自荐信
2014/05/23 职场文书