Javascript代码：使用下拉菜单动态更改货币HTML

我一直在寻找这一整天 - 通过下拉菜单在国家或货币之间进行选择时更改整个页面的货币。Javascript代码：使用下拉菜单动态更改货币HTML

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

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

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

P.S.我已搜查codingforums.com过，发现只有两个环节这是我使用的不是因为它们的货币转换：

来源

2011-08-17 HTML Boy

您应该开始学习编程并提出编程问题，而不是脚本...... – Catalin

在飞行中进行这些类型的转换充满危险，除非您实际上以所有列出的货币对其进行结算（例如，如果您以美元结算，但您已经以加元显示价格并且汇率发生变化，它们将以与所报价格不同的价格收费）。更好地坚持使用一种货币，并将转换交给客户，以找到自己的资源进行计算。或者，如果不这样做，请聘请一位编码员为您制作 - 这里没有免费午餐。 –

这听起来有点像'给我这个代码请，kthxbye'的问题。我们不是在这里给你全面的工作解决方案。如果您遇到困难，我们会帮助您。此外，您的问题可能不会仅限于前端问题。您可能需要与后端进行交互以获取其他货币的价格，除非后端已经在某些javascript数据对象中提供了它们。 –

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(); 
     }); 
});

与不同的货币显然，在这种情况下，该网页重新渲染服务器端。

来源

2011-08-17 07:16:13

我会使用jQuery，所以随时忽略我的答案，如果你不想使用外部库。它可以在www.jquery.com上找到。

首先，你为货币应该改变的所有地方做一个跨度，给它类“货币”，并在名称属性中，你把价值放在你的“基础货币”。例如：

<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/

来源

2011-08-17 07:20:22

我写了一个JavaScript版本。没有阿贾克斯，货币变化率是从谷歌借来的。

HTML代码

<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

来源

2011-08-17 08:01:50 wukong

Javascript代码：使用下拉菜单动态更改货币HTML

回答

相关问题