HTML5 的 `

在 HTML 中使用 Modernizr 通过 JavaScript 检测音频等功能：`if (Modernizr.audio) { /* 支持音频的浏览器的属性 */ } else{ /* 不支持音频的浏览器的属性 */ }`

Modernizr 是一个小型 JavaScript 库，用于检测下一代 Web 技术的原生实现的可用性。以下是 Modernizr 可以检测的功能列表：功能 CSS 属性 JavaScript 检查 @font-face .fontface Modernizr.fontface canvas .canvas Modernizr.canvas canvas text .canvastext Modernizr.canvastext HTML5 音频 .audio Modernizr.audio HTML5 音频格式 N/A Modernizr.audio[format] HTML5 视频 .video Modernizr.video HTML5 视频格式 N/A Modernizr.video[format] rgba() .rgba Modernizr.rgba hsla() .hsla Modernizr.hsla border-image .borderimage Modernizr.borderimage border-radius box-shadow .borderradius Modernizr.borderradius box-shadow .boxshadow Modernizr.boxshadow 多重背景 .multiplebgs Modernizr.multiplebgs 透明度 .opacity Modernizr.opacity CSS 动画 .cssanimations Modernizr.cssanimations CSS 列 .csscolumns Modernizr.csscolumns CSS 渐变 .cssgradients Modernizr.cssgradients CSS 反射 .cssreflections Modernizr.cssreflections CSS 2D 变换 .csstransforms Modernizr.csstransforms CSS 3D 变换 .csstransforms3d Modernizr.csstransforms3d CSS 过渡 .csstransitions Modernizr.csstransitions 地理位置 API .geolocation Modernizr.geolocation 输入类型 N/A Modernizr.inputtypes[type] 输入属性 N/A Modernizr.input[attribute] localStorage .localstorage Modernizr.localstorage sessionStorage .sessionstorage Modernizr.sessionstorage Web 工作线程 .webworkers Modernizr.webworkers applicationCache .applicationcache Modernizr.applicationcache SVG .svg Modernizr.svg SVG 剪切路径 .svgclippaths Modernizr.svgclippaths SMIL .smil Modernizr.smil Web SQL 数据库 .websqldatabase Modernizr.websqldatabase IndexedDB .indexeddb Modernizr.indexeddb Web 套接字 .websockets Modernizr.websockets Hashchange 事件 .hashchange Modernizr.hashchange 历史管理 .historymanagement Modernizr.historymanagement 拖放 .draganddrop Modernizr.draganddrop 跨窗口消息 .crosswindowmessaging Modernizr.crosswindowmessaging addTest() 插件 API N/A Modernizr.addTest(str, fn)阅读更多

您可以尝试运行以下代码来检测 Web 浏览器中可用的 Web 工作线程功能：          大型循环                    function myFunction(){                        if (Modernizr.webworkers) {                                alert("恭喜！！您有 Web 工作线程支持。" );                        } else{                                alert("抱歉！！您没有 Web 工作线程支持。" );                        }                    }                        点击我             以下为结果

这是一个在 Web 工作线程 JavaScript 文件中处理错误的函数示例，该函数将错误记录到控制台。示例使用错误处理代码，上面的示例将变成如下所示：          大型循环                    var worker = new Worker('bigLoop.js');                worker.onmessage = function (event) {                    alert("已完成 " + event.data + " 次迭代" );                };                worker.onerror = function (event) {                    console.log(event.message, event);                };                function sayHello(){                    alert("您好，先生……");                }                                    

JavaScript 设计为在单线程环境中运行，这意味着多个脚本不能同时运行。考虑这样一种情况：您需要处理 UI 事件、查询和处理大量 API 数据以及操作 DOM。在 CPU 使用率高的情況下，JavaScript 会使您的浏览器挂起。让我们来看一个简单的例子，其中 Javascript 遍历一个大循环：          大型循环                    function bigLoop(){                        for (var i = 0; i

dragenter dragenter 事件用于确定目标是否要接受拖放。如果要接受拖放，则必须取消此事件。dragover dragover 事件用于确定要向用户显示什么反馈。如果取消该事件，则会根据 dropEffect 属性的值更新反馈（通常是光标）。

要在提交表单前调整图像大小，您需要使用 drawImage() 方法。缩放原始图像并在画布上以 [0,0] 处绘制缩放后的版本 `context.drawImage(img, 0,0,img.width,img.height, 0,0,myWidth,UseHeight);` 以上，我们看到了以下内容：这里，`var myWidth = Math.floor(img.width * Scale); var myHeight = Math.floor(img.height * Scale);` 并且，`var x = Math.floor((world.width - myWidth) / 2); var y = Math.floor((world.height - myHeight) / 2);`

DataTransfer 对象保存有关拖放操作的数据。这些数据可以根据与 DataTransfer 对象关联的各种属性来检索和设置。以下是属性：序号 DataTransfer 属性及其描述 1 dataTransfer.dropEffect [ = value ] 返回当前选定的操作类型。此属性可以设置，以更改选定的操作。可能的值为 none、copy、link 和 move。2 dataTransfer.effectAllowed [ = value ] 返回允许的操作类型。此属性可以设置，以更改允许的操作。可能的值为 none、copy、copyLink、copyMove、link、linkMove、move、all 和 uninitialized。3 dataTransfer.types 返回一个 DOMStringList … 阅读更多

要接受拖放，目标至少要侦听三个事件。dragenter 事件，用于确定目标是否要接受拖放。如果要接受拖放，则必须取消此事件。dragover 事件，用于确定要向用户显示什么反馈。如果取消该事件，则会根据 dropEffect 属性的值更新反馈（通常是光标）。最后，drop 事件，允许执行实际的拖放操作。