保留小数点两位和千分位分隔符的使用

最新推荐文章于 2024-04-20 17:04:25 发布

荒--

最新推荐文章于 2024-04-20 17:04:25 发布

阅读量9.4k

点赞数 1

分类专栏： java基础

本文链接：https://blog.csdn.net/wangqing84411433/article/details/78917302

版权

java基础专栏收录该内容

78 篇文章 2 订阅

订阅专栏

页面显示如下：

-------------------------------------------------

<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
  <p style="color:blue">1.输入的数字会自动添加千分位分隔符，移出文本框之后会保留两位小数--利用以下两个JS来实现</p>
  请输入：<input type="text" id="count"/>
  <hr><hr>
  
  <p style="color:red">
  	2.在JSP页面显示后台获取的double数据,要求保留两位小数,且添加千分位分隔符--使用fmt:formatNumber标签<br>
  	假设从后台获取的值为100 100.5 10000000.65 <br>
  	fmt标签的属性：<br>(1)groupingUsed  是否对数字分组 (TRUE 或 FALSE)<br>  (2)minFractionDigits	小数点后最小的位数
  </p>
  <p><fmt:formatNumber groupingUsed="true" minFractionDigits="2">100</fmt:formatNumber></p>
  <p><fmt:formatNumber groupingUsed="true" minFractionDigits="2">100.5</fmt:formatNumber></p>
  <p><fmt:formatNumber groupingUsed="true" minFractionDigits="2">10000000.65</fmt:formatNumber></p>
  <hr><hr>
  <p style="color:#228B22">3.获取后台数据后,也可以通过JS写入页面<br>
  	其中a=32000000.5是一个string类型    b=32000000.5是一个number类型
  </p>
  <button type="button" οnclick="getMsg()">获取数据</button><br>
  获取到的数据a:<input type="text" id="msg1"/>
  获取到的数据b:<input type="text" id="msg2"/>
   
  
</body>

<%
  String basePath = request.getContextPath();
%>
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.9.1.min.js"></script>

<script type="text/javascript">
var a = "32000000.5";//string类型
var b = 32000000.5;//number类型
//将a和b写入文本框
function getMsg(){
	$("#msg1").val(toDoubleThousands(a));
	$("#msg2").val(toDoubleThousands(b));
}

//保留两位小数以及千分位的分隔符
function toDoubleThousands(num) {//可以传入number或者string
	//判断是否有小数点
	var s = num.toString().indexOf(".");
	if(s == -1){//是整数
		return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')+".00";
	}else{//是小数
		var arr = num.toString().split(".");
		if(arr.length > 1 && arr[1].length < 2){//一位小数
			return (arr[0] || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + arr[1] + "0";
		}else{//两位小数
			return (arr[0] || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + arr[1];
		}
	}
}

//千分位的分隔符
function toThousands(num) {//此时传入的是字符串,若传入double类型则会indexOf报错
	//若没有任何数据则直接返回
	if(num == "" || num == null){
		return num;
	}else{
		//判断是否有小数点
		var s = num.indexOf(".");
		if(s == -1){//是整数
			return (num || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
		}else{
			 var arr = num.split(".");
			 return (arr[0] || 0).toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') + "." + arr[1];
		}
	}
}
//小数点的校验
$(function(){
	//当按下按键时触发keyup事件
	$("#count").on('keyup', function (event) {
	    var $amountInput = $(this);
	    //响应鼠标事件，允许左右方向键移动 
	    event = window.event || event;
	    if (event.keyCode == 37 | event.keyCode == 39) {
	        return;
	    }
	    //先把非数字的都替换掉，除了数字和. 
	    var temp = $amountInput.val().replace(/[^\d.]/g, "").
	        //只允许一个小数点              
	        replace(/^\./g, "").replace(/\.{2,}/g, ".").
	        //只能输入小数点后两位
	        replace(".", "$#$").replace(/\./g, "").replace("$#$", ".").replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
	    //添加分隔符     
		$amountInput.val(toThousands(temp));
	});
	//鼠标移出事件--保留两位小数
	$("#count").on('blur', function () {
	    var $amountInput = $(this);
	    //最后一位是小数点的话，移除
	    $amountInput.val(($amountInput.val().replace(/\.$/g, "")));
	    //保留两位小数
	    var s = $amountInput.val();
	    var arr = s.split(".");
	    if(s == ""){
	    	 $amountInput.val("0.00");
	    	 return;
	    }else if(arr.length == 1){//没有小数点
	    	$amountInput.val(s + ".00");
	    	return;
	    }else if(arr.length > 1 && arr[1].length < 2){//有小数点
	    	$amountInput.val(s + "0");
	    	return;
	    }
	});
}); 
</script>
</html>