下面的例子展示了你如何产生系统的通知。使用HTML5中的Notifications API 和Google Chrome浏览器.
<!DOCTYPE HTML>
<html>
<head>
<title>Creating OS notifications in HTML5</title>
</head>
<body>
<form>
<input type="button" value="Hey, do you want to show notifications or not?" onclick="init();" />
<input type="button" value="Send OS notification" onclick="notify();" />
</form>
<script type="text/javascript">
const AUTO_CLOSE_DELAY_SECONDS = 5;
function init() {
if (window.webkitNotifications) {
window.webkitNotifications.requestPermission();
}
}
function notify() {
var icon = "accept.png";
var title = "[" + new Date().toLocaleTimeString() + "] This notification will close in " + AUTO_CLOSE_DELAY_SECONDS + " seconds";
var body = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus id magna ut sapien sodales ultricies eget nec metus. Pellentesque molestie nunc nec leo iaculis eu dictum ante porta. Sed adipiscing condimentum sapien a scelerisque. Quisque luctus elit vel odio semper iaculis. Nunc sit amet neque justo. Phasellus ullamcorper dui vel risus varius vitae aliquet purus consectetur. Fusce felis nibh, volutpat ac ornare at, ullamcorper eget lacus. Nunc euismod iaculis porta. In hac habitasse platea dictumst. Proin a sem sed neque tincidunt scelerisque eget in elit. Ut quis felis quis tortor sollicitudin sollicitudin id quis tortor. Nunc porttitor diam id leo lobortis aliquet. Nam scelerisque molestie dolor, placerat hendrerit urna euismod eu. Praesent nec massa enim. Donec nec urna dignissim nunc fringilla luctus. Nunc pretium urna et diam accumsan fermentum. Vivamus condimentum lectus vitae mi vulputate pulvinar. Curabitur adipiscing ultrices arcu. Vestibulum luctus malesuada erat sit amet rutrum. Nam feugiat lectus quis libero adipiscing laoreet.";
if (window.webkitNotifications) {
if (window.webkitNotifications.checkPermission() == 0) {
var popup = window.webkitNotifications.createNotification(icon, title, body);
popup.ondisplay = function(event) {
setTimeout(function() {
event.currentTarget.cancel();
}, AUTO_CLOSE_DELAY_SECONDS * 1000);
}
popup.show();
} else {
window.webkitNotifications.requestPermission();
return;
}
}
}
</script>
</body>
</html>
源码下载：
使用HTML5中的Notifications API 和Google Chrome浏览器产生系统通知
分享到：
相关推荐
总的来说，Windows XP作为一款经典的操作系统，它的设计理念和功能设置对后续的Windows版本产生了深远影响。掌握Windows XP的基本操作和管理，对于理解和使用现代操作系统具有基础性的意义。通过深入学习，用户不仅...
网页模板设计中，为了提供与iOS5设备类似的用户体验，开发者经常使用基于jQuery的插件来实现仿ios5通知中心的弹出振动效果。这个压缩包文件"网页模板——基于jQuery仿ios5 通知中心弹出振动插件效果.zip"包含了实现...
Pusher 提供了多种语言的客户端库和易于使用的服务器端接口，支持自定义事件和频道，非常适合构建聊天、通知、协作工具等应用。 2. **Socket.IO**: Socket.IO 是一个流行的JavaScript库，它在浏览器和服务器之间...
HTML5离线存储是Web应用程序实现离线工作的关键技术，它允许网页在用户离线时仍然可以访问和使用部分数据，极大地提升了用户体验。本课程代码主要围绕这个主题展开，旨在帮助开发者掌握HTML5离线存储的基本原理和...
1. **设备API（Device API）**：获取设备的唯一标识符、型号、操作系统版本等信息。 2. **网络状态API（Connection API）**：检测设备的网络连接类型（如WiFi、蜂窝网络）和连接状态。 3. **媒体API（Media API）**...
Android 一种基于Linux的自由及开放源代码的操作系统，主要使用于移动设备，如智能手机和平板电脑，由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎，在手机上的...
网趣网上购物系统Html静态版 已经完美加入商品积分、兑换功能，预存款与积分可以相互兑换，并可以用积分购买站内奖品。 四五、支持验证码无刷新变换功能! 用户在登陆时往往会有输错验证码的情况，这时往往要刷新...
可以通过减少不必要的DOM操作或者使用虚拟DOM技术来优化。 10. **Aria属性和无障碍性**：对于视障用户或其他依赖屏幕阅读器的用户，确保动态时间更新后，这些辅助技术也能正确地读取新的时间值。添加`aria-live=...
同时支持管理员邮件群发，为方便用户购物，报价中心可以直接把商品放入购物车，用户前台购物支持商品对比功能，新版系统新增图片在线操作，支持图片预览并支持删除操作并支持删除商品自动清除图片功能。 网趣静态...
同时支持管理员邮件群发，为方便用户购物，报价中心可以直接把商品放入购物车，用户前台购物支持商品对比功能，新版系统新增图片在线操作，支持图片预览并支持删除操作并支持删除商品自动清除图片功能。 网趣购物...
静态版拥有强大的订单管理系统，优秀的新订单邮件自动通知功能可以第一时间获知网站产生的新订单。可在线编辑生成的订单，并可对订单进行文本打印输出！可对订单进行价格、数量的再修改，也可删除订单中的某商品...
5. **Windows Phone**：微软的移动操作系统，PhoneGap允许开发者使用熟悉的Web工具和语言开发WP应用。 6. **Symbian**：诺基亚曾经主导的智能手机操作系统，PhoneGap 1.1.0为Symbian设备提供了HTML5应用的桥梁。 7. ...
5. **Runtime**：通常用于存储运行时产生的临时文件，如日志、缓存等。 6. **说明.txt**：可能包含项目的基本使用、安装或部署指南。 7. **演示**：可能是一个预览或示例，展示系统如何工作。 8. **workerman-push**...
5. **邮件通知**：为了提高效率，系统可能还包含了自动发送邮件的功能。例如，当新的申领请求产生或审批结果出来时，可以通过SMTP（Simple Mail Transfer Protocol）服务发送通知邮件。 6. **权限管理**：ASP还可以...
HTML使得系统界面布局清晰，操作直观，便于用户快速理解和使用。 4. **系统功能模块**： - **用户管理**：注册、登录、权限分配等功能，确保只有授权人员能访问系统。 - **积分规则设定**：设置积分计算规则，...
使用CSS，我们可以实现如背景颜色、字体样式、边框效果、布局模式（如网格系统）等基本样式设置，同时，CSS3引入的动画和过渡效果，如`transition`和`animation`，使得网页元素动态变化更为流畅自然。 在...
例如，使用Prometheus和Grafana进行性能指标监控，当发现异常情况如CPU过高、内存溢出时，及时通过ELK（Elasticsearch, Logstash, Kibana）日志系统或报警工具发送通知，以便快速定位和解决问题。 8. **分布式系统...
此外，系统的架构设计使得在原有基础上进行二次开发时，不会对已有功能产生过多影响，降低了维护成本。 总的来说，【基于ThinkPHP报名系统】是一个利用PHP和ThinkPHP框架构建的高效、易用的在线报名平台，它的特点...
该支付平台系统具备手机邮件提醒功能，这包括两个方面：一是交易成功或失败时，系统会自动发送通知到用户的注册邮箱或手机，如zaixian_68.gif可能是邮件模板的一部分；二是用户可以设置交易提醒，例如当订单状态发生...