js和html通过选择货币更改物品的实际价格的具体实现代码
时间: 2024-02-05 10:10:41 浏览: 27
以下是一个简单的例子,通过选择货币更改物品的实际价格,使用 JavaScript 和 HTML 实现:
HTML 代码:
```html
<select id="currency">
<option value="USD">USD</option>
<option value="EUR">EUR</option>
<option value="GBP">GBP</option>
</select>
<p>Price: <span id="price"></span></p>
```
JavaScript 代码:
```javascript
// 定义物品的价格(以美元为单位)
var priceUSD = 10;
// 定义货币转换率
var exchangeRates = {
USD: 1,
EUR: 0.85,
GBP: 0.75
};
// 获取选择的货币
var currencySelect = document.getElementById("currency");
var currency = currencySelect.value;
// 更新实际价格
function updatePrice() {
var price = priceUSD * exchangeRates[currency];
var priceSpan = document.getElementById("price");
priceSpan.innerHTML = price.toFixed(2) + " " + currency;
}
// 当选择的货币发生变化时更新价格
currencySelect.addEventListener("change", function() {
currency = currencySelect.value;
updatePrice();
});
// 初始化价格
updatePrice();
```
在这个例子中,当用户选择不同的货币时,JavaScript 代码会计算实际价格并将其更新到 HTML 页面上。这个例子只是一个简单的示例,实际应用中可能需要更复杂的逻辑来管理货币转换和价格更新。