实现 Cron表达式生成器 工具

分类：developer ｜ 标签：Cron、定时、调度 生成与解析 Cron 并预测执行

2.1 功能说明

生成与解析 Cron 并预测执行

2.1.1 使用指南

功能说明

可视化生成 5 段 Cron 表达式（分 时 日 月 周），并解析已输入表达式，预测接下来 5 次执行时间。

使用场景

定时任务 / 调度配置。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• compose()
• fromInput()
• predict()
• copy()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, reactive } from 'vue'
import { CronExpressionParser } from 'cron-parser'
import ToolPageShell from '@/components/ToolPageShell.vue'

const fields = [
  { k: 'min', label: '分', ph: '0-59 / *' },
  { k: 'hour', label: '时', ph: '0-23 / *' },
  { k: 'dom', label: '日', ph: '1-31 / *' },
  { k: 'mon', label: '月', ph: '1-12 / *' },
  { k: 'dow', label: '周', ph: '0-6 / *' }
]
const cron = reactive({ min: '0', hour: '*', dom: '*', mon: '*', dow: '*' })
const expr = ref('0 * * * *')
const exprInput = ref('')
const nextRuns = ref([])
const error = ref('')

function compose() {
  expr.value = `${cron.min} ${cron.hour} ${cron.dom} ${cron.mon} ${cron.dow}`
  exprInput.value = expr.value
}
function fromInput() {
  const parts = exprInput.value.trim().split(/\s+/)
  if (parts.length === 5) {
    cron.min = parts[0]; cron.hour = parts[1]; cron.dom = parts[2]; cron.mon = parts[3]; cron.dow = parts[4]
    expr.value = exprInput.value.trim()
  }
}
function predict() {
  error.value = nextRuns.value = []
  try {
    const interval = CronExpressionParser.parse(expr.value.trim())
    const runs = []
    let it = interval
    for (let i = 0; i < 5; i++) {
      const d = it.next().toDate()
      runs.push(d.toLocaleString())
    }
    nextRuns.value = runs
  } catch (e) { error.value = '表达式无效：' + e.message }
}
function copy() { navigator.clipboard?.writeText(expr.value) }
compose()

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/cron-generator