| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474 |
- <!DOCTYPE HTML>
- <html lang="zh-CN">
- <head>
- <title>时间戳计算器 - FeHelper</title>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="../static/img/favicon.ico">
- <link rel="stylesheet" href="index.css" />
- </head>
- <body>
- <div class="wrapper" id="app">
- <div class="panel panel-default" style="margin-bottom: 0px;">
- <div class="panel-heading">
- <h3 class="panel-title">
- <a href="https://fehelper.com" target="_blank" class="x-a-high">
- <img src="../static/img/fe-16.png" alt="fehelper"/> FeHelper</a>:时间戳计算器
- <a href="#" class="x-donate-link"><i class="nav-icon">❤ </i>打赏鼓励</a>
- <a class="x-other-tools"><i class="icon-plus-circle"></i> 探索更多实用工具 <span class="tool-market-badge">工具市场</span></a>
- </h3>
- </div>
- </div>
- <!-- 功能标签页 -->
- <div class="tab-container">
- <ul class="nav nav-tabs" role="tablist">
- <li role="presentation" class="active">
- <a href="#">🧠 智能解析</a>
- </li>
- <li role="presentation">
- <a href="#">💻 代码生成</a>
- </li>
- <li role="presentation">
- <a href="#">🧮 时间计算</a>
- </li>
- <li role="presentation">
- <a href="#">📊 批量转换</a>
- </li>
- <li role="presentation">
- <a href="#">🌍 时区专家</a>
- </li>
- <li role="presentation">
- <a href="#">🗄️ 数据库</a>
- </li>
- </ul>
- <!-- 标签页内容 -->
- <div class="tab-content">
- <!-- 智能解析模块 -->
- <div role="tabpanel" class="tab-pane active" id="smart-parser">
- <div class="tool-section">
- <h4 class="section-title">🧠 智能时间解析器</h4>
- <p class="section-desc">支持20+种时间格式自动识别,包括Unix时间戳、ISO 8601、RFC 3339、数据库格式等</p>
-
- <div class="parser-main-layout">
- <!-- 左侧区域 -->
- <div class="left-panel">
- <!-- 快捷操作模块 -->
- <div class="quick-actions-module">
- <label class="module-label">
- <span class="label-icon">⚡</span>
- 快捷操作
- </label>
- <div class="quick-buttons-grid">
- <button class="btn btn-outline-primary btn-sm quick-btn" data-action="now">
- 🕐 当前时间
- </button>
- <button class="btn btn-outline-success btn-sm quick-btn" data-action="today">
- 📅 今天开始
- </button>
- <button class="btn btn-outline-info btn-sm quick-btn" data-action="yesterday">
- 📆 昨天
- </button>
- <button class="btn btn-outline-warning btn-sm quick-btn" data-action="week_start">
- 🗓️ 本周开始
- </button>
- <button class="btn btn-outline-secondary btn-sm quick-btn" data-action="month_start">
- 📊 本月开始
- </button>
- </div>
- </div>
-
- <!-- 输入时间模块 -->
- <div class="input-time-module">
- <label class="module-label">
- <span class="label-icon">📝</span>
- 输入时间(支持多种格式)
- </label>
- <div class="input-group-custom">
- <textarea class="form-control smart-input"
- placeholder="试试输入: • 1749722690(时间戳) • 2025-06-12 18:06:25 • now / today / yesterday • 2025/06/12 • Jun 12, 2025"
- rows="6"></textarea>
- <div class="input-actions">
- <button class="btn btn-primary parse-btn">🔍 解析</button>
- <button class="btn btn-secondary clear-input-btn">🗑️ 清空</button>
- </div>
- </div>
- <div class="format-hints"></div>
- </div>
- </div>
-
- <!-- 右侧区域 -->
- <div class="right-panel">
- <!-- 当前时间模块 -->
- <div class="current-time-module">
- <label class="module-label">
- <span class="label-icon">🕒</span>
- 当前时间
- <div class="time-control-inline">
- <button class="btn btn-sm btn-warning time-toggle-btn">⏸️ 暂停</button>
- </div>
- </label>
- <div class="current-time-grid">
- <div class="time-item">
- <label>当前本地时间</label>
- <input type="text" class="form-control time-display" readonly title="点击复制">
- </div>
- <div class="time-item">
- <label>Unix时间戳(秒)</label>
- <input type="text" class="form-control time-display" readonly title="点击复制">
- </div>
- <div class="time-item">
- <label>Unix时间戳(毫秒)</label>
- <input type="text" class="form-control time-display" readonly title="点击复制">
- </div>
- </div>
- </div>
-
- <!-- 解析结果模块 -->
- <div class="parse-results-module">
- <label class="module-label">
- <span class="label-icon">📋</span>
- 解析结果
- </label>
- <div class="result-container"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 代码生成模块 -->
- <div role="tabpanel" class="tab-pane" id="code-generator" style="display: none;">
- <div class="tool-section">
- <h4 class="section-title">💻 多语言代码生成器</h4>
- <p class="section-desc">根据时间值生成各种编程语言的时间处理代码</p>
-
- <div class="main-layout">
- <!-- 左侧:输入和控制 -->
- <div class="left-panel">
- <div class="panel-section">
- <label class="input-label">
- <span class="label-icon">⚡</span>
- 时间输入与语言选择
- </label>
- <div class="input-group">
- <div class="time-input-section">
- <input type="text" class="form-control time-input" placeholder="输入时间戳或时间字符串(如:1699999999)">
- </div>
- <div class="language-selector-section">
- <label class="form-label">选择语言</label>
- <select class="form-control language-select">
- <option value="all">所有语言</option>
- <option value="javascript">JavaScript</option>
- <option value="python">Python</option>
- <option value="java">Java</option>
- <option value="go">Go</option>
- <option value="php">PHP</option>
- <option value="sql">SQL</option>
- </select>
- </div>
- <button class="btn btn-primary generate-btn">🔨 生成代码</button>
- </div>
- </div>
- </div>
-
- <!-- 右侧:结果显示 -->
- <div class="right-panel">
- <div class="panel-section">
- <label class="result-label">
- <span class="label-icon">💻</span>
- 生成的代码(点击代码块可复制)
- </label>
- <div class="code-results"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 时间计算模块 -->
- <div role="tabpanel" class="tab-pane" id="time-calculator" style="display: none;">
- <div class="tool-section">
- <h4 class="section-title">🧮 时间计算器</h4>
- <p class="section-desc">进行时间差计算、时间加减运算等复杂时间计算</p>
-
- <div class="calculator-container">
- <div class="calculator-main-layout">
- <!-- 左侧:时间差计算 -->
- <div class="left-calc-panel">
- <div class="calc-section">
- <label class="input-label">
- <span class="label-icon">⏰</span>
- 时间差计算
- </label>
- <div class="calc-input-group">
- <div class="time-inputs">
- <div class="time-input-item">
- <span class="input-prefix">从</span>
- <input type="text" class="form-control start-time" placeholder="开始时间(如:2024-01-01 10:00:00)">
- </div>
- <div class="calc-separator">到</div>
- <div class="time-input-item">
- <input type="text" class="form-control end-time" placeholder="结束时间(如:2024-01-02 15:30:00)">
- </div>
- </div>
- <button class="btn btn-primary calc-btn">📊 计算时间差</button>
- </div>
- <div class="calc-results"></div>
- </div>
- </div>
-
- <!-- 右侧:时间加减运算 -->
- <div class="right-calc-panel">
- <div class="calc-section">
- <label class="input-label">
- <span class="label-icon">➕➖</span>
- 时间加减运算
- </label>
- <div class="calc-input-group">
- <!-- 单行布局:基准时间 + 操作 + 数量 + 单位 -->
- <div class="single-row-group">
- <div class="base-time-group">
- <input type="text" class="form-control base-time" placeholder="基准时间(如:2024-01-01 10:00:00)">
- </div>
- <div class="operation-select-group">
- <select class="form-control operation-select">
- <option value="add">➕ 增加</option>
- <option value="subtract">➖ 减去</option>
- </select>
- </div>
- <div class="amount-group">
- <input type="number" class="form-control amount-input" placeholder="数量">
- </div>
- <div class="unit-group">
- <select class="form-control unit-select">
- <option value="seconds">秒</option>
- <option value="minutes">分钟</option>
- <option value="hours">小时</option>
- <option value="days">天</option>
- <option value="months">月</option>
- <option value="years">年</option>
- </select>
- </div>
- </div>
-
- <button class="btn btn-success calc-add-btn">🧮 计算结果</button>
- </div>
- <div class="calc-results add-subtract-results"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 批量转换模块 -->
- <div role="tabpanel" class="tab-pane" id="batch-converter" style="display: none;">
- <div class="tool-section">
- <h4 class="section-title">📊 批量转换器</h4>
- <p class="section-desc">批量处理时间数据</p>
-
- <div class="main-layout">
- <!-- 左侧:输入和控制 -->
- <div class="left-panel">
- <div class="panel-section">
- <label class="input-label">
- <span class="label-icon">📝</span>
- 批量时间输入(每行一个)
- </label>
- <div class="batch-input-group">
- <textarea class="form-control batch-input" rows="10"
- placeholder="输入多个时间值,每行一个: 1699999999 2024-01-15 10:30:45 now today 2024/01/15"></textarea>
- <div class="batch-actions">
- <button class="btn btn-primary batch-convert-btn">🔄 批量转换</button>
- <button class="btn btn-secondary batch-clear-btn">🗑️ 清空</button>
- </div>
- </div>
- </div>
- </div>
-
- <!-- 右侧:结果显示 -->
- <div class="right-panel">
- <div class="panel-section">
- <label class="result-label">
- <span class="label-icon">📊</span>
- 转换结果
- <span class="result-stats"></span>
- </label>
- <div class="batch-results"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 时区专家模块 -->
- <div role="tabpanel" class="tab-pane" id="timezone-expert" style="display: none;">
- <div class="tool-section">
- <h4 class="section-title">🌍 时区转换专家</h4>
- <p class="section-desc">精确的时区转换,支持夏令时和历史时区数据</p>
-
- <div class="main-layout">
- <!-- 左侧:输入和控制 -->
- <div class="left-panel">
- <div class="panel-section">
- <label class="input-label">
- <span class="label-icon">🌍</span>
- 时区转换设置
- </label>
- <div class="timezone-input-group">
- <div class="time-input-section">
- <label class="form-label">输入时间</label>
- <input type="text" class="form-control timezone-time-input" placeholder="输入时间(如:2024-01-15 10:30:00)">
- </div>
- <div class="timezone-selectors">
- <div class="from-timezone">
- <label class="form-label">从时区</label>
- <select class="form-control from-timezone-select">
- <option value="Pacific/Midway">🇺🇸 中途岛 (GMT-11)</option>
- <option value="America/Adak">🇺🇸 阿达克 (GMT-10)</option>
- <option value="Pacific/Honolulu">🇺🇸 夏威夷 (GMT-10)</option>
- <option value="America/Anchorage">🇺🇸 安克雷奇 (GMT-9)</option>
- <option value="America/Los_Angeles">🇺🇸 洛杉矶 (PST, GMT-8)</option>
- <option value="America/Denver">🇺🇸 丹佛 (MST, GMT-7)</option>
- <option value="America/Chicago">🇺🇸 芝加哥 (CST, GMT-6)</option>
- <option value="America/New_York">🇺🇸 纽约 (EST, GMT-5)</option>
- <option value="America/Caracas">🇻🇪 加拉加斯 (GMT-4)</option>
- <option value="America/Santiago">🇨🇱 圣地亚哥 (GMT-4)</option>
- <option value="America/Halifax">🇨🇦 哈利法克斯 (GMT-4)</option>
- <option value="America/St_Johns">🇨🇦 圣约翰斯 (GMT-3:30)</option>
- <option value="America/Argentina/Buenos_Aires">🇦🇷 布宜诺斯艾利斯 (GMT-3)</option>
- <option value="America/Sao_Paulo">🇧🇷 圣保罗 (GMT-3)</option>
- <option value="Atlantic/Azores">🇵🇹 亚速尔群岛 (GMT-1)</option>
- <option value="Europe/London">🇬🇧 伦敦 (GMT+0)</option>
- <option value="Europe/Berlin">🇩🇪 柏林 (CET, GMT+1)</option>
- <option value="Europe/Paris">🇫🇷 巴黎 (CET, GMT+1)</option>
- <option value="Europe/Athens">🇬🇷 雅典 (EET, GMT+2)</option>
- <option value="Europe/Istanbul">🇹🇷 伊斯坦布尔 (GMT+3)</option>
- <option value="Europe/Moscow">🇷🇺 莫斯科 (GMT+3)</option>
- <option value="Asia/Dubai">🇦🇪 迪拜 (GMT+4)</option>
- <option value="Asia/Karachi">🇵🇰 卡拉奇 (GMT+5)</option>
- <option value="Asia/Dhaka">🇧🇩 达卡 (GMT+6)</option>
- <option value="Asia/Bangkok">🇹🇭 曼谷 (GMT+7)</option>
- <option value="Asia/Shanghai">🇨🇳 北京 (GMT+8)</option>
- <option value="Asia/Tokyo">🇯🇵 东京 (GMT+9)</option>
- <option value="Australia/Sydney">🇦🇺 悉尼 (GMT+10)</option>
- <option value="Pacific/Auckland">🇳🇿 奥克兰 (GMT+12)</option>
- </select>
- </div>
- <div class="to-timezone">
- <label class="form-label">到时区</label>
- <select class="form-control to-timezone-select">
- <option value="Pacific/Midway">🇺🇸 中途岛 (GMT-11)</option>
- <option value="America/Adak">🇺🇸 阿达克 (GMT-10)</option>
- <option value="Pacific/Honolulu">🇺🇸 夏威夷 (GMT-10)</option>
- <option value="America/Anchorage">🇺🇸 安克雷奇 (GMT-9)</option>
- <option value="America/Los_Angeles">🇺🇸 洛杉矶 (PST, GMT-8)</option>
- <option value="America/Denver">🇺🇸 丹佛 (MST, GMT-7)</option>
- <option value="America/Chicago">🇺🇸 芝加哥 (CST, GMT-6)</option>
- <option value="America/New_York">🇺🇸 纽约 (EST, GMT-5)</option>
- <option value="America/Caracas">🇻🇪 加拉加斯 (GMT-4)</option>
- <option value="America/Santiago">🇨🇱 圣地亚哥 (GMT-4)</option>
- <option value="America/Halifax">🇨🇦 哈利法克斯 (GMT-4)</option>
- <option value="America/St_Johns">🇨🇦 圣约翰斯 (GMT-3:30)</option>
- <option value="America/Argentina/Buenos_Aires">🇦🇷 布宜诺斯艾利斯 (GMT-3)</option>
- <option value="America/Sao_Paulo">🇧🇷 圣保罗 (GMT-3)</option>
- <option value="Atlantic/Azores">🇵🇹 亚速尔群岛 (GMT-1)</option>
- <option value="Europe/London">🇬🇧 伦敦 (GMT+0)</option>
- <option value="Europe/Berlin">🇩🇪 柏林 (CET, GMT+1)</option>
- <option value="Europe/Paris">🇫🇷 巴黎 (CET, GMT+1)</option>
- <option value="Europe/Athens">🇬🇷 雅典 (EET, GMT+2)</option>
- <option value="Europe/Istanbul">🇹🇷 伊斯坦布尔 (GMT+3)</option>
- <option value="Europe/Moscow">🇷🇺 莫斯科 (GMT+3)</option>
- <option value="Asia/Dubai">🇦🇪 迪拜 (GMT+4)</option>
- <option value="Asia/Karachi">🇵🇰 卡拉奇 (GMT+5)</option>
- <option value="Asia/Dhaka">🇧🇩 达卡 (GMT+6)</option>
- <option value="Asia/Bangkok">🇹🇭 曼谷 (GMT+7)</option>
- <option value="Asia/Shanghai">🇨🇳 北京 (GMT+8)</option>
- <option value="Asia/Tokyo">🇯🇵 东京 (GMT+9)</option>
- <option value="Australia/Sydney">🇦🇺 悉尼 (GMT+10)</option>
- <option value="Pacific/Auckland">🇳🇿 奥克兰 (GMT+12)</option>
- </select>
- </div>
- </div>
- <button class="btn btn-primary timezone-convert-btn">🔄 转换时区</button>
- </div>
- </div>
- </div>
-
- <!-- 右侧:结果显示 -->
- <div class="right-panel">
- <div class="panel-section">
- <label class="result-label">
- <span class="label-icon">⏰</span>
- 转换结果
- </label>
- <div class="timezone-results"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <!-- 数据库工具模块 -->
- <div role="tabpanel" class="tab-pane" id="database-tools" style="display: none;">
- <div class="tool-section">
- <h4 class="section-title">🗄️ 数据库时间工具</h4>
- <p class="section-desc">生成各种数据库的时间格式和SQL查询语句</p>
-
- <div class="main-layout">
- <!-- 左侧:输入和控制 -->
- <div class="left-panel">
- <div class="panel-section">
- <label class="input-label">
- <span class="label-icon">⚙️</span>
- 数据库配置
- </label>
- <div class="db-input-group">
- <div class="time-db-input">
- <label class="form-label">输入时间值</label>
- <input type="text" class="form-control db-time-input" placeholder="输入时间值(如:1699999999 或 2024-01-15 10:30:00)">
- </div>
- <div class="db-type-selector">
- <label class="form-label">选择数据库类型</label>
- <select class="form-control db-type-select">
- <option value="mysql">🐬 MySQL</option>
- <option value="postgresql">🐘 PostgreSQL</option>
- <option value="sqlite">📱 SQLite</option>
- <option value="mongodb">🍃 MongoDB</option>
- </select>
- </div>
- <button class="btn btn-primary db-generate-btn">🔧 生成格式</button>
- </div>
- </div>
- </div>
-
- <!-- 右侧:结果显示 -->
- <div class="right-panel">
- <div class="panel-section">
- <label class="result-label">
- <span class="label-icon">📄</span>
- 数据库格式与SQL语句
- </label>
- <div class="db-results"></div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- </div>
- <script type="text/javascript" src="../static/vendor/evalCore.min.js"></script>
- <!-- 引入所需的JavaScript库 -->
- <script type="text/javascript" src="../static/vendor/jquery/jquery-3.3.1.min.js"></script>
- <script type="text/javascript" src="index.js"></script>
- </body>
- </html>
|