CF上的Workers搭建汇率计算器
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
async function handleRequest(request) {
const url = new URL(request.url)
// 处理 GET 请求，返回 HTML 页面
if (request.method === 'GET' && url.pathname === '/') {
return new Response(htmlContent, {
headers: { 'Content-Type': 'text/html' }
})
}
// 处理汇率查询请求
if (request.method === 'GET' && url.pathname === '/exchange-rate') {
const fsym = url.searchParams.get('fsym')
const tsym = url.searchParams.get('tsym') || 'CNY'
try {
let rate
const resp = await fetch(`https://api.exchangerate-api.com/v4/latest/${fsym}`)
const data = await resp.json()
if (data.rates[tsym]) {
rate = data.rates[tsym]
} else {
const resp2 = await fetch(`https://womjj.deno.dev/rate?fsym=${fsym}&tsym=${tsym}`)
const obj = await resp2.json()
rate = obj[tsym] || obj['CNY']
}
return new Response(JSON.stringify({ rate }), {
headers: { 'Content-Type': 'application/json' }
})
} catch (error) {
return new Response(JSON.stringify({ error: '获取汇率失败' }), {
status: 500,
headers: { 'Content-Type': 'application/json' }
})
}
}
return new Response('Not Found', { status: 404 })
}
// 嵌入 HTML 页面内容
const htmlContent = `
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>📅汇率转换器</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; background-image: url('https://xxq.dpdns.org/'); background-size: cover; background-position: center; height: 100vh; margin: 0; display: flex; justify-content: center; align-items: center; }
.sites { width:400px; background-color: rgba(211, 211, 211, 0.2); border:1px solid rgba(0,0,0,.02); margin:1px auto; border-radius: 8px; padding:1px; }
.converter {
background-color: rgba(245, 245, 245,0.2);
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
h1 {
color: #000000;
text-align: center;
}
.input-group {
margin-bottom: 15px;
max-width: 440px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
select, input {
width: 100%;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 15px;
width: 100%;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
padding: 15px;
background-color: #dff0d8;
border-radius: 4px;
text-align: center;
font-size: 18px;
}
.rate-info {
margin: 5px 0;
color: #666;
font-size: 18px;
max-width: 240px;
border-radius: 5px; /* 四角弧度，一般高为5，50为圆*/
background-color: #E6E6FA;
}
.footer{
color: #000000;
max-width: 500px;
text-align:center;
margin:2px auto;
padding:1px;
background-color: rgba(245, 245, 245,0.2);
border-radius: 8px; /* 四角弧度，一般高为5，50为圆*/
}
</style>
</head>
<body>
<div class="sites">
<div class="converter">
<h1>📅汇率转换</h1>
<div class="input-group">
<label for="currency">选择货币:</label>
<select id="currency">
<option value="USD" selected>美元 (USD)</option>
<option value="CNY">人民币 (CNY)</option>
<option value="EUR">欧元 (EUR)</option>
<option value="GBP">英镑 (GBP)</option>
<option value="JPY">日元 (JPY)</option>
<option value="SGD">新加坡元 (SGD)</option>
<option value="HKD">港币 (HKD)</option>
<option value="CAD">加拿大元 (CAD)</option>
<option value="AUD">澳大利亚元 (AUD)</option>
<option value="KRW">韩元 (KRW)</option>
<option value="TWD">新台币 (TWD)</option>
<option value="VND">越南盾 (VND)</option>
<option value="RUB">俄罗斯卢布 (RUB)</option>
<option value="MMK">缅甸元 (MMK)</option>
<option value="CHF">瑞士法郎 (CHF)</option>
<option value="INR">印度卢比 (INR)</option>
<option value="PKR">巴基斯坦卢比 (PKR)</option>
<option value="ANG">荷兰盾 (ABG)</option>
<option value="ARS">阿根廷比索 (ARS)</option>
<option value="UAH">乌克兰格里夫纳 (UAH)</option>
</select>
</div>
<div class="input-group">
<label for="amount">输入金额:</label>
<input type="number" id="amount" placeholder="输入要转换的金额" value="1">
</div>
<div class="input-group">
<label for="targetCurrency">目标货币:</label>
<select id="targetCurrency">
<option value="USD">美元 (USD)</option>
<option value="CNY" selected>人民币 (CNY)</option>
<option value="EUR">欧元 (EUR)</option>
<option value="GBP">英镑 (GBP)</option>
<option value="JPY">日元 (JPY)</option>
<option value="SGD">新加坡元 (SGD)</option>
<option value="HKD">港币 (HKD)</option>
<option value="CAD">加拿大元 (CAD)</option>
<option value="AUD">澳大利亚元 (AUD)</option>
<option value="KRW">韩元 (KRW)</option>
<option value="TWD">新台币 (TWD)</option>
<option value="VND">越南盾 (VND)</option>
<option value="RUB">俄罗斯卢布 (RUB)</option>
<option value="MMK">缅甸元 (K)</option>
<option value="CHF">瑞士法郎 (CHF)</option>
<option value="INR">印度卢比 (INR)</option>
<option value="PKR">巴基斯坦卢比 (PKR)</option>
<option value="ANG">荷兰盾 (ABG)</option>
<option value="ARS">阿根廷比索 (ARS)</option>
<option value="UAH">乌克兰格里夫纳 (UAH)</option>
</select>
<div class="rate-info" id="rateInfo"></div>
</div>
<button onclick="convertCurrency()">点击转换</button>
<div class="result" id="result">结果将在这里显示</div>
</div>
<script>
document.getElementById('amount').addEventListener('input', convertCurrency);
document.getElementById('currency').addEventListener('change', convertCurrency);
document.getElementById('targetCurrency').addEventListener('change', convertCurrency);
async function convertCurrency() {
const currency = document.getElementById('currency').value;
const targetCurrency = document.getElementById('targetCurrency').value;
const amount = parseFloat(document.getElementById('amount').value);
if (isNaN(amount)) {
document.getElementById('result').innerHTML = '请输入有效的金额';
return;
}
try {
const response = await fetch('/exchange-rate?fsym=' + currency + '&tsym=' + targetCurrency);
const { rate } = await response.json();
const result = amount * rate;
document.getElementById('rateInfo').innerHTML =
'汇率: 1 ' + currency + ' = ' + rate + ' ' + targetCurrency;
document.getElementById('result').innerHTML =
amount + ' ' + currency + ' = ' + result.toFixed(2) + ' ' + targetCurrency;
} catch (error) {
document.getElementById('result').innerHTML = '获取汇率失败，请稍后再试';
document.getElementById('rateInfo').innerHTML = '';
console.error('汇率获取失败:', error);
}
}
</script>
<div class="footer">
<!-- 开站时间开始 -->
<span id="timeDate">载入天数...</span>
<script language="javascript">
var now = new Date();
function createtime(){
var grt= new Date("7/2/2025 00:00:00");/*---这里是网站的启用时间--*/
now.setTime(now.getTime()+250);
days = (now - grt ) / 1000 / 60 / 60 / 24;
dnum = Math.floor(days);
document.getElementById("timeDate").innerHTML = "运行"+dnum+"天";
}
setInterval("createtime()",250);
</script>
<span <p> | 总访问量 <span id="busuanzi_site_pv"></span> 次 </p></span>
<span <p> <a href="https://keplu.eu.org/" target="_blank"> <span style="color: green;">vps计算器 | <a href="https://pass.keplu.eu.org/" target="_blank"> <span style="color: blue;">密码和UUID</p></span>
<script defer src="https://bsz.211119.xyz/js"></script>
<!-- 开站时间结束 -->
</body>
</html>
`
暂无留言