API tools faq
paste
iamtalkers

분할매매계산기

iamtalkers
Aug 6th, 2025
293
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 24.70 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1" />
  6. <title>모듈형 매매법 분할매수 계산기</title>
  7. <style>
  8. /*
  9. * 모든 CSS 스타일을 '#calculator-root' ID 내부로 범위화하여
  10. * 다른 웹사이트의 전역 CSS와 충돌하지 않도록 합니다.
  11. */
  12. #calculator-root {
  13. font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  14. max-width: 1000px;
  15. margin: 20px auto; /* 중앙 정렬 및 상하 여백 추가 */
  16. padding: 0; /* 루트 컨테이너 자체의 패딩은 제거 */
  17. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  18. border-radius: 20px; /* 컨테이너 자체에도 둥근 모서리 적용 */
  19. box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  20. position: relative; /* 커스텀 알림을 위한 기준점 */
  21. overflow: hidden; /* 자식 요소가 넘치지 않도록 */
  22. }
  23.  
  24. /* 기존 body 스타일 중 계산기에 필요한 부분만 #calculator-root 내부로 이동 */
  25. #calculator-root .container {
  26. background: rgba(255, 255, 255, 0.95);
  27. border-radius: 20px;
  28. padding: 30px;
  29. box-shadow: 0 20px 40px rgba(0,0,0,0.1);
  30. backdrop-filter: blur(10px); /* Frosted glass effect */
  31. width: 100%; /* Ensure container takes full width of max-width */
  32. box-sizing: border-box; /* Include padding in width calculation */
  33. }
  34.  
  35. #calculator-root h1 {
  36. text-align: center;
  37. color: #333;
  38. margin-bottom: 30px;
  39. font-size: 2.2em;
  40. background: linear-gradient(135deg, #667eea, #764ba2);
  41. -webkit-background-clip: text;
  42. -webkit-text-fill-color: transparent;
  43. }
  44.  
  45. /* Styling for the input section */
  46. #calculator-root .input-section {
  47. background: #f8f9fa;
  48. padding: 25px;
  49. border-radius: 15px;
  50. margin-bottom: 30px;
  51. border: 2px solid #e9ecef;
  52. }
  53.  
  54. /* Grid layout for input groups for responsiveness */
  55. #calculator-root .input-group {
  56. display: grid;
  57. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  58. gap: 20px;
  59. margin-bottom: 20px;
  60. }
  61.  
  62. #calculator-root .input-item {
  63. display: flex;
  64. flex-direction: column;
  65. }
  66.  
  67. #calculator-root label {
  68. font-weight: bold;
  69. color: #495057;
  70. margin-bottom: 8px;
  71. font-size: 14px;
  72. }
  73.  
  74. #calculator-root input, #calculator-root select {
  75. padding: 12px 15px;
  76. border: 2px solid #dee2e6;
  77. border-radius: 10px;
  78. font-size: 16px;
  79. transition: all 0.3s ease;
  80. background: white;
  81. box-sizing: border-box; /* Include padding in width calculation */
  82. }
  83.  
  84. #calculator-root input:focus, #calculator-root select:focus {
  85. outline: none;
  86. border-color: #667eea;
  87. box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  88. }
  89.  
  90. /* Button styling */
  91. #calculator-root button {
  92. background: linear-gradient(135deg, #667eea, #764ba2);
  93. color: white;
  94. border: none;
  95. padding: 12px 30px;
  96. border-radius: 10px;
  97. font-size: 16px;
  98. font-weight: bold;
  99. cursor: pointer;
  100. transition: all 0.3s ease;
  101. margin-top: 10px;
  102. width: 100%; /* Make button full width on smaller screens */
  103. }
  104.  
  105. #calculator-root button:hover {
  106. transform: translateY(-2px);
  107. box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
  108. }
  109.  
  110. /* Result table styling */
  111. #calculator-root .result-table {
  112. background: white;
  113. border-radius: 15px;
  114. overflow: hidden; /* Ensures rounded corners for table */
  115. box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  116. margin-top: 20px; /* Add some space above the table */
  117. }
  118.  
  119. #calculator-root table {
  120. width: 100%;
  121. border-collapse: collapse;
  122. }
  123.  
  124. #calculator-root th {
  125. background: linear-gradient(135deg, #667eea, #764ba2);
  126. color: white;
  127. padding: 15px;
  128. text-align: center;
  129. font-weight: bold;
  130. font-size: 14px;
  131. }
  132.  
  133. #calculator-root td {
  134. padding: 12px 15px;
  135. text-align: center;
  136. border-bottom: 1px solid #f1f3f4;
  137. font-size: 14px;
  138. }
  139.  
  140. #calculator-root tr:nth-child(even) {
  141. background-color: #f8f9fa;
  142. }
  143.  
  144. #calculator-root tr:hover {
  145. background-color: #e3f2fd;
  146. transition: all 0.3s ease;
  147. }
  148.  
  149. /* Summary section styling */
  150. #calculator-root .summary {
  151. background: linear-gradient(135deg, #667eea, #764ba2);
  152. color: white;
  153. padding: 20px;
  154. border-radius: 15px;
  155. margin-top: 20px;
  156. text-align: center;
  157. }
  158.  
  159. #calculator-root .summary h3 {
  160. margin: 0 0 10px 0;
  161. font-size: 18px;
  162. }
  163.  
  164. #calculator-root .summary p {
  165. margin: 5px 0;
  166. font-size: 14px;
  167. opacity: 0.9;
  168. }
  169.  
  170. /* Custom Alert Styles - 이제 #calculator-root 내부에서 절대 위치를 사용합니다. */
  171. #calculator-root .custom-alert {
  172. position: absolute; /* 부모 컨테이너에 상대적으로 위치 */
  173. top: 0;
  174. left: 0;
  175. width: 100%;
  176. height: 100%;
  177. background: rgba(0, 0, 0, 0.5);
  178. display: flex;
  179. justify-content: center;
  180. align-items: center;
  181. z-index: 1000;
  182. }
  183.  
  184. #calculator-root .custom-alert-content {
  185. background: white;
  186. padding: 30px;
  187. border-radius: 15px;
  188. box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  189. text-align: center;
  190. max-width: 400px;
  191. width: 90%;
  192. }
  193.  
  194. #calculator-root .custom-alert-content p {
  195. margin-bottom: 20px;
  196. font-size: 18px;
  197. color: #333;
  198. }
  199.  
  200. #calculator-root .custom-alert-content button {
  201. background: linear-gradient(135deg, #667eea, #764ba2);
  202. color: white;
  203. border: none;
  204. padding: 10px 25px;
  205. border-radius: 8px;
  206. font-size: 16px;
  207. cursor: pointer;
  208. transition: all 0.3s ease;
  209. }
  210.  
  211. #calculator-root .custom-alert-content button:hover {
  212. transform: translateY(-1px);
  213. box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
  214. }
  215.  
  216. /* Responsive adjustments for smaller screens */
  217. @media (max-width: 768px) {
  218. #calculator-root .input-group {
  219. grid-template-columns: 1fr; /* Stack inputs vertically */
  220. }
  221.  
  222. #calculator-root table {
  223. font-size: 12px;
  224. }
  225.  
  226. #calculator-root th, #calculator-root td {
  227. padding: 8px;
  228. }
  229.  
  230. #calculator-root .container {
  231. padding: 15px; /* Reduce padding on smaller screens */
  232. }
  233.  
  234. #calculator-root h1 {
  235. font-size: 1.8em; /* Adjust heading size */
  236. }
  237. }
  238.  
  239. /* Further adjustments for very small screens if needed */
  240. @media (max-width: 480px) {
  241. #calculator-root th, #calculator-root td {
  242. padding: 6px; /* Further reduce padding for very small screens */
  243. }
  244. }
  245. </style>
  246. </head>
  247. <body>
  248. <!-- 모든 계산기 콘텐츠를 고유한 ID를 가진 div로 감쌉니다. -->
  249. <div id="calculator-root">
  250. <div class="container">
  251. <h1>모듈형 매매법 분할매수 계산기</h1>
  252.  
  253. <div class="input-section">
  254. <div class="input-group">
  255. <div class="input-item">
  256. <label for="tradeType">매매 방향</label>
  257. <select id="tradeType" onchange="toggleInputFields()">
  258. <option value="buy">매수</option>
  259. <option value="sell">매도</option>
  260. </select>
  261. </div>
  262.  
  263. <!-- This single input item will dynamically change its label and content -->
  264. <div class="input-item">
  265. <label id="dynamicInputLabel" for="dynamicInputValue"></label>
  266. <input type="number" id="dynamicInputValue" value="" placeholder="">
  267. </div>
  268.  
  269. <div class="input-item">
  270. <label for="currentPrice">현재 주가 (원)</label>
  271. <input type="number" id="currentPrice" value="100" placeholder="예: 100">
  272. </div>
  273.  
  274. <div class="input-item">
  275. <label for="divisions">분할 횟수</label>
  276. <input type="number" id="divisions" value="10" min="2" max="20" placeholder="예: 10">
  277. </div>
  278.  
  279. <div class="input-item">
  280. <label for="priceInterval">가격 변동 간격 (%)</label>
  281. <select id="priceInterval">
  282. <option value="1">1%</option>
  283. <option value="2">2%</option>
  284. <option value="3">3%</option>
  285. <option value="5">5%</option>
  286. </select>
  287. </div>
  288. </div>
  289.  
  290. <button onclick="calculateSplit()">계산하기</button>
  291. </div>
  292.  
  293. <div class="result-table" id="resultSection" style="display: none;">
  294. <table>
  295. <thead>
  296. <tr>
  297. <th>차수</th>
  298. <th id="priceHeader">매수 가격 (원)</th>
  299. <th id="changeHeader">하락률 (%)</th>
  300. <th id="sharesHeader">매수 주수 (주)</th>
  301. <th id="amountHeader">매수 금액 (원)</th>
  302. <th id="cumulativeSharesHeader">누적 매수 주수 (주)</th>
  303. <th id="cumulativeAmountHeader">누적 매수 금액 (원)</th>
  304. <th id="avgPriceHeader">평균 매수단가 (원)</th>
  305. </tr>
  306. </thead>
  307. <tbody id="resultBody">
  308. </tbody>
  309. </table>
  310.  
  311. <div class="summary" id="summary">
  312. </div>
  313. </div>
  314. </div>
  315.  
  316. <!-- Custom Alert Modal Structure -->
  317. <div id="customAlert" class="custom-alert" style="display: none;">
  318. <div class="custom-alert-content">
  319. <p id="customAlertMessage"></p>
  320. <button onclick="hideCustomAlert()">확인</button>
  321. </div>
  322. </div>
  323. </div>
  324.  
  325. <script>
  326. /**
  327. * Displays a custom alert modal with a given message.
  328. * @param {string} message - The message to display in the alert.
  329. */
  330. function showCustomAlert(message) {
  331. document.getElementById('customAlertMessage').textContent = message;
  332. document.getElementById('customAlert').style.display = 'flex';
  333. }
  334.  
  335. /**
  336. * Hides the custom alert modal.
  337. */
  338. function hideCustomAlert() {
  339. document.getElementById('customAlert').style.display = 'none';
  340. }
  341.  
  342. /**
  343. * Toggles the label text, value, and placeholder of the dynamic input field
  344. * based on the selected trade type (buy/sell).
  345. * Updates the table headers accordingly.
  346. */
  347. function toggleInputFields() {
  348. const tradeType = document.getElementById('tradeType').value;
  349. const dynamicInputLabel = document.getElementById('dynamicInputLabel');
  350. const dynamicInputValue = document.getElementById('dynamicInputValue');
  351.  
  352. if (tradeType === 'buy') {
  353. dynamicInputLabel.textContent = '총 투자금액 (원)';
  354. dynamicInputLabel.setAttribute('for', 'dynamicInputValue'); // Label's 'for' attribute
  355. dynamicInputValue.value = '1000000'; // Default value for buy
  356. dynamicInputValue.placeholder = '예: 1,000,000';
  357. } else {
  358. dynamicInputLabel.textContent = '보유 주수 (주)';
  359. dynamicInputLabel.setAttribute('for', 'dynamicInputValue'); // Label's 'for' attribute
  360. dynamicInputValue.value = '10000'; // Default value for sell
  361. dynamicInputValue.placeholder = '예: 10,000';
  362. }
  363.  
  364. updateHeaders();
  365. }
  366.  
  367. /**
  368. * Updates the text content of the table headers based on the current trade type (buy/sell).
  369. */
  370. function updateHeaders() {
  371. const tradeType = document.getElementById('tradeType').value;
  372. const isBuy = tradeType === 'buy';
  373.  
  374. document.getElementById('priceHeader').textContent = isBuy ? '매수 가격 (원)' : '매도 가격 (원)';
  375. document.getElementById('changeHeader').textContent = isBuy ? '하락률 (%)' : '상승률 (%)';
  376. document.getElementById('sharesHeader').textContent = isBuy ? '매수 주수 (주)' : '매도 주수 (주)';
  377. document.getElementById('amountHeader').textContent = isBuy ? '매수 금액 (원)' : '매도 금액 (원)';
  378. document.getElementById('cumulativeSharesHeader').textContent = isBuy ? '누적 매수 주수 (주)' : '잔여 보유 주수 (주)';
  379. document.getElementById('cumulativeAmountHeader').textContent = isBuy ? '누적 매수 금액 (원)' : '누적 매도 금액 (원)';
  380. document.getElementById('avgPriceHeader').textContent = isBuy ? '평균 매수단가 (원)' : '평균 매도단가 (원)';
  381. }
  382.  
  383. /**
  384. * Calculates the split purchase/sale plan based on user inputs.
  385. * Generates and displays the results in a table and a summary section.
  386. */
  387. function calculateSplit() {
  388. // Get input values
  389. const tradeType = document.getElementById('tradeType').value;
  390. const currentPrice = parseInt(document.getElementById('currentPrice').value);
  391. const divisions = parseInt(document.getElementById('divisions').value);
  392. const priceInterval = parseFloat(document.getElementById('priceInterval').value);
  393.  
  394. // Input validation for common fields
  395. if (isNaN(currentPrice) || currentPrice <= 0) {
  396. showCustomAlert('현재 주가는 0보다 큰 숫자를 입력해주세요.');
  397. return;
  398. }
  399. if (isNaN(divisions) || divisions < 2 || divisions > 20) {
  400. showCustomAlert('분할 횟수는 2에서 20 사이의 숫자를 입력해주세요.');
  401. return;
  402. }
  403. if (isNaN(priceInterval) || priceInterval <= 0) {
  404. showCustomAlert('가격 변동 간격은 0보다 큰 숫자를 선택해주세요.');
  405. return;
  406. }
  407.  
  408. const resultBody = document.getElementById('resultBody');
  409. resultBody.innerHTML = ''; // Clear previous results
  410.  
  411. let cumulativeShares = 0;
  412. let cumulativeAmount = 0;
  413. let initialTotalAmountOrShares = 0; // Stores the initial total for summary purposes
  414.  
  415. // Get the value from the dynamic input field
  416. const dynamicInputValue = parseInt(document.getElementById('dynamicInputValue').value);
  417.  
  418. if (tradeType === 'buy') {
  419. const totalAmount = dynamicInputValue;
  420. // Input validation for buy-specific field
  421. if (isNaN(totalAmount) || totalAmount <= 0) {
  422. showCustomAlert('총 투자금액은 0보다 큰 숫자를 입력해주세요.');
  423. return;
  424. }
  425. initialTotalAmountOrShares = totalAmount; // Store initial total amount
  426.  
  427. // Calculate the base amount to be allocated per division
  428. const amountPerDivisionBase = totalAmount / divisions;
  429.  
  430. for (let i = 1; i <= divisions; i++) {
  431. const changeRate = (i - 1) * priceInterval; // Calculate percentage drop
  432. // Calculate trade price based on current price and drop percentage
  433. const tradePrice = Math.round(currentPrice * (100 - changeRate) / 100);
  434.  
  435. // Ensure trade price does not go to zero or negative
  436. if (tradePrice <= 0) {
  437. showCustomAlert(`매수 가격이 ${tradePrice.toLocaleString()}원으로 0 이하가 됩니다. 현재 주가 또는 분할 간격을 조정해주세요.`);
  438. return;
  439. }
  440.  
  441. // Calculate shares for the current division based on the allocated amount and trade price
  442. const currentShares = Math.floor(amountPerDivisionBase / tradePrice);
  443. const tradeAmount = currentShares * tradePrice;
  444.  
  445. cumulativeShares += currentShares;
  446. cumulativeAmount += tradeAmount;
  447. // Calculate average price, handling division by zero if no shares are bought yet
  448. const avgPrice = cumulativeShares > 0 ? Math.round(cumulativeAmount / cumulativeShares) : 0;
  449.  
  450. // Create and append table row
  451. const row = document.createElement('tr');
  452. row.innerHTML = `
  453. <td>${i}</td>
  454. <td>${tradePrice.toLocaleString()}</td>
  455. <td>${changeRate.toFixed(1)}</td>
  456. <td>${currentShares.toLocaleString()}</td>
  457. <td>${tradeAmount.toLocaleString()}</td>
  458. <td>${cumulativeShares.toLocaleString()}</td>
  459. <td>${cumulativeAmount.toLocaleString()}</td>
  460. <td>${avgPrice.toLocaleString()}</td>
  461. `;
  462. resultBody.appendChild(row);
  463. }
  464.  
  465. // Generate summary for buy mode
  466. const maxChange = (divisions - 1) * priceInterval;
  467. const minPrice = Math.round(currentPrice * (100 - maxChange) / 100);
  468. const finalAvgPrice = cumulativeShares > 0 ? Math.round(cumulativeAmount / cumulativeShares) : 0;
  469. const remainingFunds = initialTotalAmountOrShares - cumulativeAmount; // Calculate unspent funds
  470.  
  471. document.getElementById('summary').innerHTML = `
  472. <h3>📈 분할매수 요약</h3>
  473. <p><strong>총 매수 주수:</strong> ${cumulativeShares.toLocaleString()}주</p>
  474. <p><strong>총 투자 금액:</b> ${cumulativeAmount.toLocaleString()}원</p>
  475. <p><strong>평균 매수단가:</strong> ${finalAvgPrice.toLocaleString()}원</p>
  476. <p><strong>최대 하락 허용:</strong> ${maxChange}% (${minPrice.toLocaleString()}원까지)</p>
  477. <p><strong>잔여 자금:</strong> ${remainingFunds.toLocaleString()}원</p>
  478. `;
  479. } else { // Trade type is 'sell'
  480. const holdingShares = dynamicInputValue;
  481. // Input validation for sell-specific field
  482. if (isNaN(holdingShares) || holdingShares <= 0) {
  483. showCustomAlert('보유 주수는 0보다 큰 숫자를 입력해주세요.');
  484. return;
  485. }
  486. initialTotalAmountOrShares = holdingShares; // Store initial holding shares
  487.  
  488. // Calculate base shares per trade and any remaining shares to distribute
  489. const sharesPerTradeBase = Math.floor(holdingShares / divisions);
  490. let remainingSharesToDistribute = holdingShares % divisions;
  491.  
  492. for (let i = 1; i <= divisions; i++) {
  493. const changeRate = (i - 1) * priceInterval; // Calculate percentage increase
  494. // Calculate trade price based on current price and increase percentage
  495. const tradePrice = Math.round(currentPrice * (100 + changeRate) / 100);
  496.  
  497. let currentShares = sharesPerTradeBase;
  498. // Distribute remaining shares one by one to the first few divisions
  499. if (remainingSharesToDistribute > 0) {
  500. currentShares++;
  501. remainingSharesToDistribute--;
  502. }
  503.  
  504. const tradeAmount = currentShares * tradePrice;
  505.  
  506. cumulativeShares += currentShares; // cumulativeShares now represents total shares sold
  507. cumulativeAmount += tradeAmount;
  508. // Calculate remaining shares in hand after this trade
  509. const remainingHoldingShares = initialTotalAmountOrShares - cumulativeShares;
  510. // Calculate average price, handling division by zero if no shares are sold yet
  511. const avgPrice = cumulativeShares > 0 ? Math.round(cumulativeAmount / cumulativeShares) : 0;
  512.  
  513. // Create and append table row
  514. const row = document.createElement('tr');
  515. row.innerHTML = `
  516. <td>${i}</td>
  517. <td>${tradePrice.toLocaleString()}</td>
  518. <td>+${changeRate.toFixed(1)}</td>
  519. <td>${currentShares.toLocaleString()}</td>
  520. <td>${tradeAmount.toLocaleString()}</td>
  521. <td>${remainingHoldingShares.toLocaleString()}</td>
  522. <td>${cumulativeAmount.toLocaleString()}</td>
  523. <td>${avgPrice.toLocaleString()}</td>
  524. `;
  525. resultBody.appendChild(row);
  526. }
  527.  
  528. // Generate summary for sell mode
  529. const maxChange = (divisions - 1) * priceInterval;
  530. const maxPrice = Math.round(currentPrice * (100 + maxChange) / 100);
  531. const finalAvgPrice = cumulativeShares > 0 ? Math.round(cumulativeAmount / cumulativeShares) : 0;
  532. const remainingHoldingSharesTotal = initialTotalAmountOrShares - cumulativeShares;
  533.  
  534. document.getElementById('summary').innerHTML = `
  535. <h3>📉 분할매도 요약</h3>
  536. <p><strong>총 매도 주수:</strong> ${cumulativeShares.toLocaleString()}주</p>
  537. <p><strong>총 매도 금액:</strong> ${cumulativeAmount.toLocaleString()}원</p>
  538. <p><strong>평균 매도단가:</strong> ${finalAvgPrice.toLocaleString()}원</p>
  539. <p><strong>최대 상승 기대:</strong> ${maxChange}% (${maxPrice.toLocaleString()}원까지)</p>
  540. <p><strong>잔여 보유 주수:</strong> ${remainingHoldingSharesTotal.toLocaleString()}주</p>
  541. `;
  542. }
  543.  
  544. // Display the result section
  545. document.getElementById('resultSection').style.display = 'block';
  546. }
  547.  
  548. // Initial setup and calculation when the page loads
  549. window.onload = function() {
  550. toggleInputFields(); // Set initial input field visibility and headers
  551. calculateSplit(); // Perform initial calculation with default values
  552. };
  553. </script>
  554. </body>
  555. </html>
  556.  
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!