用javascript交换程序

时间:2016-11-28 17:51:24

标签: javascript html css

我正在尝试用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>

1 个答案:

答案 0 :(得分:0)

我不确定你打算写什么逻辑。但现在它将适用于两组值。在第一个下拉列表中选择Euro并在文本框中输入一些数字。同样,选择阿尔巴尼亚&#39;在第二次下拉菜单中,按下&#39; =&#39;按钮。现在第二个文本框将具有转换后的值。

这将开始。 :)

&#13;
&#13;
<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;
&#13;
&#13;