文章详情

返回首页

CF上的Workers搭建汇率计算器

分享文章 作者: Ws01 创建时间: 2025-11-24 📝 字数: 10,043 字 👁️ 阅读: 9 次
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> `