-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
148 lines (140 loc) · 4.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>永續合約倉位計算機</title>
<script src="calculate.js"></script>
<link rel="manifest" href="/manifest.json" />
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="icon" href="Icon/Charming.ico" type="image/x-icon" />
<link rel="shortcut icon" href="Icon/Charming.ico" type="image/x-icon" />
<!-- 字體 -->
<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=Bungee+Hairline&display=swap"
rel="stylesheet"
/>
<!-- -->
<script>
// 初始化一個變量來儲存當前的方向
var currentDirection = "long";
// 當頁面加載完畢後，設定按鈕的點擊事件
window.onload = function () {
// 預設為做多
selectDirection("long");
document
.getElementById("confirm")
.addEventListener("click", function () {
// 從輸入欄位獲取數值
const positionSize = document.getElementById("position-size").value;
const openingPrice = document.getElementById("opening-price").value;
const stopLossPrice =
document.getElementById("stop-loss-price").value;
const maxLoss = document.getElementById("max-loss").value;
// 調用 calculateResult 函數進行計算
const result = calculateResult(
currentDirection,
positionSize,
openingPrice,
stopLossPrice,
maxLoss
);
// 將結果顯示在 result 元素中
document.getElementById("result").innerText =
"結果：" + result.toFixed(2);
});
};
// 更新方向選擇的函數
function selectDirection(direction) {
var longButton = document.getElementById("long");
var shortButton = document.getElementById("short");
//移除所有按鈕上的 'selected' 和 'unselected' 類別
longButton.classList.remove("selected", "unselected");
shortButton.classList.remove("selected", "unselected");
// 根據選擇的方向添加類別
if (direction == "long") {
longButton.classList.add("selected");
shortButton.classList.add("unselected");
} else {
shortButton.classList.add("selected");
longButton.classList.add("unselected");
}
}
</script>
</head>
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-8790D4VM82"
></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-8790D4VM82");
</script>
<body>
<div class="image-container">
<a href="https://twitter.com/CryptoCharming1" target="_blank">
<img
src="header_Pic/header_pic.png"
alt="Header Image"
id="header-image"
class="headerimage2"
/>
</a>
</div>
<div><p></p></div>
<div class="big-container">
<div class="container">
<div class="radio-group">
<button
type="button"
id="long"
class="radio-button"
onclick="selectDirection('long')"
>
做多
</button>
<button
type="button"
id="short"
class="radio-button"
onclick="selectDirection('short')"
>
做空
</button>
</div>
<div>
<label for="position-size">倉位大小：</label>
<input type="number" id="position-size" value="100" />
</div>
<div>
<label for="opening-price">開倉價格：</label>
<input type="number" id="opening-price" />
</div>
<div>
<label for="stop-loss-price">止損價格：</label>
<input type="number" id="stop-loss-price" />
</div>
<div>
<label for="max-loss">最大可接受虧損金額：</label>
<input type="number" id="max-loss" value="30" />
</div>
<div>
<button id="confirm">確認</button>
</div>
<div id="result">
槓桿倍數
<div id="resultSpan" class="resultSpan"></div>
</div>
</div>
<div><p></p></div>
<div class="rightTitle">Made by @CryptoCharming1</div>
</div>
</body>
</html>