一.前端使用的是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 ? * L</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="1"><span>星期一</span> <input type="checkbox" name="chk_dayofWeek_value" value="2"><span>星期二</span> <input type="checkbox" name="chk_dayofWeek_value" value="3"><span>星期三</span> <input type="checkbox" name="chk_dayofWeek_value" value="4"><span>星期四</span> <input type="checkbox" name="chk_dayofWeek_value" value="5"><span>星期五</span> <input type="checkbox" name="chk_dayofWeek_value" value="6"><span>星期六</span> <input type="checkbox" name="chk_dayofWeek_value" value="7"><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": break; case "minutes": break; case "hours": break; case "dayofMouth": break; case "mouth": break; case "dayofWeek": break; }*/ if(name == "dayofWeek"){ iv.val("?"); }else{ iv.val("*"); } 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": 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(""); } }); }
时间: 2024-11-05 12:13:07