`

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>

 

 

 

最终效果:



 

 

 

  • 大小: 11.6 KB
分享到:
评论

相关推荐

    javascript 日期数字文本格式化

    在JavaScript中,日期和数字的文本格式化是一个常见的需求,特别是在构建用户界面或者处理数据时。这个主题主要涉及如何将日期对象转换为易读的字符串,以及如何对数字进行格式化,使其符合特定的显示标准。这篇博文...

    javascript经典特效---数字翻译成英语.rar

    在JavaScript编程领域,数字翻译成英语是一种常见的需求,特别是在创建用户友好的交互界面时,将数字转换为英文单词可以提高用户体验。本项目“javascript经典特效---数字翻译成英语.rar”显然是一个专注于实现这一...

    数字时钟 0-9数字图片收藏 javascript实现的时钟图片

    在IT领域,数字时钟是一种常见的用户界面元素,它能够以数字形式显示当前时间。本文将深入探讨如何使用JavaScript来实现一个数字时钟,并重点介绍0-9数字图片的运用,以及如何通过编程技巧将这些图片与时间显示相...

    JavaScript猜数字游戏

    JavaScript猜数字游戏是一种常见的编程练习,它可以帮助初学者熟悉JavaScript语言的基本语法和逻辑控制。在这个游戏中,计算机随机生成一个特定范围内的整数,玩家需要通过输入猜测这个数字,然后程序会给出提示,如...

    JavaScript,HTML制作简易图形化界面计算器

    - **DOM操作**:使用JavaScript访问和修改DOM(文档对象模型)元素,如获取用户在显示屏上的输入,或者更新显示屏的值。 - **数据转换**:确保输入的数据是数值类型,以便进行有效的数学运算。这可能包括清理非...

    jquery天气预报UI仿HTC手机界面数字时间表.rar

    《jQuery实现天气预报UI仿HTC手机界面数字时间表详解》 在当今互联网技术日新月异的时代,用户界面的设计与交互体验成为了吸引用户的重要因素。本教程将深入解析如何利用jQuery技术,仿制HTC手机界面上的天气预报UI...

    JavaScript技术讲座

    第七讲,窗口及输入输出,主要涉及浏览器提供的全局对象window,它是所有全局变量和函数的容器,还包括用户界面交互,如弹出对话框、获取用户输入等。 JavaScript的出现,不仅弥补了HTML的静态特性,还通过CGI的...

    JavaScript计算器

    JavaScript计算器是一种常见的编程练习,它涉及HTML、CSS和JavaScript三个主要技术栈,是初学者学习网页动态交互功能的绝佳案例。下面将详细讲解这个项目中所包含的关键知识点。 首先,HTML(HyperText Markup ...

    JavaScript 脚本程序设计

    JavaScript的学习通常从基础语法开始,包括变量声明、数据类型(如字符串、数字、布尔值、对象和null)、操作符(算术、比较和逻辑操作符)以及流程控制语句(如条件语句if...else和循环结构for、while)。...

    javaScript文档

    JavaScript 支持多种数据类型,包括但不限于数字、字符串、布尔值、数组、对象等。理解每种数据类型的特性和用法对于编写有效的代码至关重要。 **6.2 流程控制** 流程控制是指根据不同的条件分支或循环执行代码块...

    超实用的JavaScript代码段.pdf

    首先,JavaScript的基础知识包括变量声明(var、let、const)、数据类型(字符串、数字、布尔、null、undefined、对象、数组、symbol、bigint)、操作符(算术、比较、逻辑、赋值、三元运算符)、流程控制(条件语句...

    21天精通JavaScript PPT

    1. **JavaScript基础**:学习JavaScript首先要了解其基本语法,包括变量、数据类型(如字符串、数字、布尔值、null、undefined等)、运算符(算术、比较、逻辑、赋值等)、控制流程(条件语句if/else、循环for、...

    JavaScript中文转拼音

    在JavaScript编程语言中,实现中文转拼音的功能是一个常见的需求,特别是在前端开发中,例如创建一个网页工具,允许用户输入中文并获取对应的拼音。这个过程涉及到字符编码、Unicode和中文字符到拼音的映射。以下是...

    ios-一个扩展简单搞定Native 调用 webView JavaScript.zip

    在iOS开发中,集成网页内容和原生应用交互是一个常见的需求。`UIWebView`是苹果提供的一个组件,用于展示和加载HTML内容。然而,仅使用`UIWebView`的基础功能,我们只能实现简单的网页加载,而不能很好地进行...

    JavaScript自学教材

    1. **基础语法**:JavaScript的基础语法包括变量(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、对象、数组)、运算符(算术、比较、逻辑、赋值、三元)、流程控制(条件语句if...else、...

    JavaScript+网页特效

    在网页特效方面,JavaScript可以实现以下几种常见的效果: 1. 图片轮播:通过JavaScript,我们可以创建一个自动切换的图片展示,用户可以通过按钮或滑动来浏览图片。 2. 滚动条特效:例如,页面滚动到指定位置时,...

    javaScript使用详解.pdf

    常见的数据类型有字符串(String)、数字(Number)、布尔值(Boolean)、null、undefined、对象(Object)和Symbol(ES6新增)。 2. 控制流语句:包括条件语句(if...else、switch)、循环语句(for、while、do......

    Javascript时钟

    JavaScript时钟是一种常见的网页动态效果,它通过JavaScript编程语言实现,可以实时显示当前时间或日期。在本篇文章中,我们将深入探讨如何利用JavaScript创建一个功能齐全的时钟,并理解其背后的原理。 首先,我们...

Global site tag (gtag.js) - Google Analytics