https://bitbank.cc/assets/js/welcome-margin-trade.js

1/*--------------------------------
2
3JS
4
5----------------------------------*/
6var arrival = 30;
7$(window).scroll(function () {
8  var top = $(window).scrollTop();
9  if (arrival < top) {
10    $('.header-sp01').css('background-color', 'rgba(18,101,112,0.9)');
11  } else {
12    $('.header-sp01').css('background-color', 'rgba(255,255,255,0)');
13  }
14});
15/*--------------------------------
16modal
17----------------------------------*/
18$(function () {
19  const $modal = $('.modal');
20
21  $modal.addClass('is-active');
22
23  setTimeout(function () {
24    $modal.removeClass('is-active');
25  }, 5000);
26
27  $(document).on('click', '.modal-open', function (e) {
28    e.preventDefault();
29    $modal.addClass('is-active');
30  });
31
32  $(document).on('click', '.modal-close', function (e) {
33    e.preventDefault();
34    $modal.removeClass('is-active');
35  });
36});
37/*--------------------------------
38pc-bottom-btn
39----------------------------------*/
40$(window).on('load scroll', function () {
41  if ($(window).scrollTop() > 10) {
42    $('.register-bottom').fadeIn(400);
43  } else {
44    $('.register-bottom').fadeOut(400);
45  }
46});
47/*--------------------------------
48Right click disabled pc
49----------------------------------*/
50/*document.addEventListener('contextmenu', function (e) {
51  const top = document.querySelector('.welcome-wrap');
52  if (top) {
53    const feature = top.querySelector('.main');
54    if (feature && feature.contains(e.target)) {
55      e.preventDefault();
56    }
57  }
58});*/
59/*--------------------------------
60Long pressing disabled sp
61----------------------------------*/
62/*document.addEventListener('touchstart', function (e) {
63  const top = document.querySelector('.welcome-wrap');
64  if (top) {
65    const feature = top.querySelector('.main');
66    if (feature && feature.contains(e.target)) {
67      if (e.target.tagName === 'IMG') {
68        e.preventDefault();
69      }
70    }
71  }
72});*/
73/*--------------------------------
74acordion
75----------------------------------*/
76document.addEventListener('click', (e) => {
77  const btn = e.target.closest('.accordion__trigger');
78  if (!btn) return;
79  const expanded = btn.getAttribute('aria-expanded') === 'true';
80  const panel = document.getElementById(btn.getAttribute('aria-controls'));
81  const item = btn.closest('.accordion__item');
82  if (!panel) return;
83  if (item) item.classList.toggle('is-open', !expanded);
84  if (expanded) {
85    slideUp(panel, 300);
86    btn.setAttribute('aria-expanded', 'false');
87  } else {
88    slideDown(panel, 300);
89    btn.setAttribute('aria-expanded', 'true');
90  }
91});
92
93function slideUp(el, duration = 300) {
94  el.style.height = el.scrollHeight + 'px';
95  el.offsetHeight;
96  el.style.transition = `height ${duration}ms ease, opacity ${Math.round(duration*0.8)}ms ease`;
97  el.style.opacity = '0';
98  el.style.height = '0';
99
100  window.setTimeout(() => {
101    el.hidden = true;
102    el.style.removeProperty('height');
103    el.style.removeProperty('transition');
104    el.style.removeProperty('opacity');
105  }, duration);
106}
107
108function slideDown(el, duration = 300) {
109  el.hidden = false;
110  const h = el.scrollHeight;
111  el.style.height = '0';
112  el.style.opacity = '0';
113  el.offsetHeight;
114  el.style.transition = `height ${duration}ms ease, opacity ${Math.round(duration*0.8)}ms ease`;
115  el.style.height = h + 'px';
116  el.style.opacity = '1';
117
118  window.setTimeout(() => {
119    el.style.removeProperty('height');
120    el.style.removeProperty('transition');
121    el.style.removeProperty('opacity');
122  }, duration);
123}
124/*--------------------------------
125repay
126----------------------------------*/
127(function () {
128  var amountEl, daysEl, totalEl;
129
130  // React版と同じ計算式
131  function calcTotal(loanAmount, loanPeriod) {
132    return Math.floor(((loanAmount * loanPeriod) / 365) * 0.146) + loanAmount;
133  }
134
135  // 数値正規化：0～100,000,000、数値以外は無視
136  function sanitize(inputStr) {
137    var n = Number(String(inputStr).replace(/[^\d]/g, ''));
138    if (!isFinite(n)) n = 0;
139    if (n < 0) n = 0;
140    if (n > 100000000) n = 100000000;
141    return n;
142  }
143
144  function formatJPY(n) {
145    return n.toLocaleString('ja-JP');
146  }
147
148  function update() {
149    if (!amountEl || !daysEl || !totalEl) return;
150    var amount = sanitize(amountEl.value);
151    var period = Number(daysEl.value) || 1;

152    var total  = calcTotal(amount, period);
153    totalEl.textContent = formatJPY(total);
154  }
155
156  function onReady() {
157    amountEl = document.getElementById('repayAmount');
158    daysEl   = document.getElementById('repayDays');
159    totalEl  = document.getElementById('repayTotal');
160    if (!amountEl || !daysEl || !totalEl) return;
161
162    // 入力中は素の数値。React同様、桁区切りは合計のみ。
163    amountEl.addEventListener('input', function (e) {
164      var sanitized = sanitize(e.target.value);
165      if (String(sanitized) !== e.target.value) e.target.value = String(sanitized);
166      update();
167    });
168    amountEl.addEventListener('blur', update);
169    daysEl.addEventListener('change', update);
170
171    update();
172  }
173
174  if (document.readyState === 'loading') {
175    document.addEventListener('DOMContentLoaded', onReady);
176  } else {
177    onReady();
178  }
179})();