๊ฐœ๋ฐœ๊ด€๋ จ/javascript&jquery

[Javascript/Jquery] ์ œ์ด์ฟผ๋ฆฌ๋กœ ์ฒœ ๋‹จ์œ„ ์ฝค๋งˆ (1,000) ์„ธ์ž๋ฆฌ๋งˆ๋‹ค ์ฝค๋งˆ์ฐ๊ธฐ!

๐Ÿป๊ณฐ์ด๐Ÿป 2020. 11. 24.
728x90

์Œ~ ๊ฐœ๋ฐœํ•˜๋‹ค๋ณด๋ฉด ๊ฐ€๊ฒฉ?์ด๋‚˜ 1000๋‹จ์œ„ ์ด์ƒ ์ˆ˜์— ์ฝค๋งˆ๋ฅผ ๋„ฃ์–ด ๊ฐ€๋…์„ฑ์ด ์ข‹๊ฒŒ ํ•œ๋‹ค๋˜์ง€ ๊ทธ๋Ÿฐ์ž‘์—…์„ ํ•˜์‹ค์ง„ ๋ชจ๋ฅด๊ฒ ์ง€๋งŒ..

PHP์—๋Š” number_format์ด๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€์žˆ์ง€๋งŒ PHP๋ง๊ณ  javascript๋ฅผ ์‚ฌ์šฉํ–ˆ์„๋•Œ html์•ˆ์—์„œ ํ•ด๊ฒฐ ํ•  ์ˆ˜ ์žˆ์„๊นŒ??

ํ•ด์„œ ๋งŒ๋“ค์–ด๋ณธ ํ•จ์ˆ˜์ž…๋‹ˆ๋‹ค.

 

์ตœ์ข… ์ฝ”๋“œ

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>Document</title>
<!-- ์ œ์ด์ฟผ๋ฆฌ -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
	$(function(){
		$("#format1").click(function(){
			var format = numberformat1($("#num1").val());
			
			$("#num1").val(format);
		});
	});

	//์ฒœ ๋‹จ์œ„ ์ฝค๋งˆ ์ฐ์–ด ์ถœ๋ ฅํ•˜๊ธฐ
	function numberformat1(double) 
	{
		var parts = double.toString().split(".");

		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");

		return parts.join(".");
	}
</script>
</head>
	<body>
		<input type="text" id="num1">
		<button id="format1">์ฝค๋งˆ์ฐ๊ธฐ</button>
	</body>
</html>

์ง์ ‘ํ•ด๋ณด์‹œ๊ธธ๋ฐ”๋ž๋‹ˆ๋‹ค.

 

Document

 

์˜์ƒ์œผ๋กœ ๋ณด์—ฌ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

 

๋ณด์‹œ๋‹ค์‹œํ”ผ ์ด๋ ‡๊ฒŒ 1000๋‹จ์œ„๋กœ ์ฝค๋งˆ๊ฐ€ ์ฐํžˆ๋Š” ๊ฑธ ํ™•์ธํ•˜์‹ค์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

 

onblur ์‚ฌ์šฉํ•˜์—ฌ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด์ง€์•Š์•„๋„ ์ฝค๋งˆ๊ฐ€ ์ฐํžˆ๊ฒŒ ํ•ด๋ณผ๊ฒŒ์š”

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>๊ฐœ๋ฐœ์‰ฝ๊ฒŒํ•˜์ฆˆ์•™!</title>
<!-- ์ œ์ด์ฟผ๋ฆฌ -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
	//์ฒœ ๋‹จ์œ„ ์ฝค๋งˆ ์ฐ์–ด ์ถœ๋ ฅํ•˜๊ธฐ
	function numberformat2() 
	{
		double = $("#num2").val();
		var parts = double.toString().split(".");

		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");

		$("#num2").val(parts.join("."));
	}
</script>
</head>
	<body>
		<input type="text" id="num2" onblur="numberformat2();">
	</body>
</html>

์ง์ ‘ํ•ด๋ณด์‹œ๋ฉด ์–ด๋–ค๊ฑด์ง€ ๊ฐ์ด ํ™• ์˜ค์‹ค๊ฒ๋‹ˆ๋‹ค ใ…Žใ…Ž

 

๊ฐœ๋ฐœ์‰ฝ๊ฒŒํ•˜์ฆˆ์•™!

 

+์ถ”๊ฐ€

 

์Œ..์ด๊ฒŒ ๊ณ„์† ์ˆซ์ž ๋Š˜๋ ค์„œ ์“ฐ๋ฉด ์ฝค๋งˆ๊ฐ€ ์ด์ƒํ•˜๊ฒŒ ๋“ค์–ด๊ฐ€๋„ค์š” ใ…Žใ…Ž

 

์ตœ์ข…์ˆ˜์ •๋ณธ

 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<title>๊ฐœ๋ฐœ์‰ฝ๊ฒŒํ•˜์ฆˆ์•™!</title>
<!-- ์ œ์ด์ฟผ๋ฆฌ -->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
	//์ฒœ ๋‹จ์œ„ ์ฝค๋งˆ ์ฐ์–ด ์ถœ๋ ฅํ•˜๊ธฐ
	function numberformat3() 
	{
		double = $("#num3").val().replace(/[^0-9]/g,'');
		var parts = double.toString().split(".");

		parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");

		$("#num3").val(parts.join("."));
	}
</script>
</head>
	<body>
		<input type="text" id="num3" onblur="numberformat3();">
	</body>
</html>

 

๊ฐœ๋ฐœ์‰ฝ๊ฒŒํ•˜์ฆˆ์•™!

 

 

์ฐธ๊ณ ํ•˜์…”์„œ ๋„์›€์ด ๋˜์—ˆ์œผ๋ฉด์ข‹๊ฒ ์Šต๋‹ˆ๋‹ค.

 

๊ถ๊ธˆํ•˜์‹ ์ ์€ ๋Œ“๊ธ€๋กœ ๋‚จ๊ฒจ์ฃผ์„ธ์š”!

๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€