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 相关文章推荐
niceTitle 基于jquery的超链接提示插件
May 31 Javascript
基于jQuery的倒计时实现代码
May 30 Javascript
判断是否安装flash player及当前版本的JS代码
Aug 08 Javascript
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
javascript闭包的理解
Apr 01 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
利用JS提交表单的几种方法和验证(必看篇)
Sep 17 Javascript
Javascript获取background属性中url的值
Oct 17 Javascript
javascript中递归的两种写法
Jan 17 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
基于$.ajax()方法从服务器获取json数据的几种方式总结
Jan 31 Javascript
基于vue-cli搭建多模块且各模块独立打包的项目
Jun 12 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代码
2013/12/03 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
php使用正则过滤js脚本代码实例
2014/05/10 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
js 实现无干扰阴影效果 简单好用(附文件下载)
2009/12/27 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
js语法学习之判断一个对象是否为数组
2014/05/13 Javascript
如何判断微信内置浏览器(通过User Agent实现)
2014/09/01 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
jQuery实现每隔几条元素增加1条线的方法
2016/06/27 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
详解用webpack2搭建angular2的项目
2017/06/22 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
2017/09/19 Javascript
js canvas实现二维码和图片合成的海报
2020/11/19 Javascript
node错误处理与日志记录的实现
2018/12/24 Javascript
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
详解Python的Flask框架中生成SECRET_KEY密钥的方法
2016/06/07 Python
使用Python &amp; Flask 实现RESTful Web API的实例
2017/09/19 Python
Python使用matplotlib的pie函数绘制饼状图功能示例
2018/01/08 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
python爬取微信公众号文章的方法
2019/02/26 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
python3实现弹弹球小游戏
2019/11/25 Python
Python中如何添加自定义模块
2020/06/09 Python
CSS3 @media的基本用法总结
2019/09/10 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
函授本科毕业自我鉴定
2013/10/09 职场文书
新闻学专业求职信
2014/07/28 职场文书
离婚财产分割协议书
2015/08/11 职场文书
面试必问:圣杯布局和双飞翼布局的区别
2021/05/13 HTML / CSS
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电