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 验证表单(form)中多选框(checkbox)值
Sep 08 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
coffeescript使用的方式汇总
Aug 05 Javascript
javascript点击按钮实现隐藏显示切换效果
Feb 03 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
js闭包用法实例详解
Dec 13 Javascript
关于webpack代码拆分的解析
Jul 20 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
聊聊Vue.js的template编译的问题
Oct 09 Javascript
Node.js从字符串生成文件流的实现方法
Aug 18 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 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
我常用的几个类
2006/10/09 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
使用PHPMailer实现邮件发送代码分享
2014/10/23 PHP
PHP中的traits简单使用实例
2015/05/13 PHP
ThinkPHP 3.2.2实现事务操作的方法
2017/05/05 PHP
PHP PDOStatement::bindValue讲解
2019/01/30 PHP
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
js 阻止子元素响应父元素的onmouseout事件具体实现
2013/12/23 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
jQuery Chart图表制作组件Highcharts用法详解
2016/06/01 Javascript
基于jQuery的ajax方法封装
2016/07/14 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
vue拖拽排序插件vuedraggable使用方法详解
2020/08/21 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
jQuery子选择器与可见性选择器实例分析
2019/06/28 jQuery
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
[01:44]Ti10举办地公布
2019/08/25 DOTA
Python多线程和队列操作实例
2015/06/21 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
安装ElasticSearch搜索工具并配置Python驱动的方法
2015/12/22 Python
Python读取英文文件并记录每个单词出现次数后降序输出示例
2018/06/28 Python
学习Django知识点分享
2019/09/11 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
12个不为大家熟知的HTML5设计小技巧
2016/06/02 HTML / CSS
口腔医学技术应届生求职信
2013/11/09 职场文书
军训的自我鉴定
2013/12/10 职场文书
企业文明单位申报材料
2014/05/16 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
2014年招商工作总结
2014/11/22 职场文书
2014年社区宣传工作总结
2014/12/02 职场文书
八年级物理教学反思
2016/02/19 职场文书