JS定时器

 此代码实现功能为日程提醒，根据数据库表中存储的日程数据中的时间触发前端JS，弹窗提示当前时间所要完成的日程事项。代码如下：

 

后台controller代码：

 //将数据库中取到的list数据转成json格式

 

/**
 * 根据u_id获取当天日程
 * @return
 */
@RequestMapping("getTodayScheduleempl")
@ResponseBody
public String getTodayScheduleempl(){
	Session session=SecurityUtils.getSubject().getSession();
	Login login = (Login)session.getAttribute("login");
	
	List<Scheduleemployees> todaylist = scheduleemployeesService.getTodayScheduleempl(login.getuId());
	List<Map> listMap = new ArrayList<Map>();
	for (Scheduleemployees scheduleemployees : todaylist) {
		Map map  = new HashMap();
		map.put("scheduleContent", scheduleemployees.getScheduleContent());
		map.put("startTime", scheduleemployees.getScheduleStartTime());
		listMap.add(map);
	}
	String json = JSON.toJSONString(listMap);
	return json;
}

json格式为：

前端js代码：

 

<!-- 定时器  打开当前页面时加载，后台获取数据并返回给前端 -->
<script type="text/javascript">
	$.ajax({
		url:"getTodayScheduleempl",
		type:"post",
		dataType:"json",
		success:function(data){
			var list = data;
			
			//遍历后台取到的list数据
			$.each(list, function(index,time) {
		        var timeTask=setInterval(function(){
			        
		        	//将后台取到的json数据中long类型的时间转换为Date格式
			        var startdate = new Date(time.startTime);
			        
					//将后台取到Date格式的时间和当前时间分别转为时间戳
			        var starttimestamp = Date.parse(startdate);
			        var nowtimestamp = Date.parse(new Date());
			        
					//获取后台数据的"日程"属性
			        var event = time.scheduleContent;   
					
					//当数据库表中的其中一项时间戳与当前时间戳相等时，触发弹框提醒
			        if(starttimestamp == nowtimestamp){
			        	callFunction(event); 
			        }
		    },1000);
		});
		}
	})	  
	
	function callFunction(task){
		var myDate = new Date();
		var nowdate = myDate.toLocaleTimeString();
		alert(nowdate+"       "+"[我的日程]"+task);
	}
</script>
<!-- /定时器  打开当前页面时加载，后台获取数据并返回给前端 -->

弹窗效果：

数据库表结构：

Mysql语句及查询结果：

为避免数据量过大，通过CURDATE( )条件获取当天时间。