一.前端使用的是H-ui框架
二.效果图
三.Html页面
class="row cl">
class="formControls col-7 skin-minimal">
class="radio-box">
for='div_cron_set' checked>
class="radio-box">
class="col-3">
class="row cl">
class="formControls col-7">
class="HuiTab">
class="tabBar cl">
秒
分钟
小时
天
月
星期
class="tabCon tabConType" id="div_seconds">
class="linet">
class="tabCon tabConType" id="div_minutes">
class="linet">
class="tabCon tabConType" id="div_hours">
class="linet">
class="tabCon tabConType" id="div_dayofMouth">
class="linet">
class="linet">
class="linet">
class="tabCon tabConType" id="div_mouth">
class="linet">
class="tabCon tabConType" id="div_dayofWeek" >
class="linet">
class="imp weekList">
星期一
星期二
星期三
星期四
星期五
星期六
星期日
class="col-3">
class="row cl">
class="formControls col-7">
class="col-3">
class="row cl" id="cron_input">
class="formControls col-7">
class="input-text" style="width:16%" value="*" readonly>
class="input-text" style="width:16%" value="*" readonly>
class="input-text" style="width:16%" value="*" readonly>
class="input-text" style="width:16%" value="*" readonly>
class="input-text" style="width:16%" value="*" readonly>
class="input-text" style="width:17%" value="?" readonly>
class="col-3">
class="row cl">
class="formControls col-7">
class="input-text" name="planExecute.cronExpress" id="express" datatype="cron" nullmsg="请输入Cron表达式" value="* * * * * ?">
class="col-3">
四.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 = '';
if(i<10){
c += '0'+i+'';
}else{
c +=''+i+'';
}
if(i==0){
html+=''+c;
}else if((i+1)%10==0){
html+=c+'';
}else if(i==59){
html+=c+'';
}else{
html += c;
}
}
$("#div_"+type+" .linet").after(html);
}
cron.hoursHtml = function(){
var html = "";
var c = "";
for(var i=0;i<24;i++){
c = '';
if(i<10){
c += '0'+i+'';
}else{
c +=''+i+'';
}
if(i==0){
html+='AM: '+c;
}else if(i==12){
html+='PM: '+c;
}else if(i==23){
html+=c+'';
}else{
html += c;
}
}
$("#div_hours .linet").after(html);
}
cron.dayofMouthHtml = function(){
var html = "";
var c = "";
for(var i=1;i<32;i++){
c = '';
c +=''+i+'';
if(i==1){
html+=''+c;
}else if(i==16 || i==29){
html+=''+c;
}else if(i==31){
html+=c+'';
}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 = '';
c +=''+i+'';
if(i==1){
html+=''+c;
}else if(i==12){
html+=c+'';
}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