源自:http://jackyrong.iteye.com/blog/1722097
1 fullscreen全屏api,可惜不是全部浏览器支持,播放视频,做游戏时有用
function launchFullScreen(element) { if(element.requestFullScreen) { element.requestFullScreen(); } else if(element.mozRequestFullScreen) { element.mozRequestFullScreen(); } else if(element.webkitRequestFullScreen) { element.webkitRequestFullScreen(); } } // Launch fullscreen for browsers that support it! launchFullScreen(document.documentElement); launchFullScreen(document.getElementById("videoElement")); //点单独的与元素时启动
2 page visiablity页面可见性判断的API
这个可以用来判断当用户的焦点不在当前tab的时候触发,下面这个例子,当CHROME下运行时候,如果新建立一个TAB,并且焦点到了新的tab,则会发现原来的页面的标题的title属性显示为"hidden"了 不错的关于这个功能的详细教程: http://davidwalsh.name/page-visibility
var hidden, state, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; state = "visibilityState"; } else if (typeof document.mozHidden !== "undefined") { hidden = "mozHidden"; visibilityChange = "mozvisibilitychange"; state = "mozVisibilityState"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; state = "msVisibilityState"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; state = "webkitVisibilityState"; } // Add a listener that constantly changes the title document.addEventListener(visibilityChange, function(e) { // Start or stop processing depending on state }, false);
3 getUserMedia api 获得访问媒体设备的API
可以允许调用用户的媒体设备,比如camera等。 更具体的教程见:
http://davidwalsh.name/browser-camera
window.addEventListener("DOMContentLoaded", function() { // Grab elements, create settings, etc. var canvas = document.getElementById("canvas"), context = canvas.getContext("2d"), video = document.getElementById("video"), videoObj = { "video": true }, errBack = function(error) { console.log("Video capture error: ", error.code); }; // 播放 if(navigator.getUserMedia) { // Standard navigator.getUserMedia(videoObj, function(stream) { video.src = stream; video.play(); }, errBack); } else if(navigator.webkitGetUserMedia) { // WebKit系列浏览器 navigator.webkitGetUserMedia(videoObj, function(stream){ video.src = window.webkitURL.createObjectURL(stream); video.play(); }, errBack); } }, false);
4 电池API
可以获得电池的工作状态 这个对移动设备很有效果,相关教程:
http://davidwalsh.name/battery-api 可惜这东西暂时只自mozilla下有效果
var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery; console.warn("Battery charging: ", battery.charging); // true console.warn("Battery level: ", battery.level); // 0.58 console.warn("Battery discharging time: ", battery.dischargingTime); //电池的监听 battery.addEventListener("chargingchange", function(e) { console.warn("Battery charge change: ", battery.charging); }, false);
5 页面元素预加载 prefetch
主要是浏览器加载完页面后,将其放到浏览器的cache中去教程:http://davidwalsh.name/html5-prefetch
<link rel="prefetch" href="http://davidwalsh.name/css-enhancements-user-experience" /> <link rel="prefetch" href="http://davidwalsh.name/wp-content/themes/walshbook3/images/sprite.png" />
相关推荐
5. 表单元素与交互设计:虽然坦克大战主要是通过Canvas进行图形渲染,但HTML5的表单元素和交互设计也是不可忽视的。比如,游戏的开始、暂停、重置等按钮,以及显示分数、生命值等信息的文本元素,都可能涉及到HTML5...
**jQuery 是一个强大的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...通过学习和实践,你可以快速掌握这个强大的工具,并将其应用于实际项目中,提升网页开发效率。
HTML5的核心特性之一是Canvas元素,它是一个可编程的画布,允许开发者通过JavaScript来绘制图形。在切水果游戏中,Canvas用于渲染游戏场景,包括各种水果的动画效果、刀具切割的动作轨迹以及得分计数器等。开发者...
其次,HTML5提供了丰富的表单控件,如、、等,虽然404页面通常不需要复杂的表单,但我们可以利用这些特性创建一个可定制的搜索框,帮助用户更方便地找到他们可能错过的页面。 此外,HTML5的离线存储功能(离线Web...
在现代互联网应用中,实时通信已经成为了一项必不可少的功能,特别是在社交、协作以及客户服务等领域。本文将深入探讨如何基于融云API实现H5网页的实时聊天功能。融云是一家提供即时通讯服务的公司,其API为开发者...
- 事件处理函数接收一个SyntheticEvent实例,它具有与原生事件类似的API。 - React自动处理事件绑定,使得事件处理函数总是与正确组件的`this`上下文关联。 5. **代码复用策略**: - **高阶组件(HOC)**:函数...
在React中,组件可以看作是自包含的、可重用的代码块,它们接收props(属性)作为输入,并返回React元素(JSX)来描述应该在屏幕上看到什么。 2. **React事件机制**: - React不直接将事件绑定到DOM元素上,而是...
它展示了JavaScript在游戏开发中的实际应用,包括基本的事件处理、数据结构的运用以及动画效果的实现,这些都是游戏开发中不可或缺的部分。 总结来说,五子棋inhtml5是利用HTML5和JavaScript技术开发的一款开源小...
- 阻止默认行为:React中必须显式调用`preventDefault()`,而不能依赖`return false`。 3. **React事件代理**: - React的事件代理机制是通过合成事件实现的,所有事件都在最外层处理,这样可以减少事件监听器的...
HTML5 Web Notification 桌面通知API是HTML5引入的一个重要特性,它解决了传统网页消息交互方式的局限性,如闪烁页面标题等。这一特性使得开发者能够创建类似桌面应用的通知,即使浏览器窗口最小化或被遮挡,用户也...
在这个名为"HTML5JJ-master"的压缩包中,我们可能找到一系列与HTML5相关的文件和目录,包括但不限于以下内容: 1. **结构元素**:HTML5引入了许多新的结构元素,如、、、、和等,它们帮助开发者更好地组织网页内容...
8. **安全性**:商城系统需要处理敏感的用户数据,因此防止SQL注入、XSS攻击和CSRF攻击的安全措施是必不可少的。 9. **支付集成**:商城系统通常需要集成第三方支付平台,如支付宝、微信支付等,这涉及到API调用和...
2. **响应速度**:动画的执行速度需适中,过快可能会让用户错过重要信息,过慢则可能让用户感到等待的不耐烦。 3. **可访问性**:考虑到不同用户的需求,应确保动态效果不会对视觉障碍或使用辅助技术的用户造成困扰...
VC++编程通用技巧范例大全适用VC6-VC2010是VC++开发者不可错过的技术宝典,本书涵盖了VC++编程中的各种技巧和实践经验,涵盖了从基本的窗口设置到高级的数据库交互等多方面的内容。以下是本书的知识点总结: 一、...
在IT行业中,表单验证是前端开发不可或缺的一部分,它确保用户输入的数据符合预期的格式和规则,从而保证数据的完整性和安全性。本项目名为“自己写的超级无敌表单验证”,其核心亮点在于自定义属性的设计,让开发者...
总之,资源文件操作是软件开发不可或缺的一部分,涉及到文件的加载、解码、播放等多个环节。通过学习和实践,你可以掌握这些技能,为创建功能丰富的应用程序打下坚实的基础。对于初学者,从实际案例中学习是提高技能...
1. **分页导航**:对于包含大量图片的相册,分页导航是必不可少的。YAlbum可能提供了分页按钮,允许用户通过点击前后翻页,而不是仅依赖滚动条。 2. **图片懒加载**:为了优化页面加载速度,YAlbum可能实现了图片的...
这涉及到网络爬虫技术,如HTTP/HTTPS请求、HTML解析等,也可能涉及到API调用,需要遵循各平台的数据使用规则。 2. **搜索算法**:为了高效地找到符合用户需求的车票,搜索算法至关重要。可能包括对日期、车次、席位...
4. **状态管理**:对于复杂的小程序,状态管理是必不可少的。K-push可能采用了某种状态管理方案,如Redux或Vuex的轻量级版本,来协调不同页面和组件间的共享状态。这有助于理解如何在小程序中有效地组织和管理全局...