`
linleizi
  • 浏览: 230285 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

js调整数字为价格的格式

阅读更多
例子:
比如输入123456会自动调整为123,456的格式。
<script language="javascript" type="text/javascript" >

			function isInputedNum (txtId) {
				if (!event.shiftKey) {
					if (!((event.keyCode >= 48 && event.keyCode <= 57) 
							|| event.keyCode == 8 
							|| event.keyCode == 9 
							|| event.keyCode == 46 
							|| (event.keyCode >= 96 && event.keyCode <= 105) 
							|| (event.keyCode >= 37 && event.keyCode <= 40))) {
								//alert(event.keyCode);
						event.returnValue = false;
						return false;
					}
					if (event.keyCode != 9) {
						if (txtId.value == "0") {
							txtId.value = "";
						}
					}
					return true;
				} else {
					event.returnValue = false;
					return false;
				}
			}
			
/**
 * remove comar from a number String 
 */			
function removeComarValue(txtId) {
	if(txtId.readOnly == true)
		return;
	var txt = removeComar(txtId.value);
	txtId.value = txt;
}

/**
 * remove comar from a number String 
 */			
function removeComar(txtNum) {
	var numStr = txtNum;
	var indx = numStr.indexOf(",");
	if (indx != -1) {
		numStr = numStr.replace(",", "");
		numStr = removeComar(numStr);
	}
	return numStr;
}


/**
 * add comar to a number String 
 */
function resetComarValue(txtId) {
	if(txtId.readOnly == true) return;
	var value = txtId.value.replace(/^0+/g, '');
	if (value == '') value = '0';
	var txt = resetComar(value);
	txtId.value = txt;
}

/**
 * add comar to a number String 
 */			
function resetComar(txtNum) {
	txtNum = removeComar(txtNum);
	if (txtNum.length <= 3) {
		return txtNum;
	}
	var threeOnes = new Array(0);
	var last = txtNum.length;
	var first = last - 3;
	var arrayIndx = 0;
	while (first >= 0) {
		var txtNumStr = txtNum.substring(first, last);
		threeOnes[arrayIndx] = txtNum.substring(first, last);
		arrayIndx++;
		last = first;
		first = last - 3;
		if (first < 0 && last > 0) {
			first = 0;
		}
	}
	var txtNumCopy = "";
	for (var i = threeOnes.length - 1; i >= 0; i--) {
		if (txtNumCopy == "") {
			txtNumCopy = threeOnes[i];
		} else {
			txtNumCopy = txtNumCopy + "," + threeOnes[i];
		}
	}

	if(txtNumCopy.charAt(0) == '-') {
		if(txtNumCopy.charAt(1) == ',') {
			txtNumCopy = "-" + txtNumCopy.substring(2);
		}
	}

	return txtNumCopy;
}
</script>


<input type="text" id="price" name="price" maxlength="11" onkeydown="return isInputedNum(this)" onfocus="removeComarValue(this)" onblur="resetComarValue(this)" style="text-align: right;" />

分享到:
评论

相关推荐

    jQuery自定义数字滚动插件.zip

    总的来说,jQuery自定义数字滚动插件通过结合JavaScript和CSS,为数字变化提供了一种引人注目的动态展示方式,使得数据的呈现更加生动和吸引人。开发者可以通过灵活配置和自定义,轻松地将其集成到各种Web应用中。

    数字格式化工具类

    标题中的“数字格式化工具类”指的是在编程中用于处理数字字符串的一种实用程序类,它通常包含各种方法,用于将数字转换成特定格式,如货币、百分比、科学记数法等。这样的工具类可以极大地简化开发过程,提高代码...

    js数字翻转切换插件

    **JavaScript数字翻转切换插件——number-flip详解** 在前端开发中,有时我们需要实现一些动态的数字展示效果,比如计数器、时钟或数据统计等,这时`number-flip`插件就派上用场了。它是一款基于JavaScript的数字...

    js实现数字滚动特效

    JavaScript 数字滚动特效是一种常见的网页动态效果,常用于显示实时更新的数据,如股票价格、计数器或评分等。在给定的示例中,它通过JavaScript代码实现了数字的平滑滚动展示。以下是对实现这一特效的关键知识点的...

    html滚动数字

    在HTML页面中,实现数字滚动效果可以为用户提供动态且引人注目的视觉体验。这种效果通常用于显示实时更新的数据,如股票...通过这种方式,你可以自由地调整数字的CSS样式,以及滚动速度和行为,以适应不同的应用场景。

    滚动数字.rar

    本项目“滚动数字.rar”是利用JavaScript实现的数字滚动效果,允许用户自定义数字递增显示,并调整CSS样式以适应不同的图片需求。 首先,我们要了解JavaScript在其中的作用。JavaScript是一种客户端脚本语言,它...

    jQuery数字滚动增加动画特效

    "jQuery数字滚动增加动画特效"是一个实现数字动态展示的技术,它利用JavaScript库jQuery配合特定的插件digitalScrol.js,来创建出数字随时间连续滚动的视觉效果。这种特效常用于显示统计数据、评分或实时更新的数据...

    一个滚动数字组件的源代码和demo

    在IT行业中,滚动数字组件是一种常见的前端效果,用于展示动态变化的数据,比如股票价格、销售额等。本资源提供了一个滚动数字组件的源代码和演示(demo),非常适合开发者学习和使用。资源链接来源于CSDN博客的一篇...

    js判断价格,必须为数字且不能为负数的实现方法

    本文主要介绍如何使用JavaScript来实现对价格输入的验证,即价格必须为数字且不能为负数。 首先,我们可以通过HTML表单元素和JavaScript函数来完成这一验证。HTML部分通常包括一个文本输入框,用于用户输入价格信息...

    数字放大镜input输入数字放大镜效果代码.zip

    标签"js特效-数字放大镜input输入数字放大镜效果代码"揭示了这个代码的主要技术领域,即JavaScript特效。这意味着代码利用了JavaScript的DOM操作、事件监听以及可能的动画效果来创建这一视觉特效。 在压缩包的子...

    jquery数字动画插件animationCounter.js

    总结来说,animationCounter.js凭借其出色的数字动画效果、良好的浏览器兼容性和简便的使用方式,为开发者提供了一个强大的工具,使得数字变化的展示变得更加生动有趣。无论是初学者还是经验丰富的开发者,都能轻松...

    vue.js实现价格格式化的方法

    Vue.js框架由于其简洁和灵活性,在前端开发中得到了广泛的应用,本文将介绍如何利用Vue.js实现价格的格式化。 首先,要了解Vue.js框架中的过滤器(filters)概念。过滤器是一种特殊的功能,可以在Vue模板中插入,...

    jQuery自定义数值数字滚动代码

    总结来说,jQuery自定义数值数字滚动代码是一种利用JavaScript库实现的动态效果,它能够为网页增加互动性和视觉吸引力。通过理解上述步骤,开发者可以灵活地创建和定制自己的数字滚动效果,满足各种网页设计需求。

    jQuery实现数字滚动

    "jQuery实现数字滚动"是一种常见的动态展示技术,尤其适用于展示实时更新的数据,如访问量、股票价格或天气预报等。jQuery,作为一款强大的JavaScript库,提供了丰富的API和插件来简化网页交互的实现,包括数字滚动...

    jQuery数字滚动增加插件.zip

    这种灵活性使得开发者可以根据网页的整体风格和用户交互体验来调整数字滚动的方式,使得效果更加符合产品需求。 在压缩包文件中,我们可以看到以下几个关键文件: 1. `说明.htm` 和 `说明.txt`:这两个文件通常包含...

    jquery数字跳动插件Animate Number.zip

    其中,“jQuery数字跳动插件AnimateNumber”是一款专为实现数字动态变化而设计的工具,它为开发者提供了更加灵活和丰富的动画效果。本文将深入探讨这款插件的功能、使用方法以及背后的编程原理。 AnimateNumber插件...

    js实现数字递增特效【仿支付宝我的财富】

    仿照支付宝“我的财富”中的数字递增效果,我们可以使用JS编写一个轻巧且实用的小插件,使得数字从初始值平滑地过渡到目标值。本文将详细介绍如何实现这一特效。 首先,我们需要理解HTML部分的结构。一个简单的HTML...

    numberAnimatejs数字滚动插件

    "numberAnimate js数字滚动插件"是一个专门为JavaScript开发者设计的工具,主要用于实现动态、平滑的数字滚动效果。在网页中,这种效果常用于展示统计数据、计时器或者实时更新的数值,为用户界面增添动感和视觉吸引...

    任意数位的数字滚动特效

    - **数字格式化**:确保新旧数字之间的位数匹配,避免因为位数差异导致的视觉跳跃。 - **动画平滑性**:合理设置动画时间和帧率,保证滚动过程流畅自然。 - **性能优化**:避免过度绘制和不必要的计算,特别是在大...

    前端项目-odometer.js.zip

    4. **API接口**:`odometer.js`可能提供了一系列的API方法,允许开发者控制动画的开始、结束、速度以及格式化显示的数字等。 5. **事件监听**:在前端开发中,通常会通过监听DOM事件(如数据更新)来触发`odometer....

Global site tag (gtag.js) - Google Analytics