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 <input type="text" id="num1" value="1000"/></p>
<p>数字2 <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 <label id="num3">1000</label></p>
<p>数字4 <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>最终效果：
相关推荐
nmgxzm00 2020-11-10
ifconfig 2020-10-14
hhanbj 2020-11-17
zfszhangyuan 2020-11-16
古叶峰 2020-11-16
一个智障 2020-11-15
jipengx 2020-11-12
81427005 2020-11-11
xixixi 2020-11-11
游走的豚鼠君 2020-11-10
苗疆三刀的随手记 2020-11-10
Web卓不凡 2020-11-03
小飞侠V 2020-11-02
帕尼尼 2020-10-30
爱读书的旅行者 2020-10-26
帕尼尼 2020-10-23
杏仁技术站 2020-10-23
淼寒儿 2020-10-22