JAVA實現自動彈出公告欄 可設置24小時內不顯示

公司因每次停機更新導致用戶的操作不便,所以希望我能做一個公告頁出來,進行分析大概自己給自己擬定了一下需求。

  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的富文本編輯器,進行新增、修改公告。

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章