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

来源：互联网发布：网页加密软件编辑：程序博客网时间：2024/06/07 11:01

开发中经常会遇到通过前台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>

最终效果：

NumberCompare.rar (773 Bytes)
下载次数: 0

查看图片附件

阅读全文

0 0