一.前端使用的是H-ui框架
二.效果图
三.Html页面
<table >
<thead>
<tr>
<th >常用的表达式</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" >for='div_cron_set' checked>
<label for="cycle-1">是</label>
</div>
<div class="radio-box">
<input type="radio" >
<label for="cycle-2">否</label>
</div>
</div>
<div class="col-3"> </div>
</div>
<div >
<div class="row cl">
<label class="form-label col-2"></label>
<div class="formControls col-7">
<div >
<div class="tabBar cl">
<span>秒</span>
<span>分钟</span>
<span>小时</span>
<span>天</span>
<span>月</span>
<span>星期</span>
</div>
<div class="tabCon tabConType" >
<div class="linet"><input type="checkbox" name="chks_seconds"><label>使用秒</label></div>
</div>
<div class="tabCon tabConType" >
<div class="linet"><input type="checkbox" name="chks_minutes"><label>使用分钟</label></div>
</div>
<div class="tabCon tabConType" >
<div class="linet"><input type="checkbox" name="chks_hours"><label>使用小时</label></div>
</div>
<div class="tabCon tabConType" >
<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" >
<div class="linet"><input type="checkbox" name="chks_mouth"><label>使用月</label></div>
</div>
<div class="tabCon tabConType" >
<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" >
<label class="form-label col-2">表达式字段：</label>
<div class="formControls col-7">
<input type="text" readonly>
<input type="text" readonly>
<input type="text" readonly>
<input type="text" readonly>
<input type="text" readonly>
<input type="text" 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" >
<!-- 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("");
}
});
}