html 通知页面,消息通知页面.html



消息通知页面

$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };

$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };

$axure.utils.getReloadPath = function() { return 'resources/reload.html'; };

u490.png

u2001.png

通知

u3585.png

航班签到打卡

距离截止打卡还有60分钟,别忘记打卡哦!

2016-10-23

10:30

2016-10-23

10:30

2016-10-23

10:30

时间戳:记录每条消息推送的时间随着推送展现展现格式为:年-月-日  时:分

头像:后台维护系统通知消息头像。

       消费系统通知头像。

此排班计划的航班的航班签单打卡系统根据计划起飞时间判断距离即将关闭后台设置的时间

给用户系统提示。

如果用户进行了签到的操作、则不进行消息通知提醒。

提示内容为:

航班号+航班签到打卡

距离截止打卡还有60分钟,别忘记打卡哦!

u3585.png

准备会签到打卡

距离截止打卡还有40分钟,别忘记打卡哦!

u3585.png

航班签到打卡

距离截止打卡还有60分钟,别忘记打卡哦!

此排班计划的准备会的航班签到打卡系统在准备会开始后台设置的时间给用户系统提示。

提示内容为:

航班号+准备会签到打卡

距离截止打卡还有40分钟,别忘记打卡哦!

u3585.png

JD5629航班

已取消了飞行任务。

2016-10-23

10:30

u3585.png

JD5629航班

航班延误了,请小伙伴做好准备。

u3669.png

2016-10-23

10:30

u3669.png

今日中所有临时取消的航班则进行系统消息提醒。

(临时取消的定义:跟计划数据做比对以后,航班状态变为cnl的则为临时取消航班。)

数据:航班号、出发地、目的地、提示时间

今日中所有延误的航班进行系统消息提醒。

数据为:航班号、出发地、目的地、提醒时间。

u3585.png

消费成功

您在飞电商城消费100元。

2016-10-23

10:30

2016-10-23

10:30

u3585.png

充值成功

您在飞电商城充值100元。

一键复制

编辑

Web IDE

原始数据

按行查看

历史

以下是一个简单的通知消息切换的通知页面的示例代码: HTML代码: ```html <div class="notification-container"> <div class="notification-page active"> <h2>Page 1</h2> <p>This is notification page 1.</p> </div> <div class="notification-page"> <h2>Page 2</h2> <p>This is notification page 2.</p> </div> <div class="notification-page"> <h2>Page 3</h2> <p>This is notification page 3.</p> </div> <div class="notification-page"> <h2>Page 4</h2> <p>This is notification page 4.</p> </div> <div class="notification-page"> <h2>Page 5</h2> <p>This is notification page 5.</p> </div> <div class="notification-page"> <h2>Page 6</h2> <p>This is notification page 6.</p> </div> <div class="notification-page"> <h2>Page 7</h2> <p>This is notification page 7.</p> </div> </div> <div class="pagination"> <button class="prev-btn disabled"><</button> <button class="page-btn active">1</button> <button class="page-btn">2</button> <button class="page-btn">3</button> <button class="page-btn">4</button> <button class="page-btn">5</button> <button class="page-btn">6</button> <button class="page-btn">7</button> <button class="next-btn">></button> </div> ``` CSS代码: ```css .notification-container { width: 400px; height: 200px; overflow: hidden; position: relative; } .notification-page { width: 400px; height: 200px; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 0.5s ease-in-out; } .notification-page.active { opacity: 1; } .pagination { display: flex; justify-content: center; margin-top: 10px; } .page-btn { background-color: #fff; border: none; padding: 5px 10px; cursor: pointer; outline: none; } .page-btn.active { background-color: #ccc; } .prev-btn, .next-btn { background-color: #fff; border: none; padding: 5px 10px; cursor: pointer; outline: none; } .prev-btn.disabled, .next-btn.disabled { opacity: 0.5; cursor: not-allowed; } ``` JavaScript代码: ```javascript const pages = document.querySelectorAll('.notification-page'); const btns = document.querySelectorAll('.page-btn'); const prevBtn = document.querySelector('.prev-btn'); const nextBtn = document.querySelector('.next-btn'); let current = 0; function showPage(pageIndex) { pages[current].classList.remove('active'); pages[pageIndex].classList.add('active'); btns[current].classList.remove('active'); btns[pageIndex].classList.add('active'); current = pageIndex; if (current === 0) { prevBtn.classList.add('disabled'); } else { prevBtn.classList.remove('disabled'); } if (current === pages.length - 1) { nextBtn.classList.add('disabled'); } else { nextBtn.classList.remove('disabled'); } } btns.forEach((btn, index) => { btn.addEventListener('click', () => showPage(index)); }); prevBtn.addEventListener('click', () => { if (current > 0) { showPage(current - 1); } }); nextBtn.addEventListener('click', () => { if (current < pages.length - 1) { showPage(current + 1); } }); ``` 代码中使用了一个容器 `notification-container` 来包含所有的通知页面,每个页面使用 `notification-page` 类名来标识,并且使用 `active` 类名来显示当前页面。同时,使用一个分器 `pagination` 来切换通知页面,每个页面对应一个 `page-btn` 按钮,并且使用 `active` 类名来标识当前选中的页面。另外,还有两个分别用于切换到上一和下一的按钮 `prev-btn` 和 `next-btn`。 在 JavaScript 代码中,首先获取所有的通知页面和按钮元素,并且设置一个变量 `current` 来记录当前显示的通知页面的索引。然后定义一个 `showPage` 函数来切换通知页面和更新分器的状态,并且在按钮元素上添加点击事件监听器来触发 `showPage` 函数。最后,还需要在上一和下一的按钮上添加点击事件监听器来切换通知页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值