update web interface
This commit is contained in:
110
static/js/market-ticker.js
Normal file
110
static/js/market-ticker.js
Normal file
@@ -0,0 +1,110 @@
|
||||
// 实时行情数据更新功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tickerContent = document.querySelector('.ticker-content');
|
||||
if (!tickerContent) return;
|
||||
|
||||
// 初始占位符数据
|
||||
const initialData = [
|
||||
{ symbol: 'HSI', price: '16,842.23', change: '+1.2%', direction: 'positive' },
|
||||
{ symbol: 'AAPL', price: '173.45', change: '+0.8%', direction: 'positive' },
|
||||
{ symbol: 'TSLA', price: '245.67', change: '-0.5%', direction: 'negative' },
|
||||
{ symbol: 'BTC/USD', price: '61,234.56', change: '+2.1%', direction: 'positive' }
|
||||
];
|
||||
|
||||
// 初始化行情显示器
|
||||
function initializeTicker() {
|
||||
tickerContent.innerHTML = '';
|
||||
initialData.forEach(item => {
|
||||
const tickerItem = createTickerItem(item);
|
||||
tickerContent.appendChild(tickerItem);
|
||||
});
|
||||
}
|
||||
|
||||
// 创建行情项元素
|
||||
function createTickerItem(data) {
|
||||
const item = document.createElement('div');
|
||||
item.className = 'ticker-item';
|
||||
item.innerHTML = `
|
||||
<span class="symbol">${data.symbol}</span>
|
||||
<span class="price">${formatPrice(data.price)}</span>
|
||||
<span class="change ${data.direction}">${data.change}</span>
|
||||
`;
|
||||
return item;
|
||||
}
|
||||
|
||||
// 格式化价格显示
|
||||
function formatPrice(price) {
|
||||
if (typeof price === 'number') {
|
||||
// 对于数字，添加千位分隔符
|
||||
return price.toLocaleString('en-US', {
|
||||
minimumFractionDigits: 2,
|
||||
maximumFractionDigits: 2
|
||||
});
|
||||
}
|
||||
return price;
|
||||
}
|
||||
|
||||
// 获取实时市场数据
|
||||
async function fetchMarketData() {
|
||||
try {
|
||||
const response = await fetch('/api/market-data');
|
||||
if (!response.ok) {
|
||||
throw new Error('网络响应不正常');
|
||||
}
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
updateTicker(data.data);
|
||||
} else {
|
||||
console.error('获取市场数据失败:', data.message);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取实时行情数据时发生错误:', error);
|
||||
// 保持显示静态数据，不更新
|
||||
}
|
||||
}
|
||||
|
||||
// 更新行情显示器
|
||||
function updateTicker(marketData) {
|
||||
tickerContent.innerHTML = '';
|
||||
marketData.forEach(item => {
|
||||
const direction = item.change_percent >= 0 ? 'positive' : 'negative';
|
||||
const changeSign = item.change_percent >= 0 ? '+' : '';
|
||||
|
||||
const tickerItem = document.createElement('div');
|
||||
tickerItem.className = 'ticker-item';
|
||||
tickerItem.innerHTML = `
|
||||
<span class="symbol">${item.symbol}</span>
|
||||
<span class="price">${formatPrice(item.price)}</span>
|
||||
<span class="change ${direction}">${changeSign}${item.change_percent}%</span>
|
||||
`;
|
||||
tickerContent.appendChild(tickerItem);
|
||||
});
|
||||
}
|
||||
|
||||
// 初始化并开始定时更新
|
||||
initializeTicker();
|
||||
|
||||
// 立即获取一次数据
|
||||
fetchMarketData();
|
||||
|
||||
// 每30秒更新一次数据
|
||||
setInterval(fetchMarketData, 30000);
|
||||
|
||||
// 添加刷新按钮功能
|
||||
const refreshBadge = document.querySelector('.refresh-badge');
|
||||
if (refreshBadge) {
|
||||
refreshBadge.addEventListener('click', function() {
|
||||
this.textContent = '刷新中...';
|
||||
fetchMarketData().then(() => {
|
||||
setTimeout(() => {
|
||||
this.textContent = 'Live';
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
// 添加提示文字
|
||||
refreshBadge.title = '点击手动刷新行情';
|
||||
refreshBadge.style.cursor = 'pointer';
|
||||
}
|
||||
});
|
||||
54
static/js/mobile-menu.js
Normal file
54
static/js/mobile-menu.js
Normal file
@@ -0,0 +1,54 @@
|
||||
// 移动端菜单功能
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const mobileMenuToggle = document.querySelector('.mobile-menu-toggle');
|
||||
const navMenu = document.querySelector('.nav-menu');
|
||||
|
||||
if (mobileMenuToggle && navMenu) {
|
||||
// 切换菜单显示
|
||||
mobileMenuToggle.addEventListener('click', function() {
|
||||
navMenu.classList.toggle('active');
|
||||
mobileMenuToggle.classList.toggle('active');
|
||||
document.body.classList.toggle('menu-open');
|
||||
});
|
||||
|
||||
// 点击菜单外区域关闭菜单
|
||||
document.addEventListener('click', function(event) {
|
||||
if (!navMenu.contains(event.target) && !mobileMenuToggle.contains(event.target)) {
|
||||
navMenu.classList.remove('active');
|
||||
mobileMenuToggle.classList.remove('active');
|
||||
document.body.classList.remove('menu-open');
|
||||
}
|
||||
});
|
||||
|
||||
// 防止菜单内点击事件冒泡
|
||||
navMenu.addEventListener('click', function(event) {
|
||||
event.stopPropagation();
|
||||
});
|
||||
|
||||
// 菜单项点击后关闭菜单
|
||||
const menuItems = navMenu.querySelectorAll('a');
|
||||
menuItems.forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
navMenu.classList.remove('active');
|
||||
mobileMenuToggle.classList.remove('active');
|
||||
document.body.classList.remove('menu-open');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 窗口大小变化时重置菜单状态
|
||||
window.addEventListener('resize', function() {
|
||||
if (window.innerWidth > 768) {
|
||||
navMenu.classList.remove('active');
|
||||
mobileMenuToggle.classList.remove('active');
|
||||
document.body.classList.remove('menu-open');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 语言切换功能
|
||||
function changeLanguage(langCode) {
|
||||
if (langCode) {
|
||||
window.location.href = '/set_language/' + langCode;
|
||||
}
|
||||
}
|
||||
72
static/js/tabs.js
Normal file
72
static/js/tabs.js
Normal file
@@ -0,0 +1,72 @@
|
||||
// Tab functionality for commission rates
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const tabButtons = document.querySelectorAll('.tab-button');
|
||||
const tabPanes = document.querySelectorAll('.tab-pane');
|
||||
const tabsContainer = document.querySelector('.tabs-container');
|
||||
|
||||
// Function to switch tabs
|
||||
function switchTab(tabId) {
|
||||
// Hide all tab panes
|
||||
tabPanes.forEach(pane => {
|
||||
pane.classList.remove('active');
|
||||
});
|
||||
|
||||
// Remove active class from all buttons
|
||||
tabButtons.forEach(button => {
|
||||
button.classList.remove('active');
|
||||
});
|
||||
|
||||
// Show the selected tab pane
|
||||
const selectedPane = document.getElementById(tabId);
|
||||
if (selectedPane) {
|
||||
selectedPane.classList.add('active');
|
||||
}
|
||||
|
||||
// Activate the clicked button
|
||||
const activeButton = document.querySelector(`[data-tab="${tabId}"]`);
|
||||
if (activeButton) {
|
||||
activeButton.classList.add('active');
|
||||
}
|
||||
|
||||
// Update URL hash for deep linking without scrolling
|
||||
if (history.replaceState) {
|
||||
history.replaceState(null, null, '#' + tabId);
|
||||
} else {
|
||||
window.location.hash = tabId;
|
||||
}
|
||||
|
||||
// Smoothly scroll to the top of the tabs container with offset
|
||||
if (tabsContainer) {
|
||||
const containerTop = tabsContainer.getBoundingClientRect().top + window.pageYOffset;
|
||||
const offset = 100; // Adjust this value to control how much to scroll
|
||||
window.scrollTo({
|
||||
top: containerTop - offset,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
// Add click event listeners to all tab buttons
|
||||
tabButtons.forEach(button => {
|
||||
button.addEventListener('click', function() {
|
||||
const tabId = this.getAttribute('data-tab');
|
||||
switchTab(tabId);
|
||||
});
|
||||
});
|
||||
|
||||
// Check for hash in URL on page load
|
||||
if (window.location.hash) {
|
||||
const hash = window.location.hash.substring(1);
|
||||
if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
|
||||
switchTab(hash);
|
||||
}
|
||||
}
|
||||
|
||||
// Handle browser back/forward navigation
|
||||
window.addEventListener('hashchange', function() {
|
||||
const hash = window.location.hash.substring(1);
|
||||
if (['stocks', 'options', 'futures', 'funds', 'other'].includes(hash)) {
|
||||
switchTab(hash);
|
||||
}
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user