// 通用工具函数 // 显示通知消息 function showToast(message, type = 'info') { // 创建通知元素 const toast = document.createElement('div'); toast.className = `toast fixed top-4 right-4 p-3 rounded-lg shadow-lg ${type === 'success' ? 'bg-green-500 text-white' : type === 'error' ? 'bg-red-500 text-white' : 'bg-blue-500 text-white'}`; toast.innerHTML = message; // 添加到页面 document.body.appendChild(toast); // 3秒后自动消失 setTimeout(() => { toast.style.opacity = '0'; toast.style.transition = 'opacity 0.5s ease'; setTimeout(() => { document.body.removeChild(toast); }, 500); }, 3000); } // 格式化日期 function formatDate(date) { return new Date(date).toLocaleString(); } // 转换字节为可读格式 function formatBytes(bytes) { if (bytes === 0) return '0 Bytes'; const k = 1024; const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; const i = Math.floor(Math.log(bytes) / Math.log(k)); return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]; } // 检查响应是否成功 function checkResponse(response) { if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return response; } // 生成随机字符串 function generateRandomString(length = 16) { const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; let result = ''; for (let i = 0; i < length; i++) { result += chars.charAt(Math.floor(Math.random() * chars.length)); } return result; } // 检查是否为有效的UUID function isValidUUID(uuid) { const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i; return uuidRegex.test(uuid); } // URL编码特殊字符 function urlEncodeParams(params) { const encodedParams = {}; for (const key in params) { encodedParams[key] = encodeURIComponent(params[key]); } return encodedParams; } // 将对象转换为查询字符串 function objectToQueryString(obj) { return new URLSearchParams(obj).toString(); } // 获取元素的DOM节点 function $(selector) { return document.querySelector(selector); } // 显示元素 function showElement(element) { element.style.display = 'block'; } // 隐藏元素 function hideElement(element) { element.style.display = 'none'; } // 设置元素文本内容 function setTextContent(element, text) { element.textContent = text; } // 获取元素文本内容 function getTextContent(element) { return element.textContent; } // 添加事件监听器 function addEventListener(element, event, handler) { element.addEventListener(event, handler); } // 移除事件监听器 function removeEventListener(element, event, handler) { element.removeEventListener(event, handler); } // 滚动到页面顶部 function scrollToTop() { window.scrollTo({ top: 0, behavior: 'smooth' }); } // 滚动到元素 function scrollToElement(element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // 创建DOM元素 function createElement(tagName, className = '', innerHTML = '') { const element = document.createElement(tagName); if (className) { element.className = className; } if (innerHTML) { element.innerHTML = innerHTML; } return element; } // 克隆DOM元素 function cloneElement(element) { return element.cloneNode(true); } // 移除DOM元素 function removeElement(element) { if (element && element.parentNode) { element.parentNode.removeChild(element); } } // 插入到DOM元素之前 function insertBefore(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode); } // 插入到DOM元素之后 function insertAfter(referenceNode, newNode) { referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); } // 替换DOM元素 function replaceElement(oldNode, newNode) { if (oldNode.parentNode) { oldNode.parentNode.replaceChild(newNode, oldNode); } } // 添加CSS类 function addClass(element, className) { element.classList.add(className); } // 移除CSS类 function removeClass(element, className) { element.classList.remove(className); } // 切换CSS类 function toggleClass(element, className) { element.classList.toggle(className); } // 检查CSS类是否存在 function hasClass(element, className) { return element.classList.contains(className); } // 设置CSS样式 function setStyle(element, style) { for (const key in style) { element.style[key] = style[key]; } } // 获取CSS样式 function getStyle(element, property) { return window.getComputedStyle(element).getPropertyValue(property); } // 设置数据属性 function setData(element, key, value) { element.dataset[key] = value; } // 获取数据属性 function getData(element, key) { return element.dataset[key]; } // 移除数据属性 function removeData(element, key) { delete element.dataset[key]; } // 获取或设置表单字段值 function getFieldValue(element) { const type = element.type; if (type === 'checkbox' || type === 'radio') { return element.checked; } return element.value; } function setFieldValue(element, value) { const type = element.type; if (type === 'checkbox' || type === 'radio') { element.checked = value; } else { element.value = value; } } // 阻止事件冒泡 function stopEventPropagation(event) { event.stopPropagation(); } // 阻止事件默认行为 function preventEventDefault(event) { event.preventDefault(); } // 检查元素是否在视口中 function isInViewport(element) { const rect = element.getBoundingClientRect(); return ( rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } // 观察元素变化 function observeElement(element, callback) { const observer = new MutationObserver(callback); observer.observe(element, { attributes: true, childList: true, characterData: true, subtree: true }); return observer; } // 取消观察元素 function disconnectObserver(observer) { if (observer) { observer.disconnect(); } } // 加载外部CSS文件 function loadCSS(url) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = url; document.head.appendChild(link); } // 加载外部JS文件 function loadJS(url, callback) { const script = document.createElement('script'); script.src = url; script.onload = callback; document.head.appendChild(script); } // 获取浏览器窗口大小 function getWindowSize() { return { width: window.innerWidth, height: window.innerHeight }; } // 监听窗口大小变化 function watchWindowSize(callback) { window.addEventListener('resize', callback); } // 取消监听窗口大小变化 function unwatchWindowSize(callback) { window.removeEventListener('resize', callback); } // 模拟点击 function simulateClick(element) { const event = new MouseEvent('click', { view: window, bubbles: true, cancelable: true }); element.dispatchEvent(event); } // 创建并下载文件 function downloadFileBlob(blob, fileName) { const url = window.URL.createObjectURL(blob); const a = document.createElement('a'); a.style.display = 'none'; a.href = url; a.download = fileName; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(url); document.body.removeChild(a); } // 复制文本到剪贴板 async function copyToClipboard(text) { try { await navigator.clipboard.writeText(text); return true; } catch (err) { console.error('无法复制文本: ', err); return false; } } // 加载更多内容 function loadMoreContent(element, loadFn, params = {}) { const loadMoreBtn = document.createElement('button'); loadMoreBtn.className = 'btn btn-primary w-full mt-4'; loadMoreBtn.textContent = '加载更多'; element.appendChild(loadMoreBtn); loadMoreBtn.addEventListener('click', function() { showLoadingModal(); loadFn(params) .then(data => { hideLoadingModal(); if (data.status === 200) { element.removeChild(loadMoreBtn); // 处理加载的数据 // 这里需要根据具体需求实现 } else { alert(`加载失败: ${data.message || '未知错误'}`); } }) .catch(error => { hideLoadingModal(); console.error('加载失败:', error); alert('加载失败,请检查网络连接'); }); }); } // 创建模态框 function createModal(title, content, footer = '') { const modal = document.createElement('div'); modal.className = 'fixed top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 flex items-center justify-center'; modal.innerHTML = `

${title}

${content}
${footer}
`; document.body.appendChild(modal); return modal; } // 关闭模态框 function closeModal(modal) { if (modal && modal.parentNode) { modal.parentNode.removeChild(modal); } } // 创建确认框 function createConfirmModal(message, onConfirm, onCancel = null, title = '确认') { const modal = createModal(title, message, `
`); document.getElementById('confirmBtn').addEventListener('click', function() { closeModal(modal); if (typeof onConfirm === 'function') { onConfirm(); } }); document.getElementById('cancelBtn').addEventListener('click', function() { closeModal(modal); if (typeof onCancel === 'function') { onCancel(); } }); return modal; } // 创建加载提示 function createLoadingTip(message = '加载中...') { const tip = document.createElement('div'); tip.className = 'fixed top-0 left-0 w-full h-full bg-gray-900 bg-opacity-50 flex items-center justify-center'; tip.innerHTML = `

${message}

`; document.body.appendChild(tip); return tip; } // 移除加载提示 function removeLoadingTip(tip) { if (tip && tip.parentNode) { tip.parentNode.removeChild(tip); } }