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 ? * 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

Cron 页面实现效果的相关文章

在uwp仿IOS的页面切换效果

有时候我们需要编写一些迎合IOS用户使用习惯的uwp应用,我在这里整理一下仿IOS页面切换效果的代码. 先分析IOS的页面切换.用户使用左右滑动方式进行前进和后退,播放类似于FlipView的切换动画.导航到新页面时,使用页面前进的动画. UWP自带很多切换效果,位于 Windows.UI.Xaml.Media.Animation 中.与苹果的切换效果最接近的是 PaneThemeTransition (而不是EdgeUIThemeTransition). PaneThemeTransition

实现ViewPager多页面滑动效果

 viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前焦点页

android UI之ViewPager多页面滑动效果

  viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前

用Fragment实现Tab页面切换效果初步总结

前言: 最近在Android项目中需要在活动中实现多页面切换的功能,第一次是实现的过程中,是让Activity同时去加载三个界面的,通过点击tab按钮对页面设置隐藏和显示,实现页面切换效果,但是后面发现这种实现方式其实存在很多问题: 首先,同时去加载三个页面,切换Activity的速度会变慢,尤其是布局中如果有很多ImageView,ImageButton等使用到图片资源的控件时,切换效果非常不好: 其次,由于使用了很多图片资源,在退出Activity的时候,像Drawable,Bitmap等一

ios 类似淘宝商品详情页面的效果

今天试着写ios 类似淘宝商品详情页面的效果 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中的delegate方法, 实现delegate代理方法的时候使用 - (void)s

html5各种页面切换效果和模态对话框

页面动画:data-transition 属性可以定义页面切换是的动画效果.例如:<a href="index.html" data-transition="pop">I'll pop</a>data-transition 参数表:参数说明slide 从右侧向左滑入页面slideup 从底部向上滑入slidedown 从上向下滑入pop 从中心渐显展开fade 渐显flip 翻转备注:如果想要在目标页面中显示后退按钮,可以在链接中加入 dat

UI界面之ViewPager多页面滑动效果的实现

viewPager实现引导页 ViewPager多页面滑动效果 1.Android的左右滑动在实际编程经常能用到,比如查看多张图片,左右 切换tab页. 2.自android 3.0之后的SDK中提供了android-support-V4包用以实现 版本兼容,让老版本系统下的应用通过加入jar包实现扩展,其中有一 个可以实现左右滑动的类ViewPager 今天我们就用ViewPager类来实现引导页的实战案例 实现功能: 1.实现ViewPager多页面滑动效果. 2.下方的显示当前焦点页的

iOS开发之各种动画各种页面切面效果

因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦.今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画.说道动画其中有一个是仿射变换的概念,至于怎么仿射的怎么变换的,原理如何等在本篇博客中不做赘述.今天要分享的是如和用动画做出我们要做的效果. 今天主要用到的动画类是CALayer下的CATransition至于各种动画类中如何继承的在这也不做赘述,网上的资料是一抓一大把.好废话少说切入今天的正题. 一.封装动画

iOS 8:【转】iOS开发之各种动画各种页面切面效果

源地址:http://www.cnblogs.com/ludashi/p/4160208.html 因工作原因,有段时间没发表博客了,今天就发表篇博客给大家带来一些干货,切勿错过哦.今天所介绍的主题是关于动画的,在之前的博客中也有用到动画的地方,今天就好好的总结一下iOS开发中常用的动画.说道动画其中有一个是仿射变换的概念,至于怎么仿射的怎么变换的,原理如何等在本篇博客中不做赘述.今天要分享的是如和用动画做出我们要做的效果. 今天主要用到的动画类是CALayer下的CATransition至于各