Cron 页面实现效果

一.前端使用的是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("");
				}
		  });
	  }