【动态任务-七】Spring整合Cron在线生成表达式（基于bootstrap3自适应样式）

最新推荐文章于 2023-08-26 21:32:16 发布
最新推荐文章于 2023-08-26 21:32:16 发布
阅读量1.6k 收藏 3
点赞数
分类专栏： quartz 文章标签： 1024程序员节
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hj7jay/article/details/109251275
版权

【过往系列文章】

cron表达式通常有6个（也可能7个）由空格分隔的时间元素。该词来源于希腊语chronos（χρόνος），原意是时间。

顺序  字段  取值范围                     允许的特殊字符
1    秒    0~59                        , - * /
2    分    0~59                        , - * /
3    时    0~23                        , - * /
4    日    1~31                        , - * ? / L W C
5    月    1~12                        , - * /
6    星期   0~7 (SUN=0或7，或SUN-SAT）   , - * ? / L C #
7    年份   1970~2099（可有可无）         , - * /

简单点，直接举几个例子:

0 0 2 1 * ? * 表示在每月的1日的凌晨2点调度任务

0 15 10 ? * MON-FRI 表示周一到周五每天上午10：15执行作业

0 15 10 ? * 6L 2002-2006 表示2002-2006年的每个月的最后一个星期五上午10:15执行作

对于非技术用户来说，妈呀，这是啥？

做动态任务，最难的可能就是在线生成Cron表达式，以前我们的做法一般是百度类似的表达式改造，或者用一些在线页面生成Cron，如果遇上用户不会，需要一个页面让他们可以看着选择需要的执行时间，拿我这个是不错的选择

这里我整合了一个分享给大家，效果图

这里用到的就是有两个，打开一个窗口的页面，我用的layer，这个一般用最新的就可以了

JY.Layer.iframeFull("Cron快速选择",jypath+"/static/plugins/cronb/cron.html");

关于JY京缘网络的js核心组件，这个我把封装源码再分享一下

Layer:{
			//title:相册标题
			photo:function(s,t,a){
				layer.photos({photos: {"title":t,"id": 100, "start": 0,"data": [{"alt":a,"pid":1,"src":s,"thumb":s}]}});
			},
			iframe:function(title,url,width,height){
				let layerIframe=layer.open({maxmin:true,type:2,title:title,shadeClose:true,area:[width, height],content:url});return layerIframe;
			},
			iframeFull:function(title,url){
				let layerIframe=layer.open({type:2,title:title,shadeClose:true,area:[document.documentElement.clientWidth * 1+"px", document.documentElement.clientHeight * 1+"px"],content:url});layer.full(layerIframe);return layerIframe;
			},
			iframeRatio:function(title,url,ratio){
				let layerIframe=layer.open({type:2,title:title,shadeClose:true,maxmin:true ,area:[document.documentElement.clientWidth * ratio+"px", document.documentElement.clientHeight * ratio+"px"],content:url});return layerIframe;
			}
		}

核心的js主要有两个

init.js，定义一些页面的方法

/**
 * Created by LinJ on 2015/11/5.
 * 初始化页面模块js
 */

//初始化各类元素以及监听
$(function () {
    inition();
});

//页面所有的页签名称
var itemList = ["second", "min", "hour", "day", "month", "week"];

//初始化各个页签自主选择的最大值
var max_second = 59;
var max_min = 59;
var max_hour = 23;
var max_day = 31;
var max_month = 12;
var max_quarter = 12;
var max_week = 7;

function inition() {
    //初始化checkbox
    initCheckBox("l_second", 0, 59);
    initCheckBox("l_min", 0, 59);
    initCheckBox("l_hour", 0, 23);
    initCheckBox("l_day", 1, 31);
    initCheckBox("l_month", 1, 12);
    initCheckBox("l_quarter", 1, 12);
    initCheckBox("l_week", 1, 7);


    //初始化单选、复选框
    $('input').iCheck({
        checkboxClass: 'icheckbox_square-blue',
        radioClass: 'iradio_square-blue',
        increaseArea: '20%' // optional
    });

    //解析按钮绑定函数
    $('#explain').click(function () {
        reverseExp();
    });
    
    $("#saveCronBtn").on('click', function(e) {
		let cronInput=$("#cron").val();
		parent.$("#transCronInput").val(cronInput);	
		parent.calNextPoint(cronInput);		
		let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    	parent.layer.close(index); //再执行关闭  
	});
    
    $("#cancelCronBtn").on('click', function(e) {
		let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    	parent.layer.close(index); //再执行关闭  
	});

    initFirstRadio();
    initNoConfirmRadio();
    initRadio();
    initRadioCheckDiv();
    initSpinner();
    initCronFromTable();
    initListChange();
    initMonthByQuarter();

    //如果已有传输过来的值，那么放入cron字段并且反解析
    var instr = $("#transCron").val();
    if (instr) {
        $("#cron").val(instr);
        reverseExp();
    }

}

//初始化大量的复选框 根据div的id以及数量进行初始化 每个复选框占1/12宽度
function initCheckBox(divid, start, cnt) {
    if (cnt != null && cnt > 0) {
        for (dc = start; dc <= cnt; dc++) {
            $("#" + divid).append(" <div class='col-xs-1 col-sm-1 col-md-1'> <label><input type='checkbox' value=" + dc + "> &nbsp;" + dc + "</label></div>");
        }
    }
}

//初始化每个页签第一排的radio，即*条件
function initFirstRadio() {
    $('.firstradio').on('ifChecked', function () {
        everyTime(this);
    });
    $('.unselectradio').on('ifChecked', function () {
        clearSpan(this);
    });

    //季度的第一排radio，需要指定为month
    $('.firstradioreactor').on('ifChecked', function () {
        everyTimeByName("v_month");
    });
}

//初始化不指定的radio 即？条件 以及最后一日条件
function initNoConfirmRadio() {
    $('.noconfirmradio').on('ifChecked', function () {
        unAppoint(this);
    });
    $('.lastdayradio').on('ifChecked', function () {
        lastDay(this);
    });

}

//初始化每个页签选择的的radio
function initRadio() {
    //周期选择的radio
    $('.cycleradio').on('ifChecked', function () {
        writeStartAndEnd(this, "-");
    });
    //循环选择的radio
    $('.loopradio').on('ifChecked', function () {
        writeStartAndEnd(this, "/");
    });

    //指定选择的radio 即#
    $('.designradio').on('ifChecked', function () {
        writeStartAndEnd(this, "#");
    });


    //自主选择的radio
    $('.choiceradio').on('ifChecked', function () {

        var spanname = this.name;
        var theList = $("." + spanname + "List").find(':checkbox');
        var maxvalue = eval("max_" + this.name);
        changeSpanFromCheckList(theList, maxvalue, spanname);
    });

    //最近工作日的radio
    $('.nearradio').on('ifChecked', function () {
        writeEnd(this, "W");
    });

    //最后一个周几的radio
    $('.lastradio').on('ifChecked', function () {
        writeEnd(this, "L");
    });


}

//初始化div内容监听绑定函数，即点击div，对应radio被选中
function initRadioCheckDiv() {
    $('.radiocheck').click(function () {
        radioCheckByClick(this);
    });

    $.each(itemList, function (n, value) {
        var checkList = $("." + value + "List");
        checkList.click(function () {
            var theRadio = this.closest('.radiocheck').find(':radio');
            theRadio.eq(0).iCheck('check');
        });
    });
}


//绑定数字微调器
function initSpinner() {
    //绑定数字微调器
    $(".cyclespin").spinner('changing', function (e, newVal, oldVal) {
        //trigger immediately
        writeStartAndEnd(this, "-");
    });
    $(".loopspin").spinner('changing', function (e, newVal, oldVal) {
        //trigger immediately
        writeStartAndEnd(this, "/");
    });
    $(".designspin").spinner('changing', function (e, newVal, oldVal) {
        //trigger immediately
        writeStartAndEnd(this, "#");
    });
    $(".nearspin").spinner('changing', function (e, newVal, oldVal) {
        //trigger immediately
        writeEnd(this, "W");
    });
    $(".lastspin").spinner('changing', function (e, newVal, oldVal) {
        //trigger immediately
        writeEnd(this, "L");
    });
}

//表达式结果由表格生成到cron表达式
function initCronFromTable() {
    //查找所有name以v_开头的span元素
    var vals = $("span[name^='v_']");
    var cron = $("#cron");
    vals.change(function () {
        var item = [];
        vals.each(function () {
            item.push(this.innerHTML);
        });
        cron.val(item.join(" "));
    });
}

//定义checkbox在被点击的时候的绑定函数  循环遍历页签数组
function initListChange() {
    $.each(itemList, function (n, value) {
        var checkList = $("." + value + "List").find(':checkbox');
        var maxvalue = eval("max_" + value);
        initChangeOnCheckboxList(checkList, maxvalue, value);
    });
}

//给list的checkbox绑定点击方法 入参是list，最大值，指定输出的span名称
function initChangeOnCheckboxList(checkList, maxvalue, spanname) {
    checkList.on('ifChanged', function () {
        //模拟div被点击过一次
        $(this).closest('.radiocheck').click();
        changeSpanFromCheckList(checkList, maxvalue, spanname);
    });
}

//定义季度的月份选择监听
function initMonthByQuarter() {
    var checkList = $("#quarter_spe").find(':checkbox');
    checkList.on('ifChanged', function () {
        var vals = [];
        checkList.each(function () {
            if (this.checked) {
                vals.push(this.value);
            }
        });
        var val = "?";
        val = vals.join(",");
        ary = val.split(",");
        unselectAll('l_quarter');
        for (var i = 0; i < ary.length; i++) {
            $("#l_quarter input[value='" + ary[i] + "']").iCheck('check');
        }
    });
}

//清除选中状态
function unselectAll(listId) {
    for (var i = 1; i <= 12; i++) {
        $("#l_quarter input[value='" + i + "']").iCheck('uncheck');
    }
}

cronboot.js，主要功能模块

/**
 * Created by LinJ on 2015/11/5.
 * 页面功能模块js
 */



/**
 * 表达式重置为默认值
 */
function everyTime(dom) {
    var item = $("span[name=v_" + dom.name + "]");
    item.html("*");
    item.change();
}

/**
 * 表达式重置为默认值
 入参为元素的名字
 */
function everyTimeByName(v_name) {
    var item = $("span[name=" +v_name + "]");
    item.html("*");
    item.change();
}

//清除表达式的值
function clearSpan(dom){
    var item = $("span[name=v_" +dom.name + "]");
    item.html("");
    item.change();
}


/**
 * 不指定 即重置为？号
 */
function unAppoint(dom) {
    var name = dom.name;
    var val = "?";
    if (name == "year")
        val = "";
    var item = $("span[name=v_" + name + "]");
    item.html(val);
    item.change();
}

/**
 * 不指定 即重置为？号
 入参为元素的名字
 */
function unAppointByName(v_name) {

    var val = "?";
    if (v_name == "year")
        val = "";
    var item = $("span[name=" + v_name + "]");
    item.html(val);
    item.change();
}

//最后一日
function lastDay(dom){
    var item = $("span[name=v_" + dom.name + "]");
    item.html("L");
    item.change();
}

/**
 * 书写有前后的公式，包括 1-2 1/2 1#2 等
 */
function writeStartAndEnd(dom,sym) {
    var name = dom.name;
    var ns = $(dom).closest('.radiocheck').find(".numberspinner");
    var start = ns.eq(0).val();
    var end = ns.eq(1).val();
    var item = $("span[name=v_" + name + "]");
    item.html(start + sym + end);
    item.change();
}

//书写只有前的工时，包括1W 1L等
function writeEnd(dom,sym){
    var name = dom.name;
    var ns = $(dom).closest('.radiocheck').find(".numberspinner");
    var value = ns.eq(0).val();
    var item = $("span[name=v_" + name + "]");
    item.html(value + sym);
    item.change();
}


//点击div中的内容，对应radio即被选中的功能
function radioCheckByClick(dom){
    var theRadio = $(dom).find(':radio');
    theRadio.eq(0).iCheck('check');
}

//从checkList更新span的通用方法
function changeSpanFromCheckList(checkList,maxvalue,spanname){
    var vals = [];
    checkList.each(function () {
        if (this.checked) {
            vals.push(this.value);
        }
    });
    var val = "?";
    if (vals.length > 0 && vals.length < maxvalue) {
        val = vals.join(",");
    }else if(vals.length == maxvalue){
        val = "*";
    }
    var item = $("span[name=v_"+spanname+"]");
    item.html(val);
    item.change();
}

//解析cron表达式到生成器的函数
function reverseExp() {
    //获取参数中表达式的值
    var txt = $("#cron").val();

    if (txt) {
        var regs = txt.split(' ');
        expObj(regs[0], "second");
        expObj(regs[1], "min");
        expObj(regs[2], "hour");
        expDay(regs[3], "day");
        expObj(regs[4], "month");
        expWeek(regs[5],"week");

        if (regs.length > 6) {
            $("span[name=v_year]").html(regs[6]);
            expYear(regs[6],"year");
        }
    }
}

//解析时分秒月
function expObj(val,type){
    //表达式结果框赋值
    $("span[name=v_"+type+"]").html(val);
    //寻找对应类型的radio列表
    var radios = $(":radio[name="+type+"]");
    var ary = null;
    //根据值的类型进行判断与对应赋值，以及radio的选中。
    if (val == "*") {
        radios.eq(0).iCheck("check");
    } else if (val.split('-').length > 1) {
        ary = val.split('-');
        $(":text[name="+type+"]").eq(0).val(ary[0]);
        $(":text[name="+type+"]").eq(1).val(ary[1]);
        radios.eq(1).iCheck("check");
    } else if (val.split('/').length > 1) {
        ary = val.split('/');
        $(":text[name="+type+"]").eq(2).val(ary[0]);
        $(":text[name="+type+"]").eq(3).val(ary[1]);
        radios.eq(2).iCheck("check");
    } else {
        if (val != "?") {
            ary = val.split(",");
            for (var i = 0; i < ary.length; i++) {
                $("." + type + "List input[value='" + ary[i] + "']").iCheck("check");
            }
        }
        radios.eq(3).iCheck("check");
    }
}

//解析日
function expDay(val,type){
    //表达式结果框赋值
    $("span[name=v_"+type+"]").html(val);
    //寻找对应类型的radio列表
    var radios = $(":radio[name="+type+"]");
    var ary = null;
    //根据值的类型进行判断与对应赋值，以及radio的选中。
    if (val == "*") {
        radios.eq(0).iCheck("check");
    }else if (val == "?") {
        radios.eq(1).iCheck("check");
    }else if (val == "L") {
        radios.eq(2).iCheck("check");
    }else if (val.split('-').length > 1) {
        ary = val.split('-');
        $(":text[name="+type+"]").eq(0).val(ary[0]);
        $(":text[name="+type+"]").eq(1).val(ary[1]);
        radios.eq(3).iCheck("check");
    } else if (val.split('/').length > 1) {
        ary = val.split('/');
        $(":text[name="+type+"]").eq(2).val(ary[0]);
        $(":text[name="+type+"]").eq(3).val(ary[1]);
        radios.eq(4).iCheck("check");
    } else if (val.split('W').length > 1) {
        ary = val.split('W');
        $(":text[name="+type+"]").eq(4).val(ary[0]);
        radios.eq(5).iCheck("check");
    }else {
        if (val != "?") {
            ary = val.split(",");
            for (var i = 0; i < ary.length; i++) {
                $("." + type + "List input[value='" + ary[i] + "']").iCheck("check");
            }
        }
        radios.eq(6).iCheck("check");
    }
}

//解析周
function expWeek(val,type){
    //表达式结果框赋值
    $("span[name=v_"+type+"]").html(val);
    //寻找对应类型的radio列表
    var radios = $(":radio[name="+type+"]");
    var ary = null;
    //根据值的类型进行判断与对应赋值，以及radio的选中。
    if (val == "*") {
        radios.eq(0).iCheck("check");
    }else if (val == "?") {
        radios.eq(1).iCheck("check");
    }else if (val.split('-').length > 1) {
        ary = val.split('-');
        $(":text[name="+type+"]").eq(0).val(ary[0]);
        $(":text[name="+type+"]").eq(1).val(ary[1]);
        radios.eq(2).iCheck("check");
    } else if (val.split('/').length > 1) {
        ary = val.split('/');
        $(":text[name="+type+"]").eq(2).val(ary[0]);
        $(":text[name="+type+"]").eq(3).val(ary[1]);
        radios.eq(3).iCheck("check");
    }else if (val.split('#').length > 1) {
        ary = val.split('#');
        $(":text[name="+type+"]").eq(4).val(ary[0]);
        $(":text[name="+type+"]").eq(5).val(ary[1]);
        radios.eq(4).iCheck("check");
    } else if (val.split('L').length > 1) {
        ary = val.split('L');
        $(":text[name="+type+"]").eq(6).val(ary[0]);
        radios.eq(5).iCheck("check");
    }else {
        if (val != "?") {
            ary = val.split(",");
            for (var i = 0; i < ary.length; i++) {
                $("." + type + "List input[value='" + ary[i] + "']").iCheck("check");
            }
        }
        radios.eq(6).iCheck("check");
    }
}

//解析年
function expYear(val,type){
    //表达式结果框赋值
    $("span[name=v_"+type+"]").html(val);
    //寻找对应类型的radio列表
    var radios = $(":radio[name="+type+"]");
    var ary = null;
    //根据值的类型进行判断与对应赋值，以及radio的选中。
    if (val == "*") {
        radios.eq(1).iCheck("check");
    }else if (val.split('-').length > 1) {
        ary = val.split('-');
        $(":text[name="+type+"]").eq(0).val(ary[0]);
        $(":text[name="+type+"]").eq(1).val(ary[1]);
        radios.eq(2).iCheck("check");
    }
}

然后关于整合的web系统，我们可以通过打开链接到这个页面

这里可以通过修改init.js适应大家不同的系统

$("#saveCronBtn").on('click', function(e) {
		let cronInput=$("#cron").val();
		parent.$("#transCronInput").val(cronInput);	
		parent.calNextPoint(cronInput);		
		let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    	parent.layer.close(index); //再执行关闭  
	});
    
    $("#cancelCronBtn").on('click', function(e) {
		let index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
    	parent.layer.close(index); //再执行关闭  
	});

这里只需要父窗口有一个id为transCronInput的input即可，用来保存生成数据

这两个可按需要修改对应的

这里展示一下对应的父窗口设计是怎样的，按快选就是进入上面的页面

到这里，就介绍完我的这个模板，有问题可以留言，看见会回复大家的，下载这个模板组件可以留意下面

【bootstrap3+Cron在线生成器 模板下载】

 

Joker_Ye
关注
专栏目录
基于BootStrap简洁美观Cron表达式选择器JS插件
01-31
基于BootStrap简洁美观Cron表达式选择器JS插件，只需要在项目中将JS文件导入和基本的BootStrap控件就可以运行，具体可看里面的demo.html
bootstrap3+Cron在线生成器 模板下载
10-23
【动态任务-七】Spring整合Cron在线生成器（基于bootstrap3自适应样式）配套使用 参考文章：https://blog.csdn.net/hj7jay/article/details/109251275
SpringBoot实现定时任务操作及cron在线生成器
最新发布
m0_53951384的博客
08-26 1913
讲解SpringBoot如何实现定时任务操作，提供自动生成cron表达式网站，让cron编写不再麻烦。
spring 定时任务cron在线表达式生成
Super的专栏
11-15 1万+
http://cron.qqe2.com/
Cron表达式
gua_gehao的博客
11-16 702
Cron 表达式 Author: Arjen Poutsma ┌───────────── second (0-59) │ ┌───────────── minute (0 - 59) │ │ ┌───────────── hour (0 - 23) │ │ │ ┌───────────── day of the month (1 - 31) │ │ │ │ ┌───────────── month (1 - 12) (or JAN-DEC) │ │ │ │ │ ┌─
在线生成cron表达式
wearegouest的专栏
03-16 1257
http://cron.qqe2.com
cron定时任务表达式组件（vue3+ts+naiveUI）
09-30
3.需要传的值，maxHeight="450px"//最大高， @changeCron="changeCron"//方法，:cronValue="cronValue"//cron表达式， :showCronModal="showCronModal"//打开弹框，style="flex: 0.25"//样式 4.// cron子组件传的...
react-cron:react的cron表达式生成器，定时
05-31
react-crons Usage demo:https://chensongtao.github.io/react-cron/src-index 组件依赖 "react": "16.x", ...import {Cron, InputCron} from 'react-crons' Cron onChange value style // 内容的style clas
.NET-Quartz-Cron-Parser:Quartz Cron 表达式转换为中文自然语言的查询工具， 使用C#作为语言开发
07-13
Cron 表达式是 Quartz 中用来定义定时任务的关键组件，它是一种基于时间的表达方式，由七个字段组成，分别代表秒、分、小时、日、月中的日、月和星期。每个字段可以设定一个或多个值，以及一系列特殊字符（如星号(*)...
Spring调度器corn表达式
07-18
这个是关于Spring调度器的使用 里面详细介绍了各个时间的表达式，有需要可以下载。
Cron表达式选择器JS插件
03-13
基于BootStrap简洁美观Cron表达式选择器JS插件，只需要在项目中将JS文件导入和基本的BootStrap控件就可以运行，具体可看里面的demo.html
Spring定时任务常用Cron表达式
qq_49927667的博客
07-12 7209
Spring定时任务之Cron表达式
springboot cron表达式在线生成地址
CSDN_KONGlX的博客
08-15 118
cron：https://www.pppet.net/
SpringBoot整合定时任务(在线Cron表达式生成器)
好多好多大庆的博客
11-08 2881
1.启动类上添加 @EnableScheduling 注解 //开启定时任务 2.方法上添加 @Scheduled 注解 附上 Scheduled 参数说明 参看博客 https://www.jianshu.com/p/1defb0f22ed1 在线Cron表达式生成器 ...
spring boot 定时任务的实现以及cron定时表达式
热门推荐
健康平安的活着的专栏
07-23 2万+
一.cron表达式 1.cron表达式的格式：秒-分-时-日-月-星期-年（几乎不用，忽略） 如果是6位，则格式为：秒-分-时-日-月-星期 2. 部分表达术语的解释： 1.“*”字符代表所有可能的值，例如：“*”在子表达式（月）里表示每个月的含义，“*”在子表达式（天（星期））表示星期的每一天 2.有些子表达式能包含一些范围或列表，例如：子表达式（天（星期））可以为 “MON-FRI”，“MON，WED，FRI”，“MON-WED,SAT” 3.“/”字符用来指定数值的增量，在子表达式（分
Spring Cron 表达式
weixin_46037781的博客
03-14 3254
1. 简介 Spring提供的轻量级调度框架中，任务的调度通过Trigger接口来实现。Trigger接口的一种实现便是基于CRON表达式的。 但是这里的CRON表达式与Linux系列操作系统中crobjob的表达式不一样，需要特别注意。 在使用注解进行调度的时候，一种写法如下： @Schedule (cron="cron expression") public void doEtlJob(...
SpringBoot/SpringCloudAlibaba(ruoyi)中cron表达式(配置每天指定整点执行)读取配置文件
BADAO_LIUMANG_QIZHI的博客
02-09 1979
在上面的基础上某业务需要配置cron表达式，该表达式需要指定每天的指定的整点执行，比如每天6点、12点、18点、24点执行，又或者是每天6点、14点、24点执行的模式。上面使用的是nacos作为配置中心，但是为了避免nacos持久化的数据库不是公共库，这里没将cron表达式配置进nacos中，而是将其配置在bootstrap.yml中，仅作为演示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值