JS实现闪动的title消息提醒效果

有时候我们需要提醒用户，有新的消息，这个可以使用下面的方法实现。 效果就是网页窗口在没有获取焦点并且最小化的时候，网页窗口的标题栏“title”显示的内容为“【 】”，“【新消息】”的闪烁效果。 [removed] setTimeout('flash_title()',2000); //2秒之后调用一次 function flash_title() { //当窗口效果为最小化，或者没焦点状态下才闪动 if(isMinStatus() || !window.focus) { newMsgCount(); } else { 在网页设计中，有时我们需要向用户传达新消息的通知，特别是在用户可能没有专注于当前网页的情况下。一个常见的做法是通过改变网页标题来实现“闪动”的提醒效果。本文将详细讲解如何使用JavaScript来实现在窗口未获得焦点或最小化时，使标题栏在“【新消息】”和空白之间交替闪烁。 我们来看一下核心的JavaScript代码片段： ```javascript <script language="JavaScript"> setTimeout('flash_title()', 2000); // 2秒之后调用一次 function flash_title() { // 当窗口效果为最小化，或者没焦点状态下才闪动 if (isMinStatus() || !window.focus) { newMsgCount(); } else { document.title = '订单管理中心-AOOXING'; // 窗口没有消息的时候默认的title内容 window.clearInterval(); } } // 消息提示 var flag = false; function newMsgCount() { if (flag) { flag = false; document.title = '【新订单】'; } else { flag = true; document.title = '【 】'; } window.setTimeout('flash_title(0)', 380); } // 判断窗口是否最小化 function isMinStatus() { // ... } </script> ``` 在这段代码中，`setTimeout` 被用来在2秒后调用 `flash_title` 函数。`flash_title` 函数主要负责检查当前窗口的状态，如果窗口最小化或者失去焦点，它会调用 `newMsgCount` 函数来改变标题。 `newMsgCount` 函数通过一个布尔变量 `flag` 来控制标题内容的切换。当 `flag` 为 `true` 时，标题显示“【新订单】”，反之则显示空格。`setTimeout` 用于设置定时器，每380毫秒再次调用 `flash_title`，从而实现标题的闪烁效果。 `isMinStatus` 函数用于检测窗口是否处于最小化状态。它利用了不同浏览器对 `outerWidth`、`outerHeight`、`screenY`、`screenX` 等属性的支持来判断。对于不同的浏览器，如 Internet Explorer 和非 IE 浏览器（如 Firefox 或 Chrome），判断条件有所不同。 总结来说，实现JS闪动的title消息提醒效果主要包括以下步骤： 1. 使用 `setTimeout` 定时触发提醒函数。 2. 创建一个检查窗口状态的函数 `isMinStatus`，用于判断窗口是否最小化或失去焦点。 3. 设计一个切换标题内容的函数 `newMsgCount`，通过切换 `flag` 的值来改变标题显示。 4. 结合 `isMinStatus` 和 `newMsgCount` 实现标题闪烁，只有在窗口最小化或无焦点时才会触发闪烁。 通过这种方法，开发者可以有效地提醒用户注意网页上的新消息，提升用户体验。然而，需要注意的是，这种提醒方式可能对用户造成一定的干扰，因此在实际应用中需谨慎使用，确保与整体用户体验相协调。