demand

The demand is like this: for example, background statistics show a relatively large total amount, such as 90,000,000, or more than 900 million. Need to show on the page again: xxxxbillion xxx10,000 XXX yuan, Amount value for statistics: If it's a billion then it's xxx10,000 XXX yuan, If it's 0 yuan, it's XXXX billion xxx million If it is 100,000 XXXX billion xxx yuan. .....just don't show the result of 0

Actually, I am not responsible for this, and other colleagues do it. It's common practice, and first thought of, to calculate intercept string splicing in the background and display it on the page. And this requirement is not so simple as the display of money transferred into Chinese.

Solution

1， Starting with a colleague is the way that backstage intercept strings are used to stitch together front-end pages.However, one day, the background method displayed by this process produced a BUG, and some special amount of information was omitted, resulting in an error in accessing the page,,, the consequences are known to all, And this page is also the first page of the website!!!

Although you can modify this method in the background to fix BUG, there may be BUG in the future, causing the home page to hang up and not go in. So our boss said can we use front-end JS to handle it?

1. When our front end just started getting this demand, it was also js's way of calculating and intercepting the amount. That way, if you handle it like the background, your front-end colleagues are wondering if there is a more efficient and simple way? It's almost New Year's holiday and I'm not in any mood to work anymore.

As a result, he did think of it.For example, 91 million people, Divide the amount by 100 million, then you can get how many billion, and then get the remainder, which is less than the remaining 100 million.If you want tens of thousands, you can divide them by ten thousand, and you will know how many tens of thousands, and the rest will be tens of thousands. And so on...I can't think of this solution, it's the application of decimal math!!!

Final JS Solution

Code:

$(function(){
					formatMoney(${money},'1'); // Accumulated investment amount
					formatMoney(${money1},'2');// Accumulated Income Amount
				
				})
				//Format Money #Billion#####Wan##\Yuan
				function formatMoney(money,id){
				   	var m=money;
				  	var multiple=100000000;
				  	var radix=10000;
				  	var r=1;
				  	var y=parseInt(m/multiple);
					var w=parseInt(m%multiple/radix);
					var g=parseInt(m%multiple%radix/r);
					
					if(y!=0){
						$('#eid'+id).text(y);
						$('#eidFont'+id).text('billion');
					}
					if(w!=0){
						$('#wid'+id).text(w);
						$('#widFont'+id).text('ten thousand');
					}
					if(g!=0){
						$('#yid'+id).text(g);
						$('#yidFont'+id).text('yuan');
					}
				}

Front-end page code:

<div class="cumulative">
						<ul class="clearfix">
							<li class="border">
								Accumulated investment amount:<span id="idE">
								
                     		<b id="eid1" style='font-size:25px'></b>
                     		<b id="eidFont1" style='font-size:18px'></b>
                     		
                     		<b id="wid1" style='font-size:25px'></b>
                     		<b id="widFont1" style='font-size:18px'></b>
                     		
                     		<b id="yid1" style='font-size:25px'></b>
                     		<b id="yidFont1" style='font-size:18px'></b>   
                     </span>
							</li>
							<li class="border">
								Accumulated Income Amount:<span>
								
                            <b id="eid2" style='font-size:25px'></b>
                     		<b id="eidFont2" style='font-size:18px'></b>
                     		
                     		<b id="wid2" style='font-size:25px'></b>
                     		<b id="widFont2" style='font-size:18px'></b>
                     		
                     		<b id="yid2" style='font-size:25px'></b>
                     		<b id="yidFont2" style='font-size:18px'></b> 
                      </span>
							</li>
							<li class="position">
								Platform Operations:<span><b> ${operateDay }</b><b style='font-size:18px'>day</b> </span>

								<%-- <a href="">More information disclosure</a> --%>

							</li>
						</ul>
					</div>

So I quickly set it up, so that I can quickly and easily solve the problem with such amount display requirements in the future.

Website address used: Melt Steel Credit