精华内容
下载资源
问答
  • Cron表达式插件

    2018-06-13 14:18:50
    自己幸幸苦苦扣出来的,还望好评。程序猿何必为难程序猿
  • 介绍Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷...

    easy-cron

    1. 介绍

    Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。

    easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地定义cron表达式,并支持给定开始时间后的执行时间点,方便排除错误。

    本工程包括测试代码,和vue原始文件。

    a05e3c48460da0265f6d38d5aa567aa1.png

    b25a01e5f8c1e6bad1038d9a1197f696.png

    3064e1303d1649d3faf021f9efcdbadd.png

    89302fa513af45d11dba8e2d2067fe2c.png

    2. 软件特性

    支持特性:

    纯js代码实现,可以方便和其他iview&vue.js项目无缝接入。

    v-model双向数据绑定

    多种crontab表达式,可以支持到参数年

    cron表达式校验器validator

    提供easy-cron原始界面组件,方便开发者自己封装

    默认提供input-cron输入组件,开发者可以直接使用,内置validator校验

    纯js模拟cron表达式的执行触发时间点列表

    可以指定开始之后,观察cron表达式触发执行时间点

    可隐藏参数年的配置(hideYear)

    依赖组件列表:

    3. 安装教程

    3.1 Demo编译运行

    如果要运行demo,可以直接运行命令即可: npm run dev,当然也看直接在线查看。

    3.2 集成到项目中

    可以将src/componets/easy-cron中的代码直接复制到工程中,就可以直接导入使用。

    3.3 支持格式

    * * * * * * *

    ┬ ┬ ┬ ┬ ┬ ┬ ┬

    │ │ │ │ │ | └ year (optional)

    │ │ │ │ │ └ day of week (0 - 7) (0 or 7 is Sun)

    │ │ │ │ └───── month (1 - 12)

    │ │ │ └────────── day of month (1 - 31)

    │ │ └─────────────── hour (0 - 23)

    │ └──────────────────── minute (0 - 59)

    └───────────────────────── second (0 - 59)

    星期对应的单词缩写映射关系如下:

    'SUN': 0 或 7

    'MON': 1

    'TUE': 2

    'WED': 3

    'THU': 4

    'FRI': 5

    'SAT': 6

    注意: cron表达式执行预览时间,暂时不支持特殊参数(L,W,#)

    4. 使用说明

    4.1 快速使用input-cron输入cron表达式组件

    直接参考代码如下

    import InputCron from './easy-cron/input-cron'

    ...

    placeholder="请输入cron表达式(http://www.easysb.cn)"/>

    4.2 直接使用easy-cron元组件

    直接参考代码如下

    import EasyCron from './easy-cron'

    ...

    v-model="formData.cronValue2">

    // 可以调整元组件大小,disabled属性用来禁用编辑, hideYear属性表示是否隐藏参数年

    v-model="formData.cronValue3" :disabled="true">

    4.3 使用cron表达式校验器

    直接参考代码如下

    v-model="formData.cronValue3">

    ....

    import CronValidator from './easy-cron/validator'

    ...

    data () {

    return {

    msg: 'Cron表达式测试页面',

    formData: {

    ....

    cronValue1: '',

    cronValue2: '4 1/2 5 7-8 1 ?',

    cronValue3: '1 2-4 3/5 3/12 4,5,8 ? *'

    },

    formDataValidator: {

    cronValue: [

    { validator: CronValidator }

    ]

    }

    }

    5. 属性说明

    属性名

    参数类型

    说明

    v-model

    String

    双向绑定

    disabled

    Boolean

    是否禁止编辑

    exeStartTime

    Number, String, Date

    设置cron表达式开始执行时间

    hideYear

    Boolean

    是否隐藏参数年设置,如果隐藏,那么参数年将会全部忽略掉

    6. 参与贡献

    7. 参考项目

    本组件实现参考以下多位大佬:

    展开全文
  • Cron表达式插件此表达式生成器,可以直接打开,可以应用到自己的web页面 Quartz 中的 Cron 表达式。 可以再页面根据用户的选择自动获取Cron表达式传递到后台进行操作。 各种格式的Cron表达式获取: 日、月、年、...
  • 基于BootStrap简洁美观Cron表达式选择器JS插件,只需要在项目中将JS文件导入和基本的BootStrap控件就可以运行,具体可看里面的demo.html
  • cron表达式页面生成

    2018-06-26 00:47:38
    cron表达式页面生成cron表达式页面生成cron表达式页面生成cron表达式页面生成
  • Cron表达式

    2020-08-24 18:15:12
    Spring Task中cron表达式详解 Cron 可视化工具 IDEA-Cron Description 插件 表达式定义 cron 表达式是一个字符串,该字符串由 6 个空格分为 7 个域,每一个域代表一个时间含义。 通常定义 “年” 的部分可以省略,...

    Ref

    表达式定义

    cron 表达式是一个字符串,该字符串由 6 个空格分为 7 个域,每一个域代表一个时间含义。 通常定义 “年” 的部分可以省略,实际常用的 Cron 表达式由前 6 部分组成。格式如下

    [秒] [分] [时] [日] [月] [周] [年]

    是否必填值以及范围通配符
    0-59, - * /
    0-59, - * /
    0-23, - * /
    1-31, - * ? / L W
    1-12 或 JAN-DEC, - * /
    1-7 或 SUN-SAT, - * ? / L #
    1970-2099, - * /

    需要说明的是,Cron 表达式中,“周” 是从周日开始计算的。“周” 域上的 1 表示的是周日,7 表示周六。

    Cron中的通配符

    • , :指的是在两个以上的时间点中都执行。如果我在 “分” 这个域中定义为 8,12,35,则表示分别在第8分,第12分 第35分执行该定时任务。
    • - :指定在某个域的连续范围。如果在 “时” 这个域中定义 1-6,则表示在 1 到 6 点之每小时都触发一次,等价于 1,2,3,4,5,6
    • * :表示所有值,可解读为 “每”。 如果在 “日” 这个域中设置 *,表示每一天都会触发。
    • ? :表示不指定值。使用的场景为不需要关心当前设置这个字段的值。例如,要在每月的 8 号触发一个操作,但不关心是周几,我们可以这么设置 0 0 0 8 * ?
    • / :表示触发步进(step),"/" 前面的值代表初始值( "*" 等同 "0"),后面的值代表偏移量,在某个域上周期性触发。比如 在 “秒” 上定义 5/10 表示从 第 5 秒开始,每 10 秒执行一次;而在 “分” 上则表示从 第 5 分钟开始,每 10 分钟执行一次。
    • L :表示英文中的 LAST 的意思,只能在 “日” 和 “周” 中使用。在 “日” 中设置,表示当月的最后一天(依据当前月份,如果是二月还会依据是否是润年), 在 “周” 上表示周六,相当于 “7” 或 “SAT”。如果在 “L” 前加上数字,则表示该数据的最后一个。例如在 “周” 上设置 “7L” 这样的格式,则表示 “本月最后一个周六”。
    • W :表示离指定日期的最近那个工作日(周一至周五)触发,只能在 “日” 中使用且只能用在具体的数字之后。若在 “日” 上置 “15W”,表示离每月 15 号最近的那个工作日触发。假如 15 号正好是周六,则找最近的周五(14号)触发;如果 15 号是周未,则找最近的下周一(16号)触发;如果 15 号正好在工作日(周一至周五),则就在该天触发。如果是 “1W” 就只能往本月的下一个最近的工作日推不能跨月往上一个月推。
    • #: 例如,A#B 表示每月的第 B 个周的周 A(周的计数从周日开始),只能作用于 “周” 上。例如 2#3 表示在每月的第 3 个周二,5#3 表示本月第 3 周的星期四。

    注意,L 用在 “周” 这个域上,每周最后一天是周六。“周” 域上的 1 表示的是周日,7 表示周六,即每周计数是从周日开始的。

    可视化工具

    在上述可视化工具网站上,点击“反解析到UI”,可以看到定时任务最近5次运行时间,便于理解。

    另外,在IDEA中,安装 Cron Description 插件也可以进行可视化语义展示,如下图所示,鼠标悬浮到Cron表达式上,即可看到可视化语义。

    img

    示例

    下面给出一些示例,可根据上面的解释进行解读。

    • 每天晚上12点触发任务:0 0 0 * * ?
    • 每隔 1 分钟执行一次:0 */1 * * * ?
    • 每月 1 号凌晨 1 点执行一次:0 0 1 1 * ?
    • 每月最后一天 23 点执行一次:0 0 23 L * ?
    • 每周周六凌晨 3 点实行一次:0 0 3 ? * L
    • 在24分,30分执行一次:0 24,30 * * * ?
    展开全文
  • vue[分享一个cron表达式生成插件]

    千次阅读 2020-09-15 14:54:57
    前端进行各种操作之后,最终生成两个cron表达式,分别为开始时间和结束时间的cron表达式,且结束时间表达式的时间必须在开始时间之后,并且符合cron表达式的规则。 任务类型有:一次性任务 和 循环任务两种 一次性...

    cron表达式规则

    要写一个常规能够使用的cron表达式生成器首先得了解cron表达式的组成结构以及各种相关的规则。参考如下文章:
    参考1:https://www.cnblogs.com/daxiangfei/p/10219706.html
    参考2:https://www.cnblogs.com/rever/p/9887384.html

    分享路径地址

    https://github.com/tw-github/vue-quick-cron

    插件效果

    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    由于项目是纯vue手写,因此本插件没有任何依赖,只需要复制cron文件夹即可使用。如果快捷生成不满足需求,可以自己去编写源文件去修改或者添加自己需要的功能

    展开全文
  • 基于BootStrap简洁美观Cron表达式选择器JS插件,只需要在项目中将JS文件导入和基本的BootStrap控件就可以运行,具体可看里面的demo.html
  • 维克朗编辑 (vue-cron-editor) VueCronEditor is a component library built with Vue & Vuetify allowing for easier... VueCronEditor是使用Vue&Vuetify构建的组件库,可以更轻松地编辑CRON表达式。 View De...

    cron 表达式前端组件

    维克朗编辑 (vue-cron-editor)

    VueCronEditor is a component library built with Vue & Vuetify allowing for easier editing of CRON expressions.

    VueCronEditor是使用Vue&Vuetify构建的组件库,可以更轻松地编辑CRON表达式。

    要求 (Requirements)

    • Vue ^2.0

      Vue ^ 2.0

    安装 (Installation)

    There are currently two versions available:

    当前有两个版本:

    • vue-cron-editor-buefy (RECOMMENDED)

      vue-cron-editor-buefy (推荐)

    npm install vue-cron-editor-buefy --save
    • vue-cron-editor-vuetify

      Vue Cron编辑器Vuetify

      • NOTE: Requires your application to use Vuetify ^2.0 and have your components wrapped inside 注意 :要求您的应用程序使用Vuetify ^ 2.0并将组件包装在<v-app> element.<v-app>元素内。
    npm install vue-cron-editor-vuetify --save

    用法 (Usage)

    <template>
      <v-app>
        <v-content>
          <VueCronEditorBuefy v-model="cronExpression"/>
          {{cronExpression}}
        </v-content>
      </v-app>
    </template>
    
    <script>
    import VueCronEditorBuefy from 'vue-cron-editor-buefy';
    
    export default {
      name: 'App',
      components: {
        VueCronEditorBuefy
      },
      data: () => ({
          cronExpression: "*/1 * * * *"
      }),
    };
    </script>

    The editor tab will be set to one which is able to represent an initial expression given to a value prop (minutes tab in the example above). If none of the tabs can represent the given expression then advanced tab is selected.

    编辑器选项卡将设置为一个能够表示赋予value prop的初始表达式的选项卡(在上例中为分钟选项卡)。 如果所有选项卡都不能代表给定的表达式,则选择高级选项卡。

    i18n (i18n)

    The language of the component can be selected with the locale prop.

    组件的语言可以使用locale prop选择。

    <VueCronEditorBuefy
        v-model="expression"
        locale="pl"
    ></VueCronEditorBuefy>

    Currently supported languages:

    当前支持的语言:

    • en

    • pl

      PL

    Custom locales can be provided via a customLocales prop:

    可以通过customLocales道具提供自定义语言环境:

    <VueCronEditorBuefy
        v-model="expression"
        locale="test"
        :custom-locales="{
        test: {
            every: "Every",
            minutes: "minute(s)",
            hoursOnMinute: "hour(s) on minute",
            daysAt: "day(s) at",
            at: "at",
            onThe: "On the",
            dayOfEvery: "day of every",
            monthsAt: "month(s) at",
            everyDay: "Every",
            mon: "Mon",
            tue: "Tue",
            wed: "Wed",
            thu: "Thu",
            fri: "Fri",
            sat: "Sat",
            sun: "Sun",
            hasToBeBetween: "Has to be between",
            and: "and"
        }
    }"
    ></VueCronEditorBuefy>

    贡献 (Contributing)

    To build the demo/samples app run in root directory:

    要构建demo / samples应用程序,请在根目录中运行:

    npm install
    npm run serve

    For testing the built packages:

    要测试构建的软件包:

    npm install
    cd src/vuetify
    npm run pack
    cd ../buefy
    npm run pack
    
    cd ../../test_app
    npm install
    npm run serve

    翻译自: https://vuejsexamples.com/vuetify-component-for-easier-editing-of-cron-expressions/

    cron 表达式前端组件

    展开全文
  • Cron表达式生成器html源码

    热门讨论 2015-08-11 16:51:59
    在线Cron表达式生成器html源码 quartz任务调度 Cron表达式 在线生成
  • 基于react和antd完成的一个创建cron插件。核心代码在src/cron/index.js。 本地安装引用 import ReactCron from '@/cron/index.js' require ( "@/cron/index.css) class App extends React.Component { return ...
  • cron表达式详解

    2019-08-01 19:42:31
    Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month DayofWeek Year Seconds Minutes Hours DayofMonth...
  • quartz cron表达式 使用jquery,Bootstrap实现,可集成到自己的项目中,
  • 基于Vue的Cron表达式组件

    万次阅读 2019-07-17 21:03:24
    做项目中遇到动态任务的配置,刚好又是前后端分离采用的vue+elementUI,所以配置的时候想生成cron表达式,找了好久,找到一个大神的作品,希望大家都支持一下 基于Vue的Cron表达式组件 ...
  • Cron表达式 生成器

    千次阅读 2019-05-10 13:54:02
    这个是一个用于前端生成Cron表达式的一个js,网络上面的资源 修改成功了自己需要的 效果:生成表达式 表达式解析:可以自定义显示天数 这里显示了7天 具体使用源码在GitHub上面:...
  • cron 表达式详解和转换成中文

    千次阅读 2020-11-21 21:32:10
    1,cron表达式生成器 在线cron表达式生成器:https://www.bejson.com/othertools/cron/ 2,cron表达式 一,结构 Cron表达式是一个表示时间周期的字符串。分为6或7个域,每一个域代表一个含义。 corn从左到右...
  • 超级好用的Cron表达式UI组件easy-cron

    万次阅读 2019-04-11 22:12:55
    Cron表达式看则简单,但是实际上如果手写的话,非常容易出错的,而且很难及时发现,而easy-cron就是为此应运而生的。 easy-cron是基于Vue.js和iview实现crontab表达式的UI组件,支持多种特性,可以方便、快捷直观地...
  • VUE中Cron表达式校验

    千次阅读 2020-08-14 15:41:56
    个人尝试过网上好多cron表达式校验总结出来一个比较好的正则校验,感觉比官方的都好用又简单: cron: [ { required: true, message: "请输入Cron表达式", trigger: "blur" }, { pattern: "^\\s*($|#|\\w+\\s*=|...
  • Cron表达式工具一: Cron表达式在线生成、预览工具,基于JFinal开发。 在线Cron表达式生成器 Cron表达式工具二: 是谷歌插件中引入的,首先需要引入FeHelper插件,有些小伙伴,并没有谷歌助手这个插件,没关系,在...
  • quartz定时任务cron表达式详解

    万次阅读 多人点赞 2015-03-16 16:52:28
    cron表达式用于配置cronTrigger的实例。cron表达式实际上是由七个子表达式组成。这些表达式之间用空格分隔。 1.Seconds (秒) 2.Minutes(分) 3.Hours(小时) 4.Day-of-Month (天) 5.Month(月) 6.Day-of-...
  • vue-cron插件的使用及将cron解析成中文vue-cron插件的使用第一步:安装依赖第二步:引用第三步:在vue页面的用法效果去掉秒和年插入链接与图片定时任务cron解析成中文简易的工具类该插件存在的一个缺陷 vue-cron插件...
  • 这是一个cron表达式生成插件,基于vue与element-ui实现 依赖 Vue 2.0.0+ element-ui 2.0.0+ 安装方式 npm install vue-cron 引入方式 //前置配置 import Vue from 'vue' import ElementUI from 'element-ui'; import ...
  • 一个将cron表达式转换为人类可读字符串的Python库。 从移植到Python。 作者:亚当·舒伯特(Adam Schubert)( ) 原始作者和信誉:Brady Holt( ) 执照: 特征 支持所有cron表达式特殊字符,包括* /,-? LW,#...
  • cron表达式前端生成工具,html实现,方便用于web项目当中
  • 一、cron表达式简单介绍... 1、cron是为了方便编写定时执行作业时间扩展出来的插件,这个有很多版本(网页版,窗体版等),cron表达式的存在,从而大大减低设置作业人员的操作难度和开发人员的编写难度。  2、cr...
  • 在线使用地址:cron表达式在线生成器 在线demo下载:cron表达式源代码   1)Cron表达式的格式:秒 分 时 日 月 周 年(可选)。  字段名 允许的值 允许的特殊字符 秒 0-59 ...
  • Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month DayofWeek Year或 Seconds Minutes Hours DayofMonth ...
  • cron 表达式嵌入式html

    千次阅读 2018-09-05 17:08:34
    网上找个cron 源码包下载 修改cron.js 文件 change方法   写一个获取时间列表的接口 也可以用其他方法转化    成品

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,609
精华内容 1,443
关键字:

cron表达式插件