-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
176 lines (176 loc) · 9.34 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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<!DOCTYPE html>
<html lang="zh-Hant-TW">
<head>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-SQ9REF9DNR"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-SQ9REF9DNR');
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1523667193708406" crossorigin="anonymous"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="Memo Chou">
<meta name="description" content="簡單易用的股票交易計算器。根據交易類別、買入價格、賣出價格、交易股數，計算成交價格、支付總金額、實收總金額、買入手續費、賣出手續費、證券交易稅、損益金額、報酬率。">
<meta name="keywords" content="台股, 股市, 股票, 股票交易, 股票交易計算器, 股票交易計算機, 計算器, 計算機">
<meta property="og:type" content="website">
<meta property="og:title" content="股票交易計算器">
<meta property="og:description" content="簡單易用的股票交易計算器。根據交易類別、買入價格、賣出價格、交易股數，計算成交價格、支付總金額、實收總金額、買入手續費、賣出手續費、證券交易稅、損益金額、報酬率。">
<meta property="og:image" content="https://stock.epoch.tw/images/cover.png">
<meta property="og:image:alt" content="股票交易計算器">
<meta property="og:image:type" content="image/png">
<meta name="theme-color" content="white">
<title>股票交易計算器</title>
<link rel="icon" href="images/icon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="manifest" href="manifest.json">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="./">股票交易計算器</a>
<div class="ml-auto text-white">
<button class="btn btn-sm btn-outline-light" data-toggle="modal" data-target="#modal-configure">
設定
</button>
<button class="btn btn-sm btn-outline-warning" data-toggle="modal" data-target="#modal-share">
分享
</button>
</div>
</nav>
<div class="container my-4 my-md-5">
<div class="row">
<div class="col-md-3">
<div class="form-group mb-4">
<label for="交易類別">交易類別</label>
<select class="form-control form-control-sm" id="交易類別">
<option value="現股">現股</option>
<option value="現股當沖">現股當沖</option>
<option value="ETF">ETF</option>
</select>
</div>
</div>
<div class="col-md-3">
<div class="form-group mb-4">
<label for="買入價格">買入價格</label>
<input type="number" inputmode="decimal" class="form-control form-control-sm" autocomplete="off" step="0.1" min="0" max="10000" id="買入價格" autofocus>
</div>
</div>
<div class="col-md-3">
<div class="form-group mb-4">
<label for="賣出價格">賣出價格</label>
<input type="number" inputmode="decimal" class="form-control form-control-sm" autocomplete="off" step="0.1" min="0" max="10000" id="賣出價格">
</div>
</div>
<div class="col-md-3">
<div class="form-group mb-4">
<label for="交易股數">交易股數</label>
<input type="number" inputmode="numeric" value="1000" class="form-control form-control-sm" autocomplete="off" step="1000" min="0" max="100000000" id="交易股數">
</div>
</div>
</div>
<table class="table table-sm table-bordered table-striped table-responsive-md mb-4" id="表格" hidden>
<thead class="thead-dark">
<tr class="text-center">
<th>成交價格</th>
<th class="詳細欄位" hidden>支付總金額</th>
<th class="詳細欄位" hidden>實收總金額</th>
<th class="詳細欄位" hidden>買入手續費</th>
<th class="詳細欄位" hidden>賣出手續費</th>
<th class="詳細欄位" hidden>證券交易稅</th>
<th>損益金額</th>
<th>報酬率</th>
</tr>
</thead>
<tbody id="報價"></tbody>
</table>
<div class="jumbotron my-4 py-4">
<p class="lead">使用說明</p>
<hr>
<ul class="mb-0">
<li>公定手續費費率：0.1425%</li>
<li>證券交易稅稅率：0.3%</li>
<li>現股當沖證券交易稅稅率：0.15%</li>
<li>指數股票型基金（ETF）證券交易稅稅率：0.1%</li>
<li>小數點按四捨五入計算</li>
<li>電腦版可使用上下鍵調整價格</li>
<li>手機版可加入主畫面離線使用</li>
</ul>
</div>
<div class="text-center mt-md-5" id="footer">
Designed by <a href="https://profile.epoch.tw/" rel="noopener noreferrer" target="_blank">Memo Chou</a>
</div>
</div>
<div class="modal fade" id="modal-configure" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
設定
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group">
<label for="模式">模式</label>
<select class="form-control form-control-sm" id="模式">
<option value="簡易" selected>簡易</option>
<option value="詳細">詳細</option>
</select>
</div>
<div class="form-group">
<label for="最低手續費">最低手續費</label>
<input type="number" inputmode="numeric" class="form-control form-control-sm" autocomplete="off" step="1"" min="0" max="20" id="最低手續費">
<small class="form-text text-secondary">請輸入 0 至 20 之間的數值</small>
</div>
<div class="form-group">
<label for="手續費折扣">手續費折扣</label>
<input type="number" inputmode="decimal" class="form-control form-control-sm" autocomplete="off" step="0.05" min="0.1" max="1" id="手續費折扣">
<small class="form-text text-secondary">請輸入 0.1 至 1 之間的數值</small>
</div>
<div class="form-group">
<label for="報價檔數">報價檔數</label>
<input type="number" inputmode="numeric" class="form-control form-control-sm" autocomplete="off" step="1" min="0" max="50" id="報價檔數">
<small class="form-text text-secondary">請輸入 0 至 50 之間的數值</small>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="modal-share" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">
分享
</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group mb-0">
<input type="text" class="form-control form-control-sm mb-3" value="https://stock.epoch.tw/" readonly id="網址">
<button class="btn btn-sm btn-block btn-warning" id="複製網址">複製網址</button>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./service-worker.js');
});
}
</script>
</body>
</html>