我正在尝试用javascript结合HTML和CSS代码编写交换转换器。我在这里遇到的问题是我无法将数字从一种货币转换为另一种货币,而有两种不同的方框,一种用于输入值,另一种用于返回交换的值。我的程序根本不会转换任何东西。如果你能提供帮助,我将不胜感激。 以下是我的全部代码:
downloadFile(urlImage:string, idImage: string){
const fileTransfer = new Transfer();
let url = urlImage;
let path: string;
let name: string;
name = idImage + ".gif"
if(this.platform.is('android')){
path = cordova.file.externalCacheDirectory
}
if(this.platform.is('ios')){
path = cordova.file.tempDirectory;
}
fileTransfer.download(url, path + name).then((entry) => {
console.log('download complete: ' + entry.toURL());
console.log('ahora compartimos la imagen');
this.whatsappShare(path + name);
}, (error) => {
console.log("Error descargando imagen");
console.log(error);
});
}
短代码:
<html>
<head>
<title> Converter </title>
<style type="text/css">
div{
width:600px;
height:300px;
background-color:blue;
margin-right: 120px;
margin-top: 40px;
}
#box1{
width: 200px;
height: 200px;
background-color:red;
}
#box2{
width:200px;
height: 200px;
background-color:red;
}
p{
font-size:12pt;
font-family: arial, sans-serif;
}
nav { font-weight : bold;
color: white;
border : 2px solid royalblue;
text-align: center ;
width: 10em;
background-color : royalblue;}
nav ul { display: none;
list-style: none;
margin : 0;
padding: 0;}
nav ul li { border-top: 2px solid royalblue;
background-color : white;
width: 10em;
color: black;}
nav ul li:hover { background-color : powderblue;}
a { text-decoration: none;}
</style>
<script type="text/javascript">
function convert(){
if(document.getElementByOptionValue("txtList1")==Euro(EUR) && document.getElementByOptionValue("txtList2")==Albania(LEK)){
var eur=document.getElementById("first");
var e=parseFloat(eur.value);
if(!validateForm())
return;
var l=e*135.82;
var lek=document.getElementById("second");
lek.value=l;
}
if(document.getElementByOptionValue("txtList1")==Albania(LEK) && document.getElementByOptionValue("txtList2")==Euro(EUR)){
var lek=document.getElementById("first");
var l=parseFloat(lek.value);
if(!validateForm())
return;
var e=l*138.92;
var eur=document.getElementById("second");
lek.value=l;
}
}
function validateForm(){
var f=document.getElementById("first");
if(f.value==""){
alert("Jepni nje vlere");
f.focus();
return false;
}
if(isNaN(f.value){
alert("Vlera qe dhate nuk eshte numer");
f.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div id="box1">
<form action="">
<p>Type a country or a currency</p>
<p> <label for="txtList" >
<input type="text" id="txtList1"
placeholder="United States Dollars (USD)" list="currencies"/>
<datalist id="currencies">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">
</datalist>
</label></input></p>
<nav>Browse All
<ul>
<li><a href = "#" >United States Dollars (USD)</a></li>
<li><a href = "#" >Euro(EUR)</a></li>
<li><a href = "#" >Albania (LEK)</a></li>
<li><a href = "#" >Paunds (PAUND)</a></li>
</ul>
</nav>
<p>Please enter an amount </p>
<p><label>Currency:
<input name = "name" type = "text" id="first" size = "15"
maxlength = "10">
</label></p></div>
<input type="button" value="=" onclick="convert()"/>
<div id="box2">
<p>Type a country or a currency</p>
<p> <label for="txtList" >
<input type="text" id="txtList2"
placeholder="Euro (EUR)" list="currencies"/>
<datalist id="currencies">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">
</datalist>
</label></input></p>
<nav>Browse All
<ul>
<li><a href = "#" >United States Dollars (USD)</a></li>
<li><a href = "#" >Euro(EUR)</a></li>
<li><a href = "#" >Albania (LEK)</a></li>
<li><a href = "#" >Paunds (PAUND)</a></li>
</ul>
</nav>
<p>Please enter an amount </p>
<p><label>Currency:
<input name = "name" type = "text" id="second" size = "15"
maxlength = "10">
</label></p></div></form>
</body>
</html>
答案 0 :(得分:0)
我不确定你打算写什么逻辑。但现在它将适用于两组值。在第一个下拉列表中选择Euro并在文本框中输入一些数字。同样,选择阿尔巴尼亚&#39;在第二次下拉菜单中,按下&#39; =&#39;按钮。现在第二个文本框将具有转换后的值。
这将开始。 :)
<html>
<head>
<title>Converter </title>
<style type="text/css">
div {
width: 600px;
height: 300px;
background-color: blue;
margin-right: 120px;
margin-top: 40px;
}
#box1 {
width: 200px;
height: 200px;
background-color: red;
}
#box2 {
width: 200px;
height: 200px;
background-color: red;
}
p {
font-size: 12pt;
font-family: arial, sans-serif;
}
nav {
font-weight: bold;
color: white;
border: 2px solid royalblue;
text-align: center;
width: 10em;
background-color: royalblue;
}
nav ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
border-top: 2px solid royalblue;
background-color: white;
width: 10em;
color: black;
}
nav ul li:hover {
background-color: powderblue;
}
a {
text-decoration: none;
}
</style>
<script type="text/javascript">
function convert() {
if (document.getElementById('txtList1').value == 'Euro(EUR)' && document.getElementById("txtList2").value == 'Albania (LEK)') {
var eur = document.getElementById("first");
var e = parseFloat(eur.value);
if (!validateForm())
return;
var l = e * 135.82;
var lek = document.getElementById("second");
lek.value = l;
}
if (document.getElementById("txtList1").value == 'Albania (LEK)' && document.getElementById("txtList2").value == 'Euro(EUR)') {
var lek = document.getElementById("first");
var l = parseFloat(lek.value);
if (!validateForm())
return;
var e = l * 138.92;
var eur = document.getElementById("second");
eur.value = e;
}
}
function validateForm() {
var f = document.getElementById("first");
if (f.value == "") {
alert("Jepni nje vlere");
f.focus();
return false;
}
if (isNaN(f.value)) {
alert("Vlera qe dhate nuk eshte numer");
f.focus();
return false;
}
return true;
}
</script>
</head>
<body>
<div id="box1">
<form action="">
<p>Type a country or a currency</p>
<p>
<label for="txtList">
<input type="text" id="txtList1"
placeholder="United States Dollars (USD)" list="currencies" />
<datalist id="currencies">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">
</datalist>
</label>
</p>
<nav>
Browse All
<ul>
<li><a href="#">United States Dollars (USD)</a></li>
<li><a href="#">Euro(EUR)</a></li>
<li><a href="#">Albania (LEK)</a></li>
<li><a href="#">Paunds (PAUND)</a></li>
</ul>
</nav>
<p>Please enter an amount </p>
<p>
<label>
Currency:
<input name="name" type="text" id="first" size="15"
maxlength="10">
</label>
</p>
<input type="button" value="=" onclick="convert()" />
<div id="box2">
<p>Type a country or a currency</p>
<p>
<label for="txtList">
<input type="text" id="txtList2"
placeholder="Euro (EUR)" list="currencies" />
<datalist id="Datalist1">
<option value="United States Dollars (USD)">
<option value="Euro(EUR)">
<option value="Albania (LEK)">
<option value="Paunds (PAUND)">
</datalist>
</label>
</p>
<nav>
Browse All
<ul>
<li><a href="#">United States Dollars (USD)</a></li>
<li><a href="#">Euro(EUR)</a></li>
<li><a href="#">Albania (LEK)</a></li>
<li><a href="#">Paunds (PAUND)</a></li>
</ul>
</nav>
<p>Please enter an amount </p>
<p>
<label>
Currency:
<input name="name" type="text" id="second" size="15"
maxlength="10">
</label>
</p>
</div>
</form>
</div>
</body>
</html>
&#13;