Javascript获取界面数字做比较常见问题 -

wodeguozili

浏览: 64256 次
性别:
来自: 南京

最近访客更多访客>>

gaochunhu

co40222

ken_blok

hzxiaowang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Javascript获取界面数字做比较常见问题

博客分类：

Javascript

开发中经常会遇到通过前台javascript对数字做比较的功能，常见的有，例如页面有两个数字X,Y，获取两个数字的值比较大小，如果X大于Y，do something else do elsething。

常见问题是X为1000，Y为500，比较后程序返回1000<500，非常奇怪，原因就是javascript获取页面的值，如果直接做比较，是按照字符串顺序比较的，5的字符大于1，因此产生了500>1000的怪异现象，正确的做法是将值获取后转换为number后，在做比较。

代码：

<!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>
		<script type="text/javascript">
		    window.onload = function(){
		    	var num1 = document.getElementById("num1").value;		    	
		    	var num2 = document.getElementById("num2").value;

		    	document.getElementById("result1").innerHTML = (num1>num2);
		    	
		    	var num11 = (Number)(num1);
		    	var num21 = (Number)(num2);
		    	document.getElementById("result2").innerHTML = (num11>num21);

		    	var num3 = document.getElementById("num3").innerHTML;		    	
		    	var num4 = document.getElementById("num4").innerHTML;

		    	document.getElementById("result3").innerHTML = (num3>num4);
		    	
		    	
		    	var num31 = (Number)(num3);		    	
		    	var num41 = (Number)(num4);

		    	document.getElementById("result4").innerHTML = (num31>num41);
		    }
			
		</script>
	</head>
	<body>
		<h3>从页面获取数字比较大小</h3>
		
		<p>数字1 &nbsp;<input type="text" id="num1" value="1000"/></p>
		<p>数字2 &nbsp;<input type="text" id="num2" value="500"/><p>
		数字1大于数字2：<font color="red"><label id="result1"></label></font><br/><br/>
		数字1大于数字2(增加number转换)：<font color="red"><label id="result2"></label></font>
		
		<p>数字3 &nbsp;<label id="num3">1000</label></p>
		<p>数字4 &nbsp;<label id="num4">500</label><p>
	             数字3大于数字4：<font color="red"><label id="result3"></label></font><br/><br/>
		数字3大于数字4(增加number转换)：<font color="red"><label id="result4"></label></font>
		
	</body>
</html>

最终效果：