一.前端使用的是H-ui框架
二.效果图
三.Html页面
<table id="table_cron" style="display:none" class="table-new table-border-new table-bordered-new table-bg-new mt-20"> <thead> <tr> <th id="table_title" colspan="2" scope="col">常用的表达式</th> </tr> <tr class="text-c"> <th>名称</th> <th>表达式</th> </tr> </thead> <tbody> <tr class="text-c"> <td>每隔5秒执行一次</td> <td>*/5 * * * * ?</td> </tr> <tr class="text-c"> <td>每隔1分钟执行一次</td> <td>0 */1 * * * ?</td> </tr> <tr class="text-c"> <td>每天23点执行一次</td> <td>0 0 23 * * ?</td> </tr> <tr class="text-c"> <td>每天凌晨1点执行一次</td> <td>0 0 1 * * ?</td> </tr> <tr class="text-c"> <td>每月最后一天23点执行一次</td> <td>0 0 23 L * ?</td> </tr> <tr class="text-c"> <td>每周星期天凌晨1点执行一次</td> <td>0 0 1 ? * SUN</td> </tr> <tr class="text-c"> <td>在26分、29分、33分执行一次</td> <td>0 26,29,33 * * * ?</td> </tr> <tr class="text-c"> <td>每天的0点、13点、18点、21点都执行一次</td> <td>0 0 0,13,18,21 * * ?</td> </tr> </tbody> </table> <div class="row cl"> <label class="form-label col-2"><span class="c-red">*</span>是否循环:</label> <div class="formControls col-7 skin-minimal"> <div class="radio-box"> <input type="radio" id="cycle-1" name="planExecute.isCycle" value="Y" data-for='div_cron_set' checked> <label for="cycle-1">是</label> </div> <div class="radio-box"> <input type="radio" id="cycle-2" name="planExecute.isCycle" value="N"> <label for="cycle-2">否</label> </div> </div> <div class="col-3"> </div> </div> <div id="div_cron_set"> <div class="row cl"> <label class="form-label col-2"></label> <div class="formControls col-7"> <div id="tab_demo" class="HuiTab"> <div class="tabBar cl"> <span>秒</span> <span>分钟</span> <span>小时</span> <span>天</span> <span>月</span> <span>星期</span> </div> <div class="tabCon tabConType" id="div_seconds"> <div class="linet"><input type="checkbox" name="chks_seconds"><label>使用秒</label></div> </div> <div class="tabCon tabConType" id="div_minutes"> <div class="linet"><input type="checkbox" name="chks_minutes"><label>使用分钟</label></div> </div> <div class="tabCon tabConType" id="div_hours"> <div class="linet"><input type="checkbox" name="chks_hours"><label>使用小时</label></div> </div> <div class="tabCon tabConType" id="div_dayofMouth"> <div class="linet"><input type="checkbox" name="chks_dayofMouth"><label>使用日</label></div> <div class="linet"><input type="radio" name="radio_dayofMouth" value="L"><label>本月最后一天</label></div> <div class="linet"><input type="radio" name="radio_dayofMouth" value="S" checked><label>指定</label></div> </div> <div class="tabCon tabConType" id="div_mouth"> <div class="linet"><input type="checkbox" name="chks_mouth"><label>使用月</label></div> </div> <div class="tabCon tabConType" id="div_dayofWeek" > <div class="linet"><input type="checkbox" name="chks_dayofWeek"><label>使用周</label></div> <div class="imp weekList"> <input type="checkbox" name="chk_dayofWeek_value" value="MON"><span>星期一</span> <input type="checkbox" name="chk_dayofWeek_value" value="TUE"><span>星期二</span> <input type="checkbox" name="chk_dayofWeek_value" value="WED"><span>星期三</span> <input type="checkbox" name="chk_dayofWeek_value" value="THU"><span>星期四</span> <input type="checkbox" name="chk_dayofWeek_value" value="FRI"><span>星期五</span> <input type="checkbox" name="chk_dayofWeek_value" value="SAT"><span>星期六</span> <input type="checkbox" name="chk_dayofWeek_value" value="SUN"><span>星期日</span> </div> </div> </div> </div> <div class="col-3"> </div> </div> <div class="row cl"> <label class="form-label col-2"></label> <div class="formControls col-7"> <label style="padding-right:14%">秒</label> <label style="padding-right:12%">分钟</label> <label style="padding-right:11%">小时</label> <label style="padding-right:14%">天</label> <label style="padding-right:14%">月</label> <label style="padding-right:0%">星期</label> </div> <div class="col-3"> </div> </div> <div class="row cl" id="cron_input"> <label class="form-label col-2">表达式字段:</label> <div class="formControls col-7"> <input type="text" id="input_seconds" name="planExecute.secondsValue" class="input-text" style="width:16%" value="*" readonly> <input type="text" id="input_minutes" name="planExecute.minutesValue" class="input-text" style="width:16%" value="*" readonly> <input type="text" id="input_hours" name="planExecute.hoursValue" class="input-text" style="width:16%" value="*" readonly> <input type="text" id="input_dayofMouth" name="planExecute.dayofMouthValue" class="input-text" style="width:16%" value="*" readonly> <input type="text" id="input_mouth" name="planExecute.mouthValue" class="input-text" style="width:16%" value="*" readonly> <input type="text" id="input_dayofWeek" name="planExecute.dayofWeekValue" class="input-text" style="width:17%" value="?" readonly> </div> <div class="col-3"> </div> </div> <div class="row cl"> <label class="form-label col-2"><span class="c-red">*</span>Cron表达式:</label> <div class="formControls col-7"> <input type="text" class="input-text" name="planExecute.cronExpress" id="express" datatype="cron" nullmsg="请输入Cron表达式" value="* * * * * ?"> <!-- 85 <input class="btn btn-primary" type="button" value="解析到UI" > --> </div> <div class="col-3"> </div> </div> </div>
四.js代码
var cron = {};
/* 初始化方法 */
cron.init = function(){
cron.secondsHtml("seconds");
cron.secondsHtml("minutes");
cron.hoursHtml();
cron.dayofMouthHtml();
cron.mouthHtml();
cron.chkClick();
cron.chksClick();
cron.radioClick();
cron.cronBlur();
cron.cycle();
}
cron.secondsHtml = function(type){
var html = "";
var c = "";
for(var i=0;i<60;i++){
c = '<input type="checkbox" name="chk_'+type+'_value" value="'+i+'">';
if(i<10){
c += '<span>0'+i+'</span>';
}else{
c +='<span>'+i+'</span>';
}
if(i==0){
html+='<div class="imp secondList">'+c;
}else if((i+1)%10==0){
html+=c+'</div><div class="imp secondList">';
}else if(i==59){
html+=c+'</div>';
}else{
html += c;
}
}
$("#div_"+type+" .linet").after(html);
}
cron.hoursHtml = function(){
var html = "";
var c = "";
for(var i=0;i<24;i++){
c = '<input type="checkbox" name="chk_hours_value" value="'+i+'">';
if(i<10){
c += '<span>0'+i+'</span>';
}else{
c +='<span>'+i+'</span>';
}
if(i==0){
html+='<div class="imp hourList">AM: '+c;
}else if(i==12){
html+='</div><div class="imp hourList">PM: '+c;
}else if(i==23){
html+=c+'</div>';
}else{
html += c;
}
}
$("#div_hours .linet").after(html);
}
cron.dayofMouthHtml = function(){
var html = "";
var c = "";
for(var i=1;i<32;i++){
c = '<input type="checkbox" name="chk_dayofMouth_value" value="'+i+'">';
c +='<span>'+i+'</span>';
if(i==1){
html+='<div class="imp dayList">'+c;
}else if(i==16 || i==29){
html+='</div><div class="imp dayList">'+c;
}else if(i==31){
html+=c+'</div>';
}else{
html += c;
}
}
$("#div_dayofMouth .linet:eq(2)").after(html);
}
cron.mouthHtml = function(){
var html = "";
var c = "";
for(var i=1;i<13;i++){
c = '<input type="checkbox" name="chk_mouth_value" value="'+i+'">';
c +='<span>'+i+'</span>';
if(i==1){
html+='<div class="imp mouthList">'+c;
}else if(i==12){
html+=c+'</div>';
}else{
html += c;
}
}
$("#div_mouth .linet").after(html);
}
/**
* 用户选择:
* 1秒 2秒 1天 星期一......时触发
*/
cron.chkClick = function(){
$("input[type='checkbox'][name*='_value']").click(function(){
var name = $(this).attr("name").split("_")[1];
var v = "";
var flag = $(this).parents("div.tabCon").find(".linet:eq(0) input").is(":checked");
if(!flag)
return;
if(name == "dayofMouth"){
var vr = $("input[type='radio'][name='radio_dayofMouth']:checked").val();
if(vr == "L"){
return;
}
}
$("input[type='checkbox'][name='"+$(this).attr('name')+"']:checked").each(function(){
v+=$(this).val()+",";
});
cron.setInputValue(v,name);
});
}
cron.radioClick = function(){
$("input[type='radio'][name='radio_dayofMouth']").click(function(){
var flag = $(this).parents("div.tabCon").find(".linet:eq(0) input").is(":checked");
if(!flag)
return;
var vr = $(this).val();
var v = "";
if(vr == "L"){
var iv = $("#input_dayofMouth");
iv.val("L");
cron.expressValue();
}else{
$("input[type='checkbox'][name='chk_dayofMouth_value']:checked").each(function(){
v+=$(this).val()+",";
});
cron.setInputValue(v,"dayofMouth");
}
});
}
/**
* 用户选择:
* 使用秒、使用时,使用天,使用周时触发
*/
cron.chksClick = function(){
$("input[type='checkbox'][name*='chks']").click(function(){
var name = $(this).attr("name").replace("chks_","");
if($(this).is(":checked")){
var v = "";
if(name == "dayofMouth"){
var vr = $("input[type='radio'][name='radio_dayofMouth']:checked").val();
if(vr == "L"){
var iv = $("#input_dayofMouth");
iv.val("L");
cron.expressValue();
return;
}
}
$("input[type='checkbox'][name='chk_"+name+"_value']:checked").each(function(){
v+=$(this).val()+",";
});
cron.setInputValue(v,name);
}else{
var iv = $("#input_"+name);
switch(name)
{
case "seconds":
iv.val("*");
break;
case "minutes":
iv.val("*");
break;
case "hours":
iv.val("*");
break;
case "dayofMouth":
$("#input_dayofMouth").val() == "?"?iv.val("*"):iv.val("?");
break;
case "mouth":
iv.val("*");
break;
case "dayofWeek":
iv.val("?");
$("#input_dayofMouth").val() == "?"?$("#input_dayofMouth").val("*"):"";
break;
}
cron.expressValue();
}
});
}
cron.setInputValue = function(v,name){
if(v.length>0){
v = v.substring(0,v.length-1);
}
var iv = $("#input_"+name);
switch(name)
{
case "seconds":
everyCron();
break;
case "minutes":
everyCron();
$("#input_seconds").val() == "*"?$("#input_seconds").val("0"):"";
replaceCron("seconds");
break;
case "hours":
iv.val(v);
$("#input_seconds").val() == "*"?$("#input_seconds").val("0"):"";
$("#input_minutes").val() == "*"? $("#input_minutes").val("0"):"";
replaceCron("minutes");
break;
case "dayofMouth":
iv.val(v);
break;
case "mouth":
iv.val(v);
break;
case "dayofWeek":
$("#input_seconds").val() == "*"?$("#input_seconds").val("0"):"";
$("#input_minutes").val() == "*"? $("#input_minutes").val("0"):"";
$("#input_hours").val() == "*"?$("#input_hours").val("0"):"";
$("#input_dayofMouth").val() == "*"?$("#input_dayofMouth").val("?"):"";
iv.val(v);
break;
}
if(name == "dayofWeek"){
iv.val()==""?iv.val("?"):"";
}else{
iv.val()==""?iv.val("*"):"";
}
//每秒 每分钟处理
//如果选择了 5秒,值替换成 */5 (表示每5秒执行一次)
function everyCron(){
var flag = true;
iv.nextAll().each(function(){
var nv = $(this).val();
if(nv != "*" && nv != "?" && nv!= "L"){
flag = false;
return;
}
});
if(flag){
if(v == ""){
iv.val(v);
}else{
v.indexOf(",")>0?iv.val(v):iv.val("*/"+v);
}
}else{
iv.val(v);
}
}
//如果选择了5秒 和 1分钟 把(*/5)替换成(5),表示每分钟1秒执行
function replaceCron(name){
var imv = $("#input_"+name).val();
if(imv.length>1){
$("#input_"+name).val(imv.replace("*/",""))
}
}
cron.expressValue();
}
cron.expressValue = function(){
var v =["seconds","minutes","hours","dayofMouth","mouth","dayofWeek"];
var ev = "";
for(var i=0;i<v.length;i++){
ev += $("#input_"+v[i]).val()+" "
}
$("#express").val(ev.replace(/\s*$/g,''));
}
cron.cronBlur = function(){
$("#express").blur(function(){
var v = $(this).val().split(" ");
var l = $("#cron_input input").length;
for(var i=0;i<l;i++){
$("#cron_input input:eq("+i+")").val(v[i]==undefined?"":v[i]);
}
})
}
cron.cycle = function(){
$("input[type='radio'][name='planExecute.isCycle']").click(function(){
var v = $(this).val();
if(v == "Y"){
$("#div_cron_set").show();
$("#express").removeAttr("ignore");
}else{
$("#div_cron_set").hide();
$("#express").attr("ignore","ignore");
$("#cron_input").contents().find("input").val("");
$("#express").val("");
}
});
}