cssmini.github.io/risk-calculator.html at master · cssmini/cssmini.github.io · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Risk Calculator</title>
    <!-- 引入 layui.css -->
    <link href="//unpkg.com/layui@2.7.6/dist/css/layui.css" rel="stylesheet">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.7.6/dist/layui.js"></script>
    <!-- 引入 jquery.js -->
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <style>
        .main-body{
            width: 1200px;
            height: 800px;
            padding-top: 100px;
            margin: 0 auto;
        }
        footer{
            margin-top: 50px;
        }
        footer div{
            text-align: center;
            color: #999;
        }
        .index_page{
            color: #5FB878;
        }
    </style>
</head>
<body>
    <div class="main-body">
        <div class="layui-tab">
            <ul class="layui-tab-title">
                <li class="layui-this">Risk Calculator</li>
                <li>Trade Log Record</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <blockquote class="layui-elem-quote">Risk Calculator</blockquote>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Enter Point</label>
                        <div class="layui-input-inline">
                            <input type="number" name="enterPoint" required lay-verify="required" placeholder="input enter point" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">Where are you enter point.</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">SL Point</label>
                        <div class="layui-input-inline">
                            <input type="number" name="stopLose" required lay-verify="required" placeholder="input stop lose point" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">Where will you stop lose.</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">TP Point</label>
                        <div class="layui-input-inline">
                            <input type="number" name="takePrice" required lay-verify="required" placeholder="input take price point" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">Where will you take price.</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Risk</label>
                        <div class="layui-input-inline">
                            <input type="number" name="risk" required lay-verify="required" placeholder="input risk" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">The money you acceptable to lose.</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Leverage</label>
                        <div class="layui-input-inline">
                            <input type="number" disabled name="leverage" placeholder="0.0" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">The leverage you should use. (EnterPoint * 0.01 / SL_Offset * 100).toFixed(2)</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Direction</label>
                        <div class="layui-input-inline">
                            <input type="text" disabled name="direction" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">Your direction.</div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">Expect</label>
                        <div class="layui-input-inline">
                            <input type="text" disabled name="expect" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid layui-word-aux">If you won this trade you will got. (TP_Gffset / (EnterPoint * 0.01) * Risk).toFixed(2)</div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button id="calculateBtn" class="layui-btn" lay-submit lay-filter="formDemo">calculate</button>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">Nothing now...</div>
            </div>
        </div>
        <footer>
            <div>create by <a class="index_page" href="https://www.cssmini.com" target="_blank">cssmini</a></div>
        </footer>
    </div>
    <script>
        $(function () {
            //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;

                //…
            });

            $("#calculateBtn").click(function () {
                const enterPoint = $("input[name='enterPoint']").val()
                const stopLose = $("input[name='stopLose']").val()
                const takePrice = $("input[name='takePrice']").val()
                const risk = $("input[name='risk']").val()
                const direction = Number(enterPoint) > Number(stopLose) ? true : false
                let sl_offset = 0
                let tp_offset = 0

                if (direction){
                    $("input[name='direction']").val('Long')
                    sl_offset = enterPoint - stopLose
                    tp_offset = takePrice - enterPoint
                }else{
                    $("input[name='direction']").val('Short')
                    sl_offset = stopLose - enterPoint
                    tp_offset = enterPoint - takePrice
                }
                const leverage = (enterPoint * 0.01 / sl_offset * 100).toFixed(2)
                const expect = (tp_offset / (enterPoint * 0.01) * risk).toFixed(2)
                $("input[name='leverage']").val(leverage)
                $("input[name='expect']").val(expect)
            })
        })
    </script>
</body>
</html>