javascript - 如何解决点 .01 返回 0 的两位小数问题
问题描述
问题是，当我输入 18.0 之类的数字时，我的代码变为 18，我希望我的用户可以自由输入 18.06。但是我的代码不允许用户超过 18.0。
My Fiddle https://jsfiddle.net/dev2804/cf8vwrbj/1/
function Process() {
var AUS = 1; //CURENY RATE CAN BE CHAGNED BUT THE COUNTRIES IT SELF WON'T, ITS NOT A PART OF THE ASSIGNMENT.
var YEN = 82;
var YAUN = 5;
var RUPIAH = 10000;
var val = event.target.value;
var country = {
"Australia": AUS,
"JapaneseYen": YEN,
"ChineseYuan": YAUN,
"IndonesianRupiah": RUPIAH
};
var countRate;
if (event.target.id == 'countryAustralia') {
countRate = AUS;
} else if (event.target.id == 'countryJapaneseYen') {
countRate = YEN;
} else if (event.target.id == 'countryChineseYuan') {
countRate = YAUN;
} else if (event.target.id == 'countryIndonesianRupiah') {
countRate = RUPIAH;
}
var text = "";
var i;
var rateMp = (val / countRate);
if (val > 0.01 || val < 0) {
for (var i in country) {
var currency = (rateMp * country[i]);
var input = document.querySelector('#country' + i); // select the input by it's ID, I used the country object to build the selector
input.value = currency; // assign the calculated value to the input
}
} else if (val == "") {
for (var i in country) {
var currency = "";
var input = document.querySelector('#country' + i);
input.value = currency;
}
} else if (val.toString() == "0") {
for (var i in country) {
var currency = 0.00;
var input = document.querySelector('#country' + i);
input.value = currency;
}
}
}<Section class="container">
<Table>
<tr class="RowDesign">
<td class="CountryName">
<div class="CountryText">Australia</div>
</td><br>
<td>
<INPUT placeholder="AUD" type="number" Class="Country" ID="countryAustralia" list="CommonVal" oninput="Process();" onClick="Remove();" />
</td>
</tr>
<tr class="RowDesign">
<td class="CountryName">
<div class="CountryText">Japan</div>
</td><br>
<td>
<INPUT type="number" placeholder="JPY" Class="Country" ID="countryJapaneseYen" list="CommonVal" oninput="Process();" onClick="Remove();" />
</td>
</tr>
<tr class="RowDesign">
<td class="CountryName">
<div class="CountryText">China</div>
</td><br>
<td>
<INPUT type="number" placeholder="CNY" Class="Country" ID="countryChineseYuan" list="CommonVal" onInput="Process();" onClick="Remove();" />
</td>
</tr>
<tr class="RowDesign">
<td class="CountryName">
<div class="CountryText">Indonesia</div>
</td><br>
<td>
<INPUT type="number" placeholder="IDR" Class="Country" ID="countryIndonesianRupiah" list="CommonVal" oninput="Process();" onClick="Remove();" />
</td>
</tr>
<Datalist ID="CommonVal">
<option value=1>1</option>
<option value=10>10</option>
<option value=100>100</option>
<option value=500>500</option>
</Datalist>
</Table>
</Section>我尝试了几个 if 语句，但没有奏效。所以现在我不知道如何修复这个错误。
解决方案
你可以试试这个，我更新了你的代码：
<HTML>
<HEAD>
<TITLE>Currency Converter Protype4</TITLE>
</HEAD>
<BODY>
<Style>
body {
background-image: url(https://lh4.googleusercontent.com/-XplyTa1Za-I/VMSgIyAYkHI/AAAAAAAADxM/oL-rD6VP4ts/w1184-h666/Android-Lollipop-wallpapers-Google-Now-Wallpaper-2.png);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
font-family: 'Roboto', sans-serif;
}
table{
border-collapse: collapse;
width: 360px;
height: 370px;
border-radius: 5px;
position: absolute;
top: 50%; /*Remember this */
left: 50%;
margin-top: -185px;
margin-left: -180px;
}
.RowDesign{
height: 80px;
background-color: #ccffff;
border: 10px solid #b3b3ff;
border-radius: 5px;
}
.container{
position: absolute;
top: 50%; /*Remember this */
left: 50%;
margin-top: -200px;
margin-left: -190px;
width: 380px;
height:400px;
background-color: #b3b3ff;
border: 3px solid #b3b3ff;
border-radius: 5px;
}
.CountryName{
padding-left: 8px;
padding-right: 18px;
padding-top: 5px;
text-align: center;
}
.ImgText{
width: 70px;
height: 45px;
border: 1px solid #fff;
}
.Country{
height: 30px;
width: 175px;
padding-left: 20px;
border: 2px solid #0066ff;
border-radius: 15px;
}
.Country:hover{
background-color: #e6e6ff;
}
.CountryText{
vertical-align: center;
visibility: hidden;
font-weight: Bold;
color: #3d2263;
}
.ImgText:hover ~ .CountryText{
visibility: visible;
}
input:focus {
background-color: #e6e6ff;
}
</Style>
<Section class="container">
<Table>
<tr class="RowDesign">
<td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/88/Flag_of_Australia_%28converted%29.svg/1600px-Flag_of_Australia_%28converted%29.svg.png" alt="Australia"><div class="CountryText">Australia</div></td><br>
<td><INPUT placeholder="AUD" type="number" Class="Country" ID="countryAustralia" list="CommonVal" oninput="validate(this);Process(event);" onClick="Remove();" ></td>
</tr>
<tr class="RowDesign">
<td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/Flag_of_Japan.svg/1280px-Flag_of_Japan.svg.png" alt="Japan"><div class="CountryText">Japan</div></td><br>
<td><INPUT type="number" placeholder="JPY" Class="Country" ID="countryJapaneseYen" list="CommonVal" oninput="validate(this);Process(event);" onClick="Remove();"></td>
</tr>
<tr class="RowDesign">
<td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Flag_of_the_People%27s_Republic_of_China.svg/510px-Flag_of_the_People%27s_Republic_of_China.svg.png" alt="ChineseYuan" height="60px" width="90px"><div class="CountryText">China</div></td><br>
<td><INPUT type="number" placeholder="CNY" Class="Country" ID="countryChineseYuan" list="CommonVal" onInput="validate(this);Process(event);" onClick="Remove();"></td>
</tr>
<tr class="RowDesign">
<td class="CountryName"><img class="ImgText" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/9f/Flag_of_Indonesia.svg/510px-Flag_of_Indonesia.svg.png" alt="IndonesianRupiah" ><div class="CountryText">Indonesia</div></td><br>
<td><INPUT type="number" placeholder="IDR" Class="Country" ID="countryIndonesianRupiah" list="CommonVal" step="any" oninput="validate(this);Process(event);" onClick="Remove();" ></td>
</tr>
<Datalist ID="CommonVal">
<option value=1>1</option>
<option value=10>10</option>
<option value=100>100</option>
<option value=500>500</option>
</Datalist>
</table>
</Section>
<SCRIPT LANGUAGE="javascript" TYPE="text/javascript">
var validate = function(e) {
var t = e.value;
//console.log(t)
/* e.value = (t.indexOf(".") >= 0) ? (t.substr(0, t.indexOf(".")) + t.substr(t.indexOf("."), 3)) : t; */
// console.log(e.value )
}
function Process(event) {
var AUS = 1; //CURENY RATE CAN BE CHAGNED BUT THE COUNTRIES IT SELF WON'T, ITS NOT A PART OF THE ASSIGNMENT.
var YEN = 82;
var YAUN = 5;
var RUPIAH = 10000;
var val = event.target.value;
var country = {
"Australia": AUS,
"JapaneseYen": YEN,
"ChineseYuan": YAUN,
"IndonesianRupiah": RUPIAH
};
var countRate;
if (event.target.id=='countryAustralia'){
countRate = AUS;
}
else if (event.target.id=='countryJapaneseYen'){
countRate = YEN;
}
else if (event.target.id=='countryChineseYuan'){
countRate = YAUN;
}
else if (event.target.id=='countryIndonesianRupiah'){
countRate = RUPIAH;
}
var text = "";
var i;
var rateMp = (val/countRate);
if (val>0){
for (var i in country) {
var currency = (rateMp* country[i]);
var input = document.querySelector('#country' + i); // select the input by it's ID, I used the country object to build the selector
if (event.target.id!='country' + i){
input.value = currency; // assign the calculated value to the input
}
}
}
else if (val==""){
for (var i in country) {
var currency = "";
var input = document.querySelector('#country' + i);
input.value = currency;
}
}
else if (val.toString()=="0"){
for (var i in country) {
var currency = 0.00;
var input = document.querySelector('#country' + i);
input.value = currency;
}
}
}
function Remove(){}
</SCRIPT>
</BODY>
</HTML>这和你想要的一样。谢谢！
推荐阅读
- operating-system - 工艺段中的空白部分是什么。[操作系统]
- java - 如何在多模块 android 项目（kotlin + java）上配置 SonarQube（使用 jacoco）？
- angular - spyOn 即使通过函数也不会被调用
- kubernetes - Kubernetes DNS 在反应应用程序中不起作用
- yii2 - Yii 2 模块明智的配置设置
- sql-server - 在单行中将行作为动态命名的列返回 MS T-SQL 希望它是一个视图
- asp.net-core - 如何在 MVC 中实现 CheckBoxList？
- javascript - 如何将数据图中的地图更改为世界地图的图像？
- c++ - 如何在 Windows C++ 中创建 S-1-5-21-123697389-1196883430-1112475604-1016 等 SID
- r - R中的路径相关向量变换