-
Notifications
You must be signed in to change notification settings - Fork 10
/
Copy pathindex.html
121 lines (113 loc) · 5.96 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>剩余价值计算器 / Remaining Value Calculator</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<!-- <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500&display=swap" rel="stylesheet"> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
<canvas id="canvas"></canvas>
<div class="bg"></div>
<div class="main">
<h2>剩余价值计算器</h2>
<!-- 表单 -->
<div class="calculator card">
<label class="pc">参考汇率
<span class="update-time">(更新时间: <span id="updateDate">0000/00/00</span></span>
<!-- <br> -->
<span class="update-source">数据来源: <a href="https://www.exchangerate-api.com" class="custom-link" target="_blank">Exchangerate-API.com</a>)</span>
</label>
<label class="mobile">参考汇率
<span class="update-time">更新时间: <span id="updateDate">0000/00/00</span></span>
<br>
<span class="update-source">(数据来源: <a href="https://www.exchangerate-api.com" class="custom-link" target="_blank">Exchangerate-API.com</a>)</span>
</label>
<input type="text" id="exchangeRate" readonly value="0.000">
<label>自定汇率</label>
<input type="text" id="customRate" value="0.000">
<label>续费金额和币种</label>
<div class="input-group">
<input type="number" id="amount" value=""> <!-- 默认空白 -->
<select id="currency" onchange="fetchExchangeRate()">
<option value="AUD">澳币 (AUD)</option>
<option value="CAD">加拿大元 (CAD)</option>
<option value="CNY">人民币 (CNY)</option>
<option value="EUR">欧元 (EUR)</option>
<option value="GBP">英镑 (GBP)</option>
<option value="HKD">港元 (HKD)</option>
<option value="JPY">日元 (JPY)</option>
<option value="KRW">韩元 (KRW)</option>
<option value="SGD">新加坡元 (SGD)</option>
<option value="TWD">新台币 (TWD)</option>
<option value="USD" selected>美元 (USD)</option> <!-- 默认选择美元 -->
</select>
</div>
<label>续费周期</label> <!-- 修改标题为续费周期 -->
<select id="cycle">
<option value="1">月付</option>
<option value="3">季付</option>
<option value="6">半年付</option>
<option value="12" selected>年付</option>
<option value="24">两年付</option>
<option value="36">三年付</option>
<option value="60">五年付</option>
</select>
<div class="input-group">
<div style="width: 48%;"> <!-- 保证宽度一致 -->
<label>到期时间</label>
<input type="date" class="date-picker" id="expiryDate">
</div>
<div style="width: 48%;"> <!-- 保证宽度一致 -->
<label>交易日期</label>
<input type="date" class="date-picker" id="transactionDate">
</div>
</div>
<label>出价金额</label>
<input type="number" id="bidAmount" value=""> <!-- 默认空白 -->
<button class="btn btn-primary" onclick="generateResult()">计算剩余价值</button>
</div>
<!-- 计算结果表格 -->
<div id="calcResult" class="result">
<h3>计算结果</h3>
<table class="result-table">
<tr>
<th>交易日期：</th>
<td id="resultDate">0000-00-00</td>
</tr>
<tr>
<th>外币汇率：</th>
<td id="resultForeignRate">0.00</td>
</tr>
<tr>
<th>续费价格：</th>
<td id="resultPrice">0.00 人民币/年</td>
</tr>
<tr>
<th>剩余天数：</th>
<td><span id="resultDays">0</span> 天 (于 <span id="resultExpiry">0000-00-00</span> 过期)</td>
</tr>
<tr>
<th>剩余价值：</th>
<td><span id="resultValue" class="result-value">0.000 元</span></td>
</tr>
<tr>
<th>溢价金额：</th>
<td><span id="premiumValue" class="result-value">0.000 元</span></td>
</tr>
</table>
</div>
<footer style="margin-top: 20px; text-align: center; font-size: 0.9rem; color: #333;">
本项目开源于 <a href="https://github.com/SolaireH3/calculator" target="_blank" class="custom-link">GitHub</a>
</footer>
</div>
<script src="./js/bg.js"></script>
<script src="./js/index.js"></script>
</body>
</html>