公司因每次停机更新导致用户的操作不便,所以希望我能做一个公告页出来,进行分析大概自己给自己拟定了一下需求。

  1. 进入首页,如果有存在有效时间内的、状态为正常的公告则自动弹出框进行显示。
  2. 弹出框有关闭和24h内不再显示按钮,优化用户已经知晓通知后的使用体验。24小时之后公告继续弹出。
  3. 当有新的公告时,就算用户设置24小时不弹出也需要弹出以保证公告的传达性。
  4. 用户可以手动点击首页查看公告按钮进行查看。

因为各个用户之间公告的展示需要独立开来,所以把是否查看的状态储存在cookie里。

如下,在首页加载的时候调用showNoticeList方法并传参ready代表是自加载的时候,查看按钮传参click以区分。

$(document).ready(function() {
	showNoticeList('ready');
});

$('#showNoticeBtn').click(function(){
	showNoticeList("click");
});
function showNoticeList(type){
			$.ajax({
				url : '${xxx}/manager/notice',
				type : "post",
				async : true,
				dataType : "json",
				success : function(data) {//查询当前是否有需要展示的公告
					if(type == 'click' && data.length == 0){//当是点击首页按钮,并且没有查到公告时,提示暂无公告。
						layer.alert('暂无公告!', {icon: 0});
					}
					if(data.length > 0){
						var lastDate = $.cookie('lastDate'); //获取上次查看的公告时间,进行对比来区分最近的公告是否被查看
						var showNotice = $.cookie('showNotice');//获取存在cookie里的是否查看公告的值为yes还是no
						if(data[0].createTime != lastDate){//当查询出的公告不是上一次查看的公告时,设置showNotice为yes,无论用户设置是否查看公告都进行弹出
							$.cookie('showNotice','yes');
						}
						if(data[0].createTime == lastDate && showNotice == 'no' && type == 'ready'){ //如果上次查看的公告的修改时间等于本次最新的公告修改时间 默认为用户已看过 可跳过
							return;
						}
						layer.open({
							title: '公告'
							,content: data[0].content //公告内容
							,area: ['970px', '400px']
							,btn: ['24h内不再显示', '确定']
							,btn1: function(index, layero){
								layer.alert('24h内不再自动弹出公告,您可以手动点击首页公告栏查看最新公告!', {icon: 0});
								var date = new Date();
								date.setTime(date.getTime()+24*60*60*1000);
								$.cookie('showNotice', 'no', {expires: date});//设置showNotice的值为no,失效时间为24h
							}
							,btn2: function(index, layero){
						    	
							}
						});
						$.cookie('lastDate',data[0].createTime); //设置上次查看的公告时间为 当前公告时间
				},
				error:function(data) {
					alert("公告查询出错!");
				}
			});
		}

相对应在后台管理的时候,修改公告以及新增公告的时候要保证公告时间为最新时间。

借用layui的富文本编辑器,进行新增、修改公告。

java实现公告的左右循环滚动 java公告栏怎么做_java

java实现公告的左右循环滚动 java公告栏怎么做_加载_02

java实现公告的左右循环滚动 java公告栏怎么做_加载_03