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 相关文章推荐
Div Select挡住的解决办法
Aug 07 Javascript
javscript对象原型的一些看法
Sep 19 Javascript
jquery制作 随机弹跳的小球特效
Feb 01 Javascript
JavaScript对数字的判断与处理实例分析
Feb 02 Javascript
jquery 动态增加删除行的简单实例(推荐)
Oct 12 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
Dec 09 Javascript
vue-cli+webpack项目 修改项目名称的方法
Feb 28 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
jquery实现二级导航下拉菜单效果实例
May 14 jQuery
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
.htaccess文件保护实例讲解
2011/02/06 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
Json_encode防止汉字转义成unicode的方法
2016/02/25 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
利用javascript/jquery对上传文件格式过滤的方法
2009/07/25 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
php跨域调用json的例子
2013/11/13 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
JavaScript中的值类型转换介绍
2014/12/31 Javascript
Nodejs的express使用教程
2015/11/23 NodeJs
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
如何用JavaScript实现动态修改CSS样式表
2016/05/20 Javascript
自己封装的一个简单的倒计时功能实例
2016/11/23 Javascript
TensorFlow.js 微信小程序插件开始支持模型缓存的方法
2020/02/21 Javascript
vue跳转页面的几种方法(推荐)
2020/03/26 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
Django如何实现内容缓存示例详解
2017/09/24 Python
django定期执行任务(实例讲解)
2017/11/03 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
如何配置关联Python 解释器 Anaconda的教程(图解)
2020/04/30 Python
九年级历史教学反思
2014/01/27 职场文书
幼儿教师国培感言
2014/02/19 职场文书
协议书怎么写
2014/04/21 职场文书
合作协议书
2014/04/23 职场文书
革命英雄事迹演讲稿
2014/09/13 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
撤诉申请怎么写
2015/05/19 职场文书
python tkinter模块的简单使用
2021/04/07 Python
如何用JS实现网页瀑布流布局
2021/04/24 Javascript
将图片保存到mysql数据库并展示在前端页面的实现代码
2021/05/02 MySQL