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 相关文章推荐
extJs 下拉框联动实现代码
Apr 09 Javascript
Js组件的一些写法
Sep 10 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
10个基于Jquery的幻灯片插件教程
Oct 29 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
Jan 03 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
关于javascript的一些知识以及循环详解
Sep 12 Javascript
js实现把图片的绝对路径转为base64字符串、blob对象再上传
Dec 29 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
vue-i18n实现中英文切换的方法
Jul 06 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
初品cakephp 入门基础
2012/02/16 PHP
php实现的短网址算法分享
2014/06/20 PHP
HR vs ForZe BO3 第二场 2.13
2021/03/10 DOTA
JavaScript中的Window窗口对象
2008/01/16 Javascript
Extjs4中的分页应用结合前后台
2013/12/13 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
Struts2+jquery.form.js实现图片与文件上传的方法
2016/05/05 Javascript
浅谈JavaScript对象与继承
2016/07/10 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
jquery Banner轮播选项卡
2016/12/26 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
仿京东快报向上滚动的实例
2017/12/13 Javascript
node.js中路由,中间件,ge请求和post请求的参数详解
2017/12/26 Javascript
原生javascript实现连连看游戏
2019/01/03 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
Vue项目中ESlint规范示例代码
2019/07/04 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
[01:03:33]Alliance vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
Python基于Socket实现简单聊天室
2020/02/17 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
网购亚洲时装、美容产品和生活百货:YesStyle
2016/09/15 全球购物
户外用品商店创业计划书
2014/01/29 职场文书
一年级数学教学反思
2014/02/01 职场文书
财产公证书
2014/04/10 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
3分钟演讲稿
2014/04/30 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
vue实现Toast组件轻提示
2022/04/10 Vue.js
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python
分享很少见很有用的SQL功能CORRESPONDING
2022/08/05 MySQL