Javascript代码:动态更改货币与下拉HTML

Javascript code: dynamically change currencies with dropdown HTML

本文关键字：HTML 货币 代码 动态 Javascript      更新时间：2023-09-26

我一整天都在寻找这个-当从下拉菜单中选择国家或货币时，在整个页面更改货币。

我基本上需要的是一个显示国家或货币的下拉菜单。当您选择其中任何一个，如美元，所有的价格在整个页面更改为美元。现在如果你改变它AUD/CAD/PKR等，他们会相应改变。我基本上需要它在Javascript，但如果有人可以提供它在PHP，这将是好的了。

一个很好的例子是:http://creativeon.com当你从右上方的下拉菜单更改货币时，它会更改主内容中所有包的货币。

我是一名HTML开发人员，对javascript了解不多。请帮帮我。

注:我也搜索了codingforums.com，发现只有两个链接不是我使用的，因为它们是货币转换器:

  1. http://www.codingforums.com/showthread.php?t=196577
  2. http://www.codingforums.com/showthread.php?t=196373

web应用的美妙之处在于，你可以通过查看源代码(使用FF中的Firebug插件)来借鉴好的想法。正如您在示例中所看到的，当选择不同的货币时，页面会重新加载:

$('#Items, #Items_input').change(function(){
    $.post('/conlogic/ajax.php?action=currency',
        {'curr': $(this).val()},
        function(data){
            if ( data=="OK" ) window.location.reload();
        });
});

显然，在这种情况下，页面是用不同的货币在服务器端重新呈现的。

我写了一个javascript版本。没有Ajax，货币兑换率是从谷歌借来的。

  <select id="currencySelector">
    <option value="usd">USD</option>
    <option value="aud">AUD</option>
    <option value="eur">EUR</option>
    <option value="gbp">GBP</option>
  </select>
  <div class="currency" data-currencyName="usd">15<span>USD</span></div>
  <div class="currency" data-currencyName="eur">15<span>EUR</span></div>
  <div class="currency" data-currencyName="gbp">15<span>BGP</span></div>
  <div class="currency" data-currencyName="aud">15<span>AUD</span></div>
Javascript代码

var 
    selector = document.getElementById("currencySelector");
var
    currencyElements = document.getElementsByClassName("currency");
var 
    usdChangeRate = {
      AUD: 1.0490, // 1AUD = 1.0490 USD
      EUR: 1.4407, // 1EUR = 1.4407 USD
      GBP: 1.6424,
      USD: 1.0
    };
selector.onchange = function () {
    var 
        toCurrency = selector.value.toUpperCase();
    for (var i=0,l=currencyElements.length; i<l; ++i) {
        var 
            el = currencyElements[i];
        var 
            fromCurrency = el.getAttribute("data-currencyName").toUpperCase();
      if (fromCurrency in usdChangeRate) {
          var 
              // currency change to usd
              fromCurrencyToUsdAmount = parseFloat(el.innerHTML) * usdChangeRate[fromCurrency];
          var 
              // change to currency unit selected
              toCurrenyAmount = fromCurrencyToUsdAmount / usdChangeRate[toCurrency];
          el.innerHTML = toCurrenyAmount + "<span>" + toCurrency.toUpperCase() + "</span>";
          el.setAttribute("data-currencyName",toCurrency);
      }
    }
};

运行代码

您可以在http://jsbin.com/ewuyoq/5上运行上面的代码，或者构建您自己的版本http://jsbin.com/ewuyoq/5/edit

我将使用jQuery，所以如果您不想使用外部库，请随意忽略我的答案。可以在www.jquery.com上找到。

首先，为所有需要更改货币的地方创建一个span，赋予它"currency"类，并在name属性中，将值放入"基础货币"中。例子:

<span class="currency" name="499"> 499 </span>

然后你可以创建一个按钮，设它的id为"showInEuro" 

<input type="button" id="showInEuro" />

然后编写类似的jQuery代码:

var usdToEuroExchRate = 1.5; // Obviously just a magic constant
// When the button is clicked
$("#showInEuro").click(function() {
     // Iterate through all of the currency spans
    $("span.currency").each(function(index) {
        // And take their names times the exchangerate and put it in the span.
        $(this).text($(this).attr("name") * usdToEuroExchRate);
    });
});

当然，你应该尝试使用真实的、实时的汇率。

我为你做了一个JSFiddle: http://jsfiddle.net/An3v9/9/

相关文章：